Easy Ajax with ASP.NET MVC and Jquery

One of the reasons I love Asp.net MVC and Jquery is it makes client side coding so easy.  Here is a good example.  Lets say I want to have a html select control that updates automatically when it’s changed
First we build a Controller that has an action to output our view and an action to accept posts

   1: [HandleError]

   2: public class HomeController : Controller

   3: {

   4:     public ActionResult Index()

   5:     {

   6:         UserModel userModel = new UserModel(){UserId = 1,Type = UserTypes.User};

   7:  

   8:         return View(userModel);

   9:     }

  10:  

  11:     [AcceptVerbs(WebRequestMethods.Http.Post)]

  12:     public ActionResult UpdateUserType(UpdateUser input)

  13:     {

  14:         var result = new {Succss = true, Message = "Updated"};

  15:         return Json(result);

  16:    }

  17: }

notice UpdateUserType() has the attribute “[AcceptVerbs(WebRequestMethods.Http.Post)]” this forces it to only allows posts, also it takes a complex type, in this case a class of type UpdateUser.
Here is a quick over view of the model objects we are going to be using

   1: public class UserModel

   2: {

   3:     public int UserId { get; set; }

   4:     public UserTypes Type { get; set; }

   5: }

   6:  

   7: public enum UserTypes

   8: {

   9:     User = 1,

  10:     PowerUser = 2,

  11:     Admin = 3

  12: }

  13:  

  14: public class UpdateUser

  15: {

  16:     public int UserId { get; set; }

  17:     public UserTypes Type { get; set; }

  18: }

one of the nice this is that MVC takes care of the mapping and casting for us as you’ll see in a second.
The view is a very simple and strongly typed for the UserModel, first build the select control

   1: <select name="SelectUserType" onchange="UpdateUserType(this,<%=Model.UserId%>)">

   2:     <%foreach (UserTypes item in Enum.GetValues(typeof(UserTypes)).Cast<UserTypes>())

   3:     {

   4:             if(item ==  Model.Type)

   5:             {

   6:                 %><option selected="selected" value="<%=((int)item).ToString() %>"><%=item.ToString() %></option><%

   7:             }

   8:             else

   9:             {

  10:                 %><option value="<%=((int)item).ToString() %>"><%=item.ToString() %></option><%

  11:             }

  12:     } %>

  13: </select>

this loops through the UserTypes Enum to populate the select control and selects the value that’s selected in the view Model and we add an onchange that points to a javascript function that we pass the control and the UserId from the model into.
Next we add the javascript function(fyi this requires Jquery)

   1: <script type="text/javascript">

   2:     function UpdateUserType(sender, userId) {

   3:         var model = { UserId: userId, Type: sender.value };

   4:         $.post("/home/UpdateUserType",

   5:             model,

   6:            function (data) {

   7:  

   8:                alert("Was Successful: " + data.Succss);

   9:                alert("Message: " + data.Message);

  10:            });

  11:     }

  12: </script>

First we build a JSON object where the property names need to match the properly names in UpdateUser, Asp.net MVC needs this for mapping, and then we use Jquery $.post passing in the action URL, the JSON object we just built, and a javascript function to handle the returned data and your done.

A quick and easy way to add Ajax to any control and as always here is a link to the demo project http://bob-the-janitor-sample-code.googlecode.com/svn/trunk/ajaxMadeEasy/