Introduction to jQuery

For the sake of this article, I'm going to assume you're already at least basically familiar with jQuery. My goal here is not to teach how to use jQuery, but rather how jQuery might be used against the new ASP.NET 3.5 MVC Extensions.  For this post, I'm going to work with the Edit In Place tutorial by Jack Born.  Before continuing, please check out that Tutorial, so you can follow what's going on.

jQuery doesn't really lend itself very well to quick blog posts and "how to" spikes on other related topics and I had a hard time figuring out how to keep this short without getting into all the intricacies of jQuery.  So I'm going to show minimal jQuery JavaScript code and stick mostly to what needs to happen at the server side to get Jack Born's Edit In Place tutorial to work with ASP.NET MVC on the back end.

Here's a sample page: Edit In Place with jQuery

It uses this JavaScript include file which is handy for reference:  Edit In Place supporting JavaScript file

Getting Started

Here's what I to get started:

  • Start a new ASP.NET MVC Application project in Visual Studio and started editing the default "Index.aspx" view created in the Views\Home folder of your MVC web application project by default.
  • Downloaded the 1.2.1 minified jQuery javascript file from the jQuery site and put it in the "Content" folder with my CSS file.
  • Added a script reference to the jQuery file:
    <script src="../../Content/jquery-1.2.1.min.js"
    type="text/javascript"></script> 
  • Copied the <div id="editInPlace"> HTML code from the Edit In Place sample page mentioned above and pasted it at the bottom (but within the </asp:Content> tag) in my Index.aspx view.  This is, unfortunately, too long to paste here, but it's pretty straightforward copy/paste. I'm sure you'll figure it out :)
  • Created a <script type="text/javascript"> tag and pasted in all the JavaScript from the supporting JavaScript file mentioned above. Same as above, too much to replicate here, just a straight copy/paste.

Now I have everything in one page and I'm ready to rock and roll.

Pointing jQuery to My MVC Controller and Action

The next thing I did was to edit the JavaScript I just pasted and changed "test2.php" to "/Home/EditInPlace", like this (remember, I never said jQuery was pretty, it's fun to write, hard to read):

Before

var t = $(obj).parent().siblings(0).val();
$.post("test2.php",{ content: t },function(txt){ alert( txt); });

After

var t = $(obj).parent().siblings(0).val();
$.post("/Home/EditInPlace",{ content: t },function(txt){ alert( txt); });

 

This is right out of the tutorial. Nothing much changed except just the URL (from test2.php to /Home/EditInPlace).

Creating the Controller Action

Back on the server side of things, I'm going to add a new action to the HomeController that VS2008 automatically generated for us as part of the project.  This action will retrieve the 'content' variable from the form POST variables and do something with it. Finally, it will return a simple message back to the client (as expected by the jQuery tutorial I'm using). The Tutorial code will simply call alert() on whatever we pass back. So the action code in the controller ends up being something like this:

EDIT UPDATE: ScottGu commented that I can get rid of the Request.Form["content"] stuff and just make "content" a parameter to the method and the MVC framework will automagically wire it up. Cool! Thanks Scott!

[ControllerAction]
public void EditInPlace(string content)
{
    if( ! String.IsNullOrEmpty(content) )
    {
        //TODO: Do something with content. Save to DB? File?

        Response.Write("Success from HomeController!");
    }
}

Trying it out

Next I compile and hit F5 to run the project. I see the standard MVC index screen, but with our Edit In Place HTML with the default Jingle Bells text. When I hover over the text, it highlights yellow:

Then I click, and the text changes to an editable textarea:

After clicking SAVE, jQuery makes an AJAX call back to our action, to which the action replies:

 

Where to go from here?

For an experienced jQuery user, I hope this should be all you need to demonstrate that the ASP.NET MVC framework is jQuery-friendly.  For a novice jQuery user, you should continue reading on the jQuery site. Follow the tutorials and try to understand what it's doing on the client and keep thinking "ASP.NET MVC" whenever the examples say "PHP" or "Ruby" on the server side if you plan on using ASP.NET MVC.

kick it on DotNetKicks.com