从购物车中删除操作不呈现任何内容

时间:2014-03-05 15:43:53

标签: c# jquery ajax asp.net-mvc

我的Ajax出了问题。当我点击Remove From Cart时,ajax似乎没有呈现任何内容。任何提示?这是我的代码:

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: '/Panier/RemoveFromCart',
                 data: { id: $(this).data('id') },
                 cache: false,
                 success: function (result) {
                     $('#row-' + result.DeleteId).fadeOut('slow');
                     $('#cart-status').text('Cart (' + result.CartCount + ')');
                     $('#update-message').text(result.Message);
                     $('#cart-total').text(result.CartTotal);
                 }
              });
              return false;
          });
     });
  </script>
  <h3>
     <em>Details</em> du panier:
  </h3>
  <p class="button">
      @Html.ActionLink("Checkout >>", "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", "Panier", new { id = 
                    item.ProduitId }, null)
           </td>
           <td>
               @item.Produit.Prix
           </td>
           <td id="item-count-@item.ProduitId">
               @item.Quantite
           </td>
           <td>

              <a href="#" class="RemoveLink" data-id="@item.ProduitId"> Remove From Cart </a>
           </td>
        </tr>
     }
     <tr>
        <td>
           Total
        </td>
        <td></td>
        <td></td>
        <td id="cart-total">
           @Model.CartTotal
        </td>
     </tr>
 </table>

PanierController.cs

    // AJAX: /ShoppingCart/RemoveFromCart/5
    [HttpPost] 
    public ActionResult RemoveFromCart(int id)
    {
        // Remove the item from the cart
        var cart = ShoppingCart.GetCart(this.HttpContext);

        // Get the name of the album to display confirmation
        string produitDescription = dbProduit.Paniers
            .Single(item => item.PanierId == id).Produit.Description;

        // Remove from cart
        int itemCount = cart.RemoveFromCart(id);

        // Display the confirmation message
        var results = new ShoppingCartRemoveViewModel
        {
            Message = Server.HtmlEncode(produitDescription) +
                " has been removed from your shopping cart.",
            CartTotal = cart.GetTotal(),
            CartCount = cart.GetCount(),
            ItemCount = itemCount,
            DeleteId = id
        };
        return Json(results);  

ShoppingCart.cs

    public int RemoveFromCart(int id)
    {
        // Get the cart
        var cartItem = db.Paniers.Single(
            cart => cart.CartId == ShoppingCartId
            && cart.ProduitId == id);

        int itemCount = 0;

        if (cartItem != null)
        {
            if (cartItem.Quantite > 1)
            {
                cartItem.Quantite--;
                itemCount = cartItem.Quantite;
            }
            else
            {
                db.Paniers.Remove(cartItem);
            }
            // Save changes
            db.SaveChanges();
        }
        return itemCount;

以下是网络标签的Chrome输出PF12

enter image description here

1 个答案:

答案 0 :(得分:0)

变化:

 $.ajax({
             url: '/Panier/RemoveFromCart',
             data: { id: $(this).data('id') },
             cache: false,
             success: function (result) {
                 $('#row-' + result.DeleteId).fadeOut('slow');
                 $('#cart-status').text('Cart (' + result.CartCount + ')');
                 $('#update-message').text(result.Message);
                 $('#cart-total').text(result.CartTotal);
             }

要:

 $.ajax({
             url: '/Panier/RemoveFromCart',
             data: { id: $(this).data('id') },
             type: 'POST',
             cache: false,
             success: function (result) {
                 $('#row-' + result.DeleteId).fadeOut('slow');
                 $('#cart-status').text('Cart (' + result.CartCount + ')');
                 $('#update-message').text(result.Message);
                 $('#cart-total').text(result.CartTotal);
             }

另一个选项虽然不推荐,但是从控制器的顶部删除[HttpPost]。这将为您引发其他问题,因为使用ajax发送数据的推荐方法是“POST”