ASP.NET MVC呈现不必要的多个局部视图

Question

Question Background:

I've developed a simple 'cart' system that features a table populated with items from an assosicated controller method which has all the normal functionality you would expect from an eCommerce cart ie remove an item, update all items. The functionality all works but I'm having issues with the 'Update' partial views of the cart.

The Issue:

I currently have a partial view named _ViewCartContents.cshtml which renders the cart items table along with an 'Update Cart' button:

<table id="Table1" cellspacing="3">
 <tr>
    <td style="display:none;">id</td>
    <td></td>
    <td><b>Item</b></td>
    <td><b>Brand</b></td>
    <td><b>Unit Price</b></td>
    <td><b>Quantity</b></td>
    <td></td>
 </tr>
</table>
<br />
<input class="btn btn-success btn-block updateCart" type="button" value="Update Cart" />
  <div class="row">
    <h2>Total: £@ViewBag.Total</h2>
 </div>

'Update Cart' button JQuery of the _ViewCartContents.cshtml partial view along with the Ajax POST call to the UpdateAllCartItems method on the CartController . Upon a successful post, the partial view is sent back to show the table with its updated item quantity's:

<script type="text/javascript">

$(".updateCart").click(function () {

    $("tr.item").each(function () {

        var $prodId = $(this).find("td.prodId").html();
        var $prodQty = $(this).find("input").val();

        $.ajax({
            url: '@Url.Action("UpdateAllCartItems")',
            type: 'POST',
            data: {
                "id": $prodId,
                "qty": $prodQty
            },
            success: function (partialView) {
                $('#Table1').html(partialView);
            }
        });

    });
});

The main ViewCartContents.cshtml view that renders the partial view:

<div class="container">
@Html.Partial("_ViewCartContents")
@Html.ActionLink("Proceed To Checkout", "ShippingDetails", "Checkout")

Cart Controller method UpdateAllCartItems :

public ActionResult UpdateAllCartItems(string id, string qty)
    {
        \\Logic for updating cart

        return PartialView("_ViewCartContents", ViewBag);
    }

As shown the 'ViewCartContents.cshtml' view renders as expected showing the contents of the cart on the table and also displaying the single 'Update Cart' button along with a 'Total' amount - for this example I added a single item to the cart with a quantity of '1':

When I change the item quantity from 1 to 2 and then update the contents by clicking on the 'Update Cart' button the partial view is creating yet another copy of itself which obviously I don't want The newly displayed 'Total' value is showing the correct value of the cart content though.

If anyone could tell me why the 'Update Cart' and 'Total' heading is re-rendering that would be great.

Answer 1

Your partial view renders and table and the button/total elements, yet you ajax call only replaces the contents of the table, leaving the original button/total elements.

Wrap the current elements in another container

<div id="container">
  <table cellspacing="3">
    <tr>
      <td style="display:none;">id</td>
      ....
    </tr>
  </table>
  <br />
  <input class="btn btn-success btn-block updateCart" type="button" value="Update Cart" />
  ....
</div>

and adjust the ajax success call back to replace the contents of that container

....
success: function (partialView) {
  $('#container').html(partialView);
}