BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Using jQuery with ASP.NET MVC

Using jQuery with ASP.NET MVC

This item in japanese

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Power and flexibility makes it...huh?

    by Francois Ward,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    The power and flexibility of ASP.NET MVC allows for developers to use libraries other than those include in the box


    Have it upside down here. If I make an average everyday app in WebForm, I can use any library I want. It only becomes problematic if I tap into the full power of WebForms and develop a composite application, in which cases components aren't aware of each other, their context, etc, and it becomes trickier (though not impossible) to use a library thats not made with that in mind.



    The only thing that helps ASP.NET MVC when it comes to JQuery or others, is the fact that you're extremely unlikely to use application compositing in that context, so it becomes a more obvious fit.

  • Re: Power and flexibility makes it...huh?

    by Ben Scheirman,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I'm not sure what you are trying to say here.

    With WebForms there were plenty of difficulties with javascript/ajax integration with other frameworks out there.

    Now, with ASP.NET MVC we have much simpler, cleaner model to work with where we are in control of IDs, we can define server actions that return JSON results or Partial HTML, and the HTML that we're working with is our own (not generated).

    jQuery is a joy to work with, and with ASP.NET MVC we no longer have any friction in using it.

  • Re: Power and flexibility makes it...huh?

    by Francois Ward,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I'm trying to say that the only thing that causes issues with WebForm is the way IDs change, and that only happens because of the composite nature of WebForms. If you don't use the composition features of WebForms (and thus your IDs will not get mangled), the only "friction" is that you need to use the ClientScriptManager to add scripts that may affect postbacks (and that is still coming from application composition).



    ASP.NET MVC doesn't have very powerful composition features, so you cannot end up in a situation where ajax framework integration requires said composition, which makes it simpler. In other words, it works better because there's less features getting in your way (and I'm not saying its a bad thing), not because there's MORE (which talking about ASP.NET MVC's power and flexibility seems to imply).



    Thats like saying ASHX (bare bone http handlers) are more powerful and flexible than ASP.NET MVC's views because they literally do absolutely nothing (but hey, will be really easy to integrate them with ajax library XYZ! You're in total control!).



    Still, take a WebForm, don't use controls, don't use master pages, etc etc, and the ajax librairies work fine out of the box. Its still very easy to make them work without having to sacrefice all that though.

  • Re: Power and flexibility makes it...huh?

    by Robert Bazinet,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    The idea here is ASP.NET MVC is NOT an end-all solution to WebForms nor is it a replacement. One point I am trying to make about MVC framework is its extensibility allowing me to have various points I can choose to use something different.

    The example here shows how easy it is just to implement jQuery but in the big picture I can change my view engine and use NHaml, Brail, NVelocity or whatever I want. The team has done a good job of allowing this type of choice to be made and I am sure other places will allow the same.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT