购物车为 0 时不显示结帐按钮

Question

我不想在购物车为 0 时显示结帐按钮。

我添加了这一行，但在 Ajax 运行时它不起作用。我在购物车中添加了 1 个产品， 我删除了它。结帐按钮出现。当购物车为 0 或为空时，我不希望看到结帐。谢谢

索引.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")');
                     $('#content').html(result);
                 },
                 error: function(XMLHttpRequest, textStatus, errorThrown) {
                 alert("Status: " + textStatus); alert("Error: " + errorThrown);
             }
             });
             return false;
         });

     });
 </script>

 <h3>
     <em>Visualisation </em> du panier:
 </h3>


 @if (Model.CartTotal != 0)    <== I added this line
 {
      <p class="button">
          @Html.ActionLink("Paiement >>", "AddressAndPayment", "Checkout")
      </p>  
 }

 <div id="update-message">
 </div>

 <div id="content">
     <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>
 </div>

PanierController.cs

    public ActionResult CartSummary()
    {
        var cart = ShoppingCart.GetCart(this.HttpContext);

        ViewData["CartCount"] = cart.GetCount();

        return PartialView("CartSummary");
    }

CartSummary.cshtml

 @Html.ActionLink("Panier(" + ViewData["CartCount"] + ")", "Index","Panier", new { id = "cart-
  status" })

现在的购物车输出

 Cart:

 Checkout >>
 -----------

 Product ABC has been remove from your shopping cart.

购物车的输出应该是这样的

 Cart:

 Product ABC has been remove from your shopping cart.

Answer 1

一个建议可能是：

                 $('#cart-status').text('Cart (' + result.CartCount + ')');
                 $('#cart-status').attr('data-cart-count', result.CartCount);

在css中：

    #cart-status[data-cart-count="0"]
    {
    display:none;
    }

或者当 result.CartCount 为零时，您的 javascript 中可能有条件不输出 Cart () 文本：

   if (result.CartCount > 0) {
     $('#cart-status').text('Cart (' + result.CartCount + ')');
   }

Answer 2

可悲的是，这是一个非常普遍的混淆。您的问题在于理解服务器 - 客户端关系。 ASP.NET 处理发生在服务器端，而 JavaScript 处理发生在客户端。这是该过程中完全独立的两个阶段，因此您无法使用 Razor 服务器端测试购物车是否为空，如果它实际上不是空的，直到您通过 AJAX 客户端删除某些内容-侧面。

那么解决办法就是用JS检查购物车是否为空，然后用JS移除或隐藏按钮。