This is a guest post by Ryan Lanciaux.

Hi my name is Ryan Lanciaux. I want the thank the guys at Dev102 for giving me the opportunity to write about a topic I find very interesting — jQuery and the ASP.NET MVC Framework.

With WebForms, integrating with Ajax libraries other than ASP.NET AJAX was slightly painful. With the new ASP.NET MVC Framework, however, you can use jQuery without these additional headaches. We’re going to take a quick look at how the Frickinsweet.com Theme Generator uses some of the built in ASP.NET MVC utilities combined w/ jQuery to give the user an update with out reloading the page. The example we’re going to look at is a little simplified but the concepts are still there.

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.

<span class="red">This is red text,</span> 
<span class="blue">this is blue</span>
<span class="green">and this is green</span> 

If we render out the page how it currently stands it looks like boring text; we’ll have to do something about that. 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);
} 

Where our model Colors.RGB (this is just for the sake of example, you would not normally want to write your class like this):

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

Finally, we’ll want to write some jQuery code to tie everything together.

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

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.

Hopefully this example has been helpful. To see a full application using JSON and the ASP.NET MVC Framework visit our Theme Generator Tool at http://www.frickinsweet.com/tools Please let me know of any questions or comments that you might have.

Ryan Lanciaux is a Professional Software Developer in Ohio, USA. Although he programs in several languages, his current area of focus is in C# and VB.NET. Ryan has developed many large scale web applications since the late 1990s. He regularly contributes to the programming community through his website.

Tags :

5 Responses to “jQuery and the ASP.NET MVC Framework”


  1. EtienneT

    Said on August 21, 2008 :

    “With WebForms, integrating with Ajax libraries other than ASP.NET AJAX was slightly painful. With the new ASP.NET MVC Framework, however, you can use jQuery without these additional headaches.”

    I don’t see why this would be easier in MVC than in WebForms.

    We have been using jQuery with webforms for quite some times without any problems or headaches :). If you set css classes to the elements you want easy access to with jQuery, then it’s exactly the same thing.

    You could implement something even more powerful with the css function of jQuery:

    $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });

    So imagine passing an array of css class containing css properties. You could redefine your entire theme like that.

  2. Ryan Lanciaux

    Said on August 22, 2008 :

    Etienne, I agree that there are powerful things you can do w/ ASP.NET and jQuery, however, I guess I was pretty vague in regard to the headaches. How would you go about returning a class as JSON in webforms?

    I like the simplicity that is provided by default in the MVC framework. It’s not very difficult to serialize a class into JSON but it’s one extra step I don’t have to worry about.

    In regard to the more-powerful example that is somewhat similar to what the full theme generator application is doing. :)

    Regards!

3 Trackback(s)

  1. Aug 22, 2008: 2008 August 22 - Links for today « My (almost) Daily Links
  2. Mar 24, 2009: Creating an Ajax Login Form With jQuery | Dev102.com
  3. Aug 14, 2011: Are you a Control Freak? | Ryan Lanciaux

Post a Comment