The user is going to click on the link, and using AJAX we're going to fetch the result and update the value on the screen. All without doing a complete page refresh.
The Controller Setup.
First go to your HomeController and let's create a new method:
[sourcecode language="csharp"]public ActionResult GetStatus()
{
return Content("<div>Status OK - " + DateTime.Now.ToLongTimeString() + ".</div>");
}[/sourcecode]
The View Setup.
We need to reference a couple of the AJAX libraries. Go into your _layout.cshtml file and add a script reference to the following:
[sourcecode language="csharp"]<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>[/sourcecode]
Great, now go into your Views/Home/Index.cshtml file, and let's create an ajax link, using the built in MVC3 helpers.
[sourcecode language="csharp"]<div id="status">
<div>No status yet.</div>
</div>
<br />
@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.InsertBefore, OnSuccess = "Update"})[/sourcecode]
Let's go over a bit of the code we just wrote.
We're using the @Ajax.ActionLink helper to generate a link for us. We first give it the text to display. Next, we tell it what method to run on our HomeController when it is clicked. And finally we setup a few AjaxOptions, mainly, what html element with id foo to update, and how to append the result in it. We also have to let it know what javascript function to run on the Success callback.
As you can see when the Ajax call is finished, it'll go hunting for a javascript function called "Update". Let's write that in now.
[sourcecode language="csharp"]
<script type="text/javascript">
function Update() {
$("#status").children().first().hide().fadeIn();
}
</script>[/sourcecode]
Since the Ajax call will just abrutly throw the result in the DOM and make it display, we have to use some jQuery trickery in order to make the newly added item fade into view. Remember, by the time the Update() function is called, the element is already set into place and in the DOM. This method is run fast so we as the end user don't see the difference.
So, the jQuery is saying: "In the #status div, for all children, get the first child, hide it, then fade it in."
The result is the nice fade in feature we were looking for.
But remember, we only want to display at most 5 elements. Any other elements added after that have to push the older ones into purging. Let's wire that up right now.
[sourcecode language="csharp"]
<script type="text/javascript">
function Update() {
PurgeOldStatuses();
$("#status").children().first().hide().fadeIn();
}
function PurgeOldStatuses() {
$("#status").find("div").slice(5).remove();
}
</script>
[/sourcecode]
Basically, this is what we're saying: "In the #status div, find all the div's, from index 5 of this collection of found divs, remove them."
Pretty simple stuff, right? :)
The end result is a nice nifty interface that let's our users know the time.
Stay tuned for some Ajax Form trickery!
No hay comentarios:
Publicar un comentario