Using JQuery Load with MVC Framework

I decided to spend this weekend digging into the Framework and seeing how I could leverage JQuery features to create a better user experience.  One of the more notable things I have come across to this point is the use of the JQuery Load function in place of User Control string generation.

One of my favorite techniques for loading Server driven content via JavaScript is to create an ASCX with the appropriate HTML template and then load its HTML via JavaScript from a web service based request.  JQuery makes it very easy to append the HTML you get back and you can really encapsulate a lot of the heavy lifting inside the user control.

There really is no problem with this approach and I will still continue to use it for many things, however, with the routing mechanism that MVC offers you can greatly simplify the process by which this dynamic content is generated and gain greater flexibility for generating it.  Let me explain:

I wont give a long overview of how routing works, if your interested, I invite you to read this blog post by Scott Guthrie for more information.  Needless to say, I have a very basic routing setup with the following rule:

routes.MapRoute(

     "Default",

     "{controller}/{action}/{id}",

     new { controller = "Home", action = "Index", id = 0 }

If we wanted to use the Action Link '/Test/EditSeries/14' to follow this route, we can expect to create a method EditSeries in our TestController which takes a single parameter for the 'id'.  The method would then designate which view to use once the controller method completes its execution.

As for applying this to the Load method provided by JQuery, we have to simply understand that Load will make an HTTP request which will invoke the routing.  Here is the JavaScript I am currently using:

$("#addGenre").click(function() {
        $("#genreContainer").append("<div class=\"genreSelect\"></div>");
        $("#genreContainer").append("<br style=\"clear: both;\" />");

        $("#genreContainer > .genreSelect:last").load("/Test/GenreSelect", null,
           function() {
              // setup the new slider
              SetupSlider($(this).find(".slider"), 0);
              SetupCloseIcon($(this).find(".removeGenre"));

              $(this).css("display", "block");
          });
    });

You will notice that I am passing a valid MVC routing path to Load, this will cause the routing to invoke the GenreSelect method of the TestController class.  I also defined GenreSelect.ascx in the same location as the View whose JavaScript is calling this "user control view".  Thus my controller code for this operation looks like such:

public ActionResult GenreSelect()
{
     ViewData["Genres"] = Genres.GetAllGenres(Context);
      return View("Series/GenreSelect");
}

Notice how simple this code is, and this is all that needs to be done to prepare the "partial" view.

The basic premise of this posting is to show how you can leverage some of the automated content loading features of JQuery and the MVC routing system to simplify this sort of an operation. It also makes more sense given the premise of what we are doing.