One of the things that the MVC model is really great at, is integrating with Ajax. I blogged about a RenderJsonResult class a few weeks ago that one could use to create controller actions which render their output as Json – since then the last ASP.NET MVC framework drop also includes a JsonResult type of its own. What I didn’t talk about in the mentioned post, was how to actually invoke such actions from JavaScript; enter jQuery.

Ajax with JQuery

In the crowd of JavaScript libraries out there, JQuery is probably the most unique – at least for now. Its main features are the abilities to query and manipulate the DOM using syntax that anyone familiar with CSS will feel at home with. But jQuery offers more than this – it also has an Ajax API. With this, we can easily perform a POST or GET on a controller action and handle the result it returns asynchronously.

As an example, lets assume we have a FeedbackController with an action Submit:

public ActionResult Submit(string author, string email, string comment)

{

    // logic for submitting feedback omitted

    return new RenderJsonResult {Result = new {success = true, message = "Thank you! We value your feedback."}};

}

Invoking this from JavaScript using jQuery is super easy:

$.ajax(

{

   type: "POST",

   url: "/Feedback/Submit",

   data:"author=" + author + "&email=" + authorEmail + "&comment=" + comment,

   success: function(result)

    {

        if(result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success

        $("#feedback_status").slideDown(250).text(result.message); // show status message with animation

    },                

   error : function(req, status, error)

   {

        alert("Sorry! We could not receive your feedback at this time.");   

   }

});

We set the type of the call to POST, because we need to send some data with our request, which we use the data option to specify. jQuery allows us to provide a few callback methods that will be invoked on the success or failure of the Ajax call. If our call is successful, the success callback gets invoked, which gets passed an object representing the result of the Ajax call. jQuery is able to handle results formatted in different styles, including xml, html, script and json. You can specify the expected data type using the dataType option. Leaving it out will cause jQuery to choose the type based on the MIME type of the response, which is usually fine. There are other options which can be used; you’ll find a complete description of them here. The code in the success callback uses the selectors, attributes, manipulation and effects APIs to reset the input fields and tell the user that the feedback was received.

It’s simple, it’s elegant – and so, so far removed from the bloated UpdatePanels of ASP.NET.

Surface Scratched

This post merely scratches the surface of what is possible when combining ASP.NET MVC with jQuery (or other Ajax APIs for that matter). Look out for more posts on this topic in the future!