Using jQuery with ASP.NET MVC

The Microsoft ASP.NET MVC Framework has been getting talked about more and more lately.  The power and flexibility of ASP.NET MVC allows for developers to use libraries other than those include in the box.  The popular JavaScript framework, jQuery, is no exception.

The popularity of jQuery as an easy-to-use JavaScript library used from any web development platform makes the ability to be used with the upcoming ASP.NET MVC Framework especially attractive.   An article written by James Estes from InfoQ titled jQuery Gaining Traction With 1.2 and jQuery UI covers some details about a recent release and covers many great features.

One reason developers can use third-party libraries like jQuery is because of the designed-in extensibility of ASP.NET MVC.  Using ASP.NET Webforms and using jQuery instead of ASP.NET AJAX was more of a task.

At the time of this writing ASP.NET MVC is in Preview 4 and some of the techniques which work in Preview 4 may not work in earlier previews.  Preview 4 can be downloaded from CodePlex.

Getting Set Up

This is not intended to be a full tutorial on jQuery but just some simple examples of using the JavaScript library with ASP.NET MVC.  A great tutorial by Chad Myers gives us some insight as to how to get started.

1. The first part of the using jQuery with ASP.NET MVC is making sure you have the MVC Framework, so download and install from CodePlex (Note: You need to be running Visual Studio 2008 to run the ASP.NET MVC Framework).
2. After the ASP.NET MVC Framework is installed a new ASP.NET MVC Web Application project should be created.
3. Next, download jQuery, get the Packed or Minified version and place it into the Content folder of the the new web application project. 
4. Add a reference to the jQuery file put in the Content folder.

Simple Example

There was a great article recently by Ryan Lanciaux named jQuery and the ASP.NET MVC Framework which outlines some key factors to using jQuery with the ASP.NET MVC Framework.  Ryan explains the details in his article and breaks them up nicely:

The first thing we’re going to do is create an ASP.NET MVC (Preview 4) Project. Create a new view and controller action under your Home controller and add the following line to the view.

This is red text,
this is blue
and this is green 

Simply right-clicking the Controllers folder from the new MVC project and selecting Add New Item, then choosing MVC Controller class will accomplish the task.  The next part is creating a new Controller Action:

Next, we need to create a Controller Action that returns the color values from a Model. Unfortunately, we don’t want to reload the page or anything like that; we want to do this with Ajax. The nice thing about the MVC Framework is we have a JsonResult type we can use to accomplish this.

public JsonResult RGBColors()
{
    Colors.RGB color = new Colors.RGB();
    return Json(color);
} 

Next, creating a simple class to represent the colors coming from the model:

namespace Colors{
     public class RGB
     {
         public string Red = “#FF0000″;
         public string Green = “#00FF00″;
         public string Blue = “#0000FF”;
     }
} 

And lastly, tie everything together with some jQuery:

$(document).ready(function() {
          $.getJSON(“/Home/RGBColors”,
          {},
          function(data){
              $(“.red”).css(“color”, data.Red);
              $(“.blue”).css(“color”, data.Blue);
              $(“.green”).css(“color”, data.Green);
          });
}); 

Ryan points out an important point:

Notice this jQuery code is calling a JSON method at the location of our controller. Now if we reload our page, it’s getting the color values defined in the model. Pretty painless. It’s pretty simple but there are enormous possibilities when using this technique on the web.

This brief example shows a technique using JSON, a complete application is the Theme Generator Tool, written by Ryan and his brother Joel.  Please note that at the time of this writing Microsoft has released Preview 5 of the ASP.NET MVC Framework.