Question

当购物车为0时，我不想显示CHECKOUT按钮。

我添加了这一行，但是当Ajax运行时它无效。我在购物车中添加了1个产品，我删除了它。结帐按钮显示。当购物车为0或空时，我不希望看到结帐。感谢

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")');
                     $('#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;
    }

或者你的javascript中的条件可能在result.CartCount为零时不输出Cart（）文本：

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

Answer 2

遗憾的是这是一个非常常见的混乱。您的问题在于理解服务器 - 客户端关系。 ASP.NET处理发生在服务器端，而JavaScript处理发生在客户端。这是这个过程中两个完全独立的阶段，所以你不能用Razor 服务器端来测试购物车是否为空，如果它在你通过AJAX 客户端删除之前实际上并不是空的 - 侧

然后，解决方案是使用JS检查购物车是否为空，并使用JS删除或隐藏按钮。

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

2 个答案: