More Ajax with MVC – Using Partial Views with Ajax

One the the really nice features in asp.net mvc is the ability to use partial views, not only for breaking up pages and reusing content but also for doing Ajax calls.  In Easy Ajax with ASP.NET MVC and jQuery I showed you how to do a basic Ajax call and display the data returned, now I’m going to show you something a little more useful, actually retuning content to display on the page.
First we take this partial view

   1: @using SampleApplication.Models

   2: @model PartialModel

   3:  

   4: <div>

   5:     @Model.Text

   6: </div>

   7: <input type="button" value="click me" onclick="UpdateView();return false;"/>

Then we add it to the main view like this

   1: <div id="UpdateableContent">

   2:     @{ Html.RenderPartial("Partial",new PartialModel{Text = "Before Clicked"}); }

   3: </div>

Next we need to have a Action to call that returns the rendered view with updates

   1: public ActionResult UpdatePartial()

   2: {

   3:     var model = new PartialModel() {Text = "was updated"};

   4:     return View("Partial", model);

   5: }

In this case we update the model and return the specified partial view with the updated model.

Last we have the Javascript that makes the Ajax call

   1: function UpdateView() {

   2:     var model = { };

   3:     $.post("/home/UpdatePartial",

   4:         model,

   5:         function (data) {

   6:             $("#UpdateableContent").html(data);

   7:         });

   8: }

it’s fairly simple and a lot like what we did in the Easy Ajax post, the major difference is we take the returned rendered partial view and replace the existing rendering of the partial view using JQuery’s .html(),  this replaces the existing content with the passed in content.  This is a very simple and effective way to manipulate your pages.

As always here is the source code for a sample project using it

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/