ASP.NET MVC + jQuery = Paradise for AJAX

I have never dealt with any Microsoft AJAX Toolkit before, but recently I had to add cartographic functionality to a project I am leading. We needed to enable users to move the marker around the map, and get our new coordinates on the server. Obviously, for this we will have to use AJAX in some form. Today I will show you how easy it is to use the ASP.NET MVC bundle on the server and jQuery on the client. Since jQuery is now included in the ASP.NET MVC distribution, there is no longer an excuse not to use it.

Take a very simple example. We have a page where I want to display a list of people when I click the “Get people” button and add a new person to the database, enter his name and click “Add person”. Here's what it looks like:

To begin with, we will create a “Get people” button and a list into which we will load people:

< input type ="button" id ="getPeople" value ="Get People" /> < ul id ="people_list" > * This source code was highlighted with Source Code Highlighter .

1. < input type ="button" id ="getPeople" value ="Get People" /> < ul id ="people_list" > * This source code was highlighted with Source Code Highlighter .
2. < input type ="button" id ="getPeople" value ="Get People" /> < ul id ="people_list" > * This source code was highlighted with Source Code Highlighter .

< input type ="button" id ="getPeople" value ="Get People" /> < ul id ="people_list" > * This source code was highlighted with Source Code Highlighter .

Next, we will write the “Page loaded” event handler, which is set by the button click handler.

1. $ ( function () {
2. $ ( "#getPeople" ) .click ( function () {
3. $ .getJSON ( "/ Home / People" , null , getPeople);
4. });
5. });

* This source code was highlighted with Source Code Highlighter .

When the button is pressed, we initialize the request for JSON data from the path / Home / People, which is mapped to the People method of the Home controller.

1. [AcceptVerbs (HttpVerbs.Get)]
2. public ActionResult People ()
3. {
4. var db = new DataClasses1DataContext ();
5. return Json (db.Persons);
6. }

* This source code was highlighted with Source Code Highlighter .

All we are doing here is getting a list of people from the database (using LINQ to SQL) and returning them as JSON. When the response is received by the browser, the getPeople function is called, as we specified in the getJSON method. Here is the getPeople function code:

1. function getPeople (people) {
2. $ ( "#people_list" ) .text ( "" );
3. $ .each (people, function (i) {
4. $ ( "#people_list" ) .append ( "<li>" + this .Name + "</ li>" );
5. });
6. }

* This source code was highlighted with Source Code Highlighter .

The data received from the server comes into it as a parameter people. All we need to do is iterate through the collection and for each of its elements add the <li> tag to our list of people. As you can see, the interaction of ASP.NET MVC and jQuery is implemented very simply - no manual conversion of data from C # objects into JavaScript objects was done.

What about updating the data? No less simple. First we need some HTML code: an input field and a button.

1. < label > Name < input type = "text" id = "name" /> </ label > <br />
2. < input type = "button" id = "addPerson" value = "Add Person" />

* This source code was highlighted with Source Code Highlighter .

And another button click handler.

1. $ ( "#addPerson" ) .click ( function () {
2. var name = $ ( "#name" ) [0] .value;
3. if (name == "" ) {
4. alert ( "You must provide a name" );
5. return ;
6. }
7. var person = {Name: name};
8. $ .post ( "/ Home / People" , person, null , "json" );
9. });

* This source code was highlighted with Source Code Highlighter .

This time we used the useful post function to send our newly created JSON object to / Home / People using the POST method. Since the POST method is used, this request will be caught by our overloaded People method with the AcceptVerbs [HttpVerbs.Post] attribute.

1. [AcceptVerbs (HttpVerbs.Post)]
2. public ActionResult People ( string Name)
3. {
4. var db = new DataClasses1DataContext ();
5. var person = new Person {Name = Name};
6. db.Persons.InsertOnSubmit (person);
7. db.SubmitChanges ();
8. return null ;
9. }

* This source code was highlighted with Source Code Highlighter .

All we have to do on the server to get the data from the request is to call the parameter of this method as well as the field of our JSON object, that is, Name. ASP.NET MVC will automatically find the match and give us the necessary data. If you need to use a complex JSON object, then you can deserialize it using built-in databinding. It remains only to create an object for the database and save it.
')
I later took up Ajax, but with a bunch of ASP.NET MVC + jQuery, adding such functionality is as easy and pleasant as a breath of fresh wind.

You can download demo-solution here: http://static.mikehadlow.com/JQueryAjax.zip

Translation of the article MVC Framework and jQuery = Ajax heaven

Crosspost from my blog