Skip to content
Article

ASP.NET MVC: Using Ajax, Json and PartialViews

While working on a new ASP.NET MVC project, I had a simple objective: add a new record and refresh my View. After sifting through several sites I found several resources that lead me to accomplish my goal.

I’ve compiled my result into a new sample MVC Application that I created in Visual Studio. I’ll explain what I did using that as my reference. It’s a trimmed down version of what I did on the actual project, but it will get the point across.

Let’s assume we want to have a View that lists some People from our data source. I started out by creating a Person data model:

public class Person { public Guid Id { get; set; } public String FirstName { get; set; } public String LastName { get; set; } public Person() { Id = Guid.NewGuid(); } }

Next, I created some ViewModels so that I can work with strongly typed Views:

public class PersonIndexViewModel { public PersonListViewModel PersonListModel { get; set; } public AddPersonViewModel AddPersonModel { get; set; } } public class PersonListViewModel { public List PersonList { get; set; } } public class AddPersonViewModel { public String FirstName { get; set; } public String LastName { get; set; } }

Next, I added a People folder in my Views folder and created a strongly typed Index View on my PersonIndexViewModel. I started out with building a table and doing a foreach to display each Person object. I moved that into a PartialView (.ascx) by creating a ParitialView in my Views/Shared folder (This blog post is very helpful for showing you how to use PartialViews). I called that PersonList.ascx and that is a strongly typed partial view on my PersonListViewModel.

Now, I can update my View to display that PartialView with this code:

<% Html.RenderPartial(“PersonList”, Model.PersonListModel); %>

Next, I want to be able to perform a delete action to remove a Person from the DB. You’ll notice I’m using an Ajax.ActionLink in my PersonList PartialView so that I can perform the delete with Ajax.

<%= Ajax.ActionLink(“delete”, “JsonDelete”, “People”, new { Id = person.Id }, new AjaxOptions { Confirm = “Are you sure you want to Delete this Person? This action cannot be undone.”, HttpMethod = “Delete”, OnComplete = “JsonDelete_OnComplete” })%>

In the ActionLink, I specify the Action I want to call, pass the Person.Id and in the AjaxOptions I defined a JavaScript method that should be called on complete. In my People Controller I can now add the JsonDelete method:

[AcceptVerbs(HttpVerbs.Delete)] public JsonResult JsonDelete(Guid Id) { // call your Repository to delete the Person bool result = _personList.Remove(toDelete); // return a Json Object, you could define a new class return Json(new { Success = result, Message = result ? “The person has been deleted!” : “Error!” }); }

You would call your Repository to delete that Person and then return a new Json Object. What I did was define a couple of properties that I will reference from the JavaScript function to give feedback to the user. Here is the JavaScript function:

function JsonDelete_OnComplete(context) { var JsonDelete = context.get_response().get_object(); if (JsonDelete.Success) { $(this).parents(‘tr.item’).remove(); } $(“#message”).html(JsonDelete.Message); }

I found this link that showed me how to use “context.get_response().get_object();” to get the Json Object in JavaScript.

Now that I can delete, the next logical step would be the ability to add a new Person. I’ll start out by creating a new form that uses my AddPersonViewModel Model:

<% using (Ajax.BeginForm(“JsonAdd”, “People”, new AjaxOptions { OnComplete = “JsonAdd_OnComplete” })) {%> <fieldset> <legend>Add a Person</legend> <%= Html.LabelFor(model => model.AddPersonModel.FirstName)%>: <%= Html.TextBoxFor(model => model.AddPersonModel.FirstName, new { @class = “firstname” })%> <%= Html.ValidationMessageFor(model => model.AddPersonModel.FirstName)%> <%= Html.LabelFor(model => model.AddPersonModel.LastName)%>: <%= Html.TextBoxFor(model => model.AddPersonModel.LastName, new { @class = “lastname” })%> <%= Html.ValidationMessageFor(model => model.AddPersonModel.LastName)%> <input id=”AddBtn” name=”AddBtn” type=”submit” value=”Add” /> </fieldset> <% } %>

Again, I use the Ajax.BeginForm to set the Action to call and define a JavaScript function to call on complete. To my Controller I add:

public JsonResult JsonAdd(AddPersonViewModel AddPersonModel) { … Person newPerson = new Person { FirstName = AddPersonModel.FirstName, LastName = AddPersonModel.LastName }; // call your Repository to add the new Person _personList.Add(newPerson); // return a Json Object, you could define a new class return Json(new { Success = true, Message = “The person has been added!”, PartialViewHtml = RenderPartialViewToString(“PersonList”, new PersonListViewModel {PersonList = _personList}) }); }

One important thing here is the method “RenderPartialViewToString”. I ran across this which was a tremendous resource in solving my problem here, which was returning a Json Object with a rendered PartialView so that I could use JavaScript/jQuery to update the page.

The post I referenced above showed where you needed to create a base Controller to inherit from and that Controller defines the methods which will return a PartialView as an HTML string:

public abstract class BaseController : Controller { protected string RenderPartialViewToString() { return RenderPartialViewToString(null, null); } protected string RenderPartialViewToString(string viewName) { return RenderPartialViewToString(viewName, null); } protected string RenderPartialViewToString(object model) { return RenderPartialViewToString(null, model); } protected string RenderPartialViewToString(string viewName, object model) { if (string.IsNullOrEmpty(viewName)) viewName = ControllerContext.RouteData.GetRequiredString(“action”); ViewData.Model = model; using (StringWriter sw = new StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); viewResult.View.Render(viewContext, sw); return sw.GetStringBuilder().ToString(); } } }

Now with my JavaScript function is called, I can again reference my Json Object and then update the page:

function JsonAdd_OnComplete(context) { var JsonAdd = context.get_response().get_object(); if (JsonAdd.Success) { $(“#PersonList”).html(JsonAdd.PartialViewHtml); } $(“#message”).html(JsonAdd.Message); }

With this line:

$(“#PersonList”).html(JsonAdd.PartialViewHtml);

I have a div tag that surrounds my Html.RenderPartial call and I can use jQuery to just replace the HTML. Remember JsonAdd.PartialViewHtml contains the entire HTML of the newly rendered PartialView that we called from the Controller:

return Json(new { Success = true, Message = “The person has been added!”, PartialViewHtml = RenderPartialViewToString(“PersonList”, new PersonListViewModel {PersonList = _personList}) });

That just about sums it up how to use Ajax, jQuery, Json, and PartialViews in an effective manor in an ASP.NET MVC application.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like .NET, PHP, JavaScript, or Ruby).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More about What is PHP web development?
What is the best way to become a web developer?
We get lots of questions from university students working on projects -- How do I get into web development? How long does it take to learn? How much do web developers make?
Learn More about What is the best way to become a web developer?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
What is full stack web development?
Full stack web development as a term evolved due to the separation of roles between front end and back end developers. A “full stack” developer is a developer that can work in both front end and back end technologies.
Learn More about What is full stack web development?