Question

问题背景：

我开发了一款简单的购物车＆＃39;系统，其中包含一个表格，该表格中填充了来自一个声称控制器方法的项目，该方法具有您希望从电子商务购物车中获得的所有正常功能，即删除项目，更新所有项目。功能全部有效，但我遇到了“更新”问题。推车的局部视图。

问题：

我目前有一个名为_ViewCartContents.cshtml的部分视图，用于呈现购物车商品表以及更新购物车＆＃39;按钮：

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

＆＃39;更新购物车＆＃39;按钮_ViewCartContents.cshtml部分视图的JQuery以及UpdateAllCartItems上CartController方法的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＆＃39;视图按预期呈现，显示桌面上购物车的内容，并显示单个“更新购物车”。按钮以及＆＃39; Total＆＃39;金额 - 在本例中，我将一个项目添加到购物车中，数量为＆＃39; 1＆＃39;：

enter image description here

当我将商品数量从1更改为2，然后点击更新购物车＆＃39;更新内容时按钮部分视图正在创建另一个本身的副本，显然我不想要新显示的＆＃39; Total＆＃39;值显示了购物车内容的正确值。

enter image description here

如果有人能告诉我为什么更新购物车＆＃39;和＆＃39; Total＆＃39;标题是重新渲染，这将是伟大的。

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

ASP.NET MVC渲染不需要的多个部分视图

1 个答案: