ASP.NET MVC Framework and AJAX Using jQuery, JavaScriptSerializer and LINQ
by David Hayden, Florida ASP.NET Developer
As mentioned earlier, I presented the new ASP.NET MVC Framework at the South Florida Code Camp.
ASP.NET MVC Framework and Composite Web Application Block
As an FYI, I just posted some sample code that shows off the ASP.NET MVC Framework with the Composite Web Application Block
I talked about that at the South Florida Code Camp as well. The Composite Web Application Block will help us with Dependency Injection, Business Module discovery and initialization, and other development tasks. As mentioned in the post, I also presented abstracting out saving the shopping cart into session state for our ficticious green tea store. Saves you the effort of creating your own session state wrapper.
ASP.NET MVC Framework and AJAX Using jQuery
In addition to presenting the Composite Web Application Block in the Web Client Software Factory, I was able to briefly present a little bit of AJAX using jQuery with the MVC Framework. In this tutorial, I will describe some of that AJAX code to give you a better feel as to how easy it is to use the ASP.NET MVC Framework, jQuery, and the JavaScriptSerializer to make AJAX calls to the web server.
The Sample ASP.NET MVC Application
The sample ASP.NET MVC Application in question helps developers manage and promote their developer events.
As part of the application's functionality, you can view the attendees for a given event by clicking on the Attendees Link in the Event List. As we will discuss, the Attendees Link makes a javascript call to the server using jQuery. The call is picked up by the Attendees Controller and List Action, which uses LINQ To SQL ( wrapped using the Repository Pattern ) and returns JSON back to the web client. Let's break this down :)
ASP.NET MVC Controller Class and Action
The code to retrieve the attendees for a particular event sits in the Attendees Controller and List Action. It uses LINQ To SQL wrapped via the Repository Pattern:
public class AttendeesController : ControllerBase
{
[PrincipalPermission(SecurityAction.Demand, Authenticated=true)]
[ControllerAction]
public void List(int id)
{
var attendees = Repository<Attendee>.Find()
.Where(a => a.EventId == id)
.Select(a => new { a.Firstname, a.Lastname }).ToList();
JavaScriptSerializer jss = new JavaScriptSerializer();
HttpContext.Response.Write(jss.Serialize(attendees));
}
}
Once the attendees have been pulled from the database using LINQ To SQL, I use the JavascriptSerializer Class to convert the list of attendees to JSON. The results get sent over the wire via HttpContext.Response.Write.
The jQuery Javascript / AJAX Code
The jQuery code on the client is pretty trivial. It calls the ~/Attendees/List/2 Url to get the attendees for say EventId = 2 and adds the results to a table. If the javascript is confusing, I recommend looking at the jQuery Documentation. I am essentially looping through each of the attendees and appending new rows to the table.
function GetAttendees(id)
{
$.getJSON("/Attendees/List/"+ id,
function(attendees){
$("#attendees").empty();
$("#eventId").html(id);
$("#totalAttendees").html(attendees.length);
$.each(attendees, function(attendee){
$("#attendees").append('<tr><td>' +
attendee.Firstname + '</td><td>' +
attendee.Lastname + '</td></tr>');
});
});
};
As mentioned above, the end results are that the attendees are shown for each event via AJAX, which provides us a very responsive UI on the client:
Conclusion
The coolness is that with the help of all these wonderful technologies it is pretty simple to pull off a responsive AJAX call to the server without causing a postback.
Hope this helps!
Author: David Hayden, Florida ASP.NET Developer
Site: http://www.davidhayden.com/