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

<小时/> 评论后编辑：这是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);
}

我想使用jquery刷新Cart详细信息页面

1 个答案: