我想使用 jquery 部分刷新购物车详细信息页面

Question

单击从购物车中删除后，我缺少一些能够正确更新页面的内容。 实际上，该商品已从购物车表中移除，但仍显示在屏幕上。

在我的 jquery 执行后，我缺少一个刷新部分屏幕的命令。

感谢您的解决方案。

例如。现在的输出

 Cart Summary:

 Payment >>
    ----------

 Baseball Glove item has been removed from your shopping cart.

 Product        Price Quantity
 Baseball Glove 34.99 1            Remove from Cart
                                   ----------------
 Total                             0

例如。我想要的输出

 Cart Summary:

 Payment >>
 ----------

 Baseball Glove item has been removed from your shopping cart.

 Product        Price Quantity

 Total                             0      

Panier 的 Index.cshtml 视图

 @model Tp1WebStore3.ViewModels.ShoppingCartViewModel

 @{
    ViewBag.Title = "Shopping Cart";
 }
 <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(function () {
         $('.RemoveLink').click(function () {
             $.ajax({
                 url: '@Url.Action("RemoveFromCart","Panier")',
                 data: { id: $(this).data('id') },
                 type: 'POST',
                 cache: false,
                 success: function (result) {
                    $('#row-' + result.DeleteId).remove();
                    $('#row-' + result.DeleteId).fadeOut('slow');
                    $('#cart-status').text('Cart (' + result.CartCount + ')');
                    $('#update-message').text(result.Message);
                    $('#cart-total').text(result.CartTotal);
                    $.get('@Url.Action("CartSummary", "Panier")');
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
             alert("Status: " + textStatus); alert("Error: " + errorThrown);
         }
     });
     return false;
    });
 });
 </script>

 <h3>
     <em>Details</em> du panier:
 </h3>
 <p class="button">
     @Html.ActionLink("Paiement >>", "AddressAndPayment", "Checkout")
 </p>  
 <div id="update-message">
 </div>
 <table>
     <tr>
         <th>
             Produit
         </th>
         <th>
             Prix (unitaire)
         </th>
         <th>
             Quantite
         </th>
         <th></th>
     </tr>


     @foreach (var item in Model.CartItems)
     {
         <tr id="row-@item.ProduitId">
             <td>
                 @Html.ActionLink(item.Produit.Description, "Details", "Produit", new { id = 
                        item.ProduitId }, null)
             </td>
             <td>
                 @item.Produit.Prix
             </td>
             <td id="item-count-@item.PanierId">
                 @item.Quantite
             </td>
             <td>
                 <a href="#" class="RemoveLink" data-id="@item.PanierId"> Enlever du panier </a>
             </td>
         </tr>
     }


     <tr>
         <td>
             Total
         </td>
         <td></td>
         <td></td>
         <td id="cart-total">
             @Model.CartTotal
         </td>
     </tr>

 </table>

我已经尝试过 window.location.reload();但这是完全重新加载页面。我想我只需要部分刷新页面。有什么提示吗？

Answer 1

您需要做的是将您的 Product 表（更新消息下的部分）放在部分视图中，并在特定操作中呈现该视图。在主视图中，将表格替换为已识别的 div（例如<div id="products"></div>）
完成 RemoveLink 的 Ajax 调用后，调用该操作并执行该操作，以便刷新 #products div。

url = '@Url.Action("_DisplayProducts", CONTROLLER_NAME)';
        $.get(url, function (data) {
            $("#products").html(data);
        })

---

在 cmets 之后编辑：这是 ajax 调用

url = '@Url.Action("_DisplayProducts", CONTROLLER_NAME)'?cartId=@Model.YOUR_ID;
        $.get(url, function (data) {
            $("#products").html(data);
        })

这是您可以使用的操作

public ActionResult _DisplayProducts(string cartId)
{
ShoppingCartViewModel cart = GetShoppingCart(cartId);
return View("_DisplayProducts", cart);
}