title: Ajax and Jquery refresh MVC Model property
body: <p>Good day</p>
  
  <p>I am experiencing a problem with an MVC model property not updating after the Ajax method return s the json. </p>
  
  <p>I am making a ajax call that returns the json from an MVC action result method which updates some data on the page but one particular property below is the ajax call and it seems to work.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(function() {
    //Document.ready -&gt; link up remove event handler
    $(".RemoveLink").click(function() {
      // Get the id from the link
      var productToDelete = $(this).attr("data-id");
      var PostToUrl = $(this).attr("data-url");
      if (productToDelete != '') {
        // PErform the ajax post
        $.post(PostToUrl, {
            "id": productToDelete
          },
          function(data) {
            // Successful requests get here
            // Update the page elements
            if (data.ItemCount == 0) {
              $('#row-' + data.DeleteId).fadeOut('slow');
            } else {
              $('#item-count-' + data.DeleteId).text(data.ItemCount);
  
            }
  
            $('#cart-total').text(data.CartTotal);
            $('#update-message').text(data.Message);
            $('#cart-status').text('Cart (' + data.CartCount + ')');
  
          });
      }
    });
  });
  </code></pre>
  
  
  
  <p>The problem is it updates the #cart-total, the #update-message and deletes the row as it should, but for #item-count it does not change the val after executing that function, it removes the item from the database, but doesn't reflects it on the page, unless I refresh the page itself. I was wondering is there a way that the value could be reflected also. The code for the model binding with the page is below.</p>
  
  <pre><code>&lt;table id="cart-summary"&gt;
  &lt;tr&gt;
      &lt;th&gt;
          Order Code ID
      &lt;/th&gt;
      &lt;th&gt;
          Product Name
      &lt;/th&gt;
      &lt;th&gt;
          Price (each)
      &lt;/th&gt;
      &lt;th&gt;
          Quantity
      &lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
  @foreach (var item in Model.CartItems)
  {
      &lt;tr id="row-@item.OrderCodeID"&gt;
          &lt;td&gt;
             @item.ProductAttribute.OrderCodeID
          &lt;/td&gt;
          &lt;td&gt;
              @Html.ActionLink(item.ProductAttribute.Product.ProductName, "ProductDetails", "Store", new { productId = item.ProductAttribute.ProductID }, null)
          &lt;/td&gt;
          &lt;td&gt;
              @item.ProductAttribute.Product.ProductPrice
          &lt;/td&gt;
          &lt;td id="item-count-@item.Quantity"&gt;
             @item.Quantity
          &lt;/td&gt;
          &lt;td&gt;
              &lt;a href="#" class="RemoveLink" data-id="@item.OrderCodeID" data-url='@Url.Content("~/ShoppingCart/RemoveFromCart")'&gt;Remove from cart&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;tr&gt;
      &lt;td&gt;
          Total
      &lt;/td&gt;
      &lt;td&gt;
      &lt;/td&gt;
      &lt;td&gt;
      &lt;/td&gt;
      &lt;td id="cart-total"&gt;
          @Model.CartTotal
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the RemoveFromCart() action method</p>
  
  <pre><code>// AJAX: /ShoppingCArt/RemoveFromCart/
      [HttpPost]
      public ActionResult RemoveFromCart(int id)
      {
          // Remove the item from the cart
          var cart = ShoppingCart.GetCart(db, this.HttpContext);
  
          // Get the name of the product to display the confirmation
          string productName = db.ShoppingCartItems.Single(item =&gt; item.OrderCodeID == id).ProductAttribute.Product.ProductName;
  
          // Remove from the cart
          int itemCount = cart.RemoveFromCart(id);
  
          db.SaveChanges();
  
          string removed = (itemCount &gt; 0) ? " 1 copy of " : string.Empty;
  
          // Display the confirmation message
          var results = new ShoppingCartRemoveViewModel
          {
              Message = Server.HtmlEncode(productName) + " has been removed from your shopping cart.",
              CartTotal = cart.GetTotal(),
              CartCount = cart.GetCount(),
              ItemCount = itemCount,
              DeleteId = id
          };
  
          return Json(results);
      }
  </code></pre>