Subscribe to Sergio Tapia - Lost in the GC.        RSS Feed
-----

ASP.Net MVC3 and AJAX - A small introduction on how easy it is to use.

Icon Leave Comment
This is our end result:

Posted Image

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:

public ActionResult GetStatus()
{
    return Content("<div>Status OK - " + DateTime.Now.ToLongTimeString() + ".</div>");
}



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:

Posted Image

<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>


Great, now go into your Views/Home/Index.cshtml file, and let's create an ajax link, using the built in MVC3 helpers.

<div id="status">
    <div>No status yet.</div>
</div>  

<br />   

@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.InsertBefore, OnSuccess = "Update"})


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.

<script type="text/javascript">
    function Update() {
        $("#status").children().first().hide().fadeIn();
    }
</script>


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.

<script type="text/javascript">
    function Update() {
        PurgeOldStatuses();
        $("#status").children().first().hide().fadeIn();
    }

    function PurgeOldStatuses() {
        $("#status").find("div").slice(5).remove();
    }
</script>



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!

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

5 user(s) viewing

5 Guests
0 member(s)
0 anonymous member(s)

About Me

Posted Image


Bienvenidos! I'm a USA ex-pat living in Bolivia for the past 10 years. Web development is my forte with a heavy lean for usability and optimization. I'm fluent in both English and Spanish. I guest write for the popular Python website Python Central. Visit my website.

Categories