ASP.NET MVC 呈现不需要的多个局部视图答案

【问题标题】：ASP.NET MVC rendering unwanted multiple partial viewsASP.NET MVC 呈现不需要的多个局部视图
【发布时间】：2014-12-14 07:44:28
【问题描述】：

问题背景：

我开发了一个简单的“购物车”系统，其中包含一个表格，其中包含来自关联控制器方法的项目，该方法具有您期望从电子商务购物车获得的所有正常功能，即删除项目、更新所有项目。该功能一切正常，但我遇到了购物车的“更新”部分视图的问题。

问题：

我目前有一个名为 _ViewCartContents.cshtml 的局部视图，它呈现购物车项目表以及“更新购物车”按钮：

<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>

“更新购物车”按钮 _ViewCartContents.cshtml 部分视图的 JQuery 以及对 CartController 上的 UpdateAllCartItems 方法的 Ajax POST 调用。成功发布后，部分视图将被发回以显示表格及其更新的项目数量：

<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);
            }
        });

    });
});

呈现局部视图的主 ViewCartContents.cshtml 视图：

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

购物车控制器方法UpdateAllCartItems：

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

        return PartialView("_ViewCartContents", ViewBag);
    }

如图所示，“ViewCartContents.cshtml”视图按预期呈现，显示了桌子上购物车的内容，还显示了单个“更新购物车”按钮以及“总计”金额 - 对于这个示例，我添加了数量为“1”的单件商品：

当我将商品数量从 1 更改为 2，然后通过单击“更新购物车”按钮更新内容时 局部视图正在创建自己的另一个副本，这显然是我不想要的 新显示的“总计”值显示了购物车内容的正确值。

如果有人能告诉我为什么“更新购物车”和“总计”标题会重新呈现，那就太好了。

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-4 partial-views

【解决方案1】：

您的局部视图呈现和表格以及按钮/总数元素，但您的 ajax 调用仅替换表格的内容，保留原始按钮/总数元素。

将当前元素包装在另一个容器中

<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>

并调整 ajax 成功回调以替换该容器的内容

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

【讨论】：