Close this search box.

Updating Partial Views with Unobtrusive AJAX in MVC 3

This is post is meant to be a more straightforward overview of my previous post. The previous post got a little long and turned into a walthrough. If you need a walkthrough of this, check out that post at

So in my new exploration of web development, I found what I assume to be a fairly common need to have part of a view/page update without the entire page updating. In my particular case, I wanted to have a page that listed items but also provided a form that allowed you to add an item. When an item was added, the list of items would be updated without having to regenerate the entire page.

This was eventually accomplised through the unobtrusive AJAX provided through the MVC and jQuery frameworks. Below you can see the Razor page that was used to solve my problem. In this page, we include the jquery.unobtrusive-ajax.min.js and create a form using the AjaxHelper. The Ajax form indicates that it needs to call the action function Index_AddItem, and then update the productList when the form is submitted.  At the bottom, in the productList div, we render the partial view, ProductListControl with the list of products. (ProductIndexViewModel contains a Product and an IEnumerable<Product>. See Rachel Appel’s post for more information on ViewModels in MVC here:

@* Views\Product\Index.cshtml* @@model BoringStore.ViewModels
    .ProductIndexViewModel @ { ViewBag.Title = "Index";
<h2> Index</ h2>

    <script src = "@Url.Content(" ~ / Scripts / jquery.unobtrusive -
                  ajax.min.js ")" type = "text/javascript">
    </ script> @using(Ajax.BeginForm(
        "Index_AddItem", new AjaxOptions { UpdateTargetId = "productList" })) {
      <div> @Html.LabelFor(model => model.NewProduct.Name)
          @Html.EditorFor(model => model.NewProduct.Name) < / div >
      <div> @Html.LabelFor(model => model.NewProduct.Price)
          @Html.EditorFor(model => model.NewProduct.Price) < / div >
      <div><input type = "submit" value = "Add Product" /></ div>

<div id = 'productList'> @ {
    Html.RenderPartial("ProductListControl", Model.Products);

The ProductListControl.cshtml is a very simple partial view that displays all the product names and prices in a table:

@* Views\Product\ProductListControl
    .cshtml* @@model IEnumerable<BoringStore.Models.Product><table>
    <!--Render the table headers.--><tr><th> Name</ th><th> Price</ th></ tr>
    <!--Render the name and price of each product.--> @ foreach (var item in
                                                                     Model) {
      <tr><td> @Html.DisplayFor(model => item.Name) < / td >
      <td> @Html.DisplayFor(model => item.Price) < / td > </ tr>
    }</ table>

The controller has a GET action for the Index and a POST action for adding the item. The Index_AddItem function is what the Ajax form calls when it is submitted. This function returns a partial view, allowing us to avoid regenerating the entire page.

// Controllers\ProductController.cs
namespace BoringStore.Controllers {
  public class ProductController : Controller {
    public ActionResult Index() {
      BoringStoreContext db = new BoringStoreContext();
      ProductIndexViewModel viewModel =
          new ProductIndexViewModel { NewProduct = new Product(),
                                      Products = db.Products };
      return View(viewModel);

    public ActionResult Index_AddItem(ProductIndexViewModel viewModel) {
      BoringStoreContext db = new BoringStoreContext();

      return PartialView("ProductListControl", db.Products);


The unobtrusive Ajax provided by MVC and jQuery looks like it may be useful in many areas in my future web development. I hope this post helps get some people to this solution faster than I got to it.

posted @ Wednesday, August 03, 2011 4:38 PM | Filed Under [ C# ASP.NET MVC Razor ]

This article is part of the GWB Archives. Original Author: Brian Lachniet

Related Posts