從購物車中刪除操作沒有渲染任何東西

Question

我的Ajax出了問題。當我點擊從購物車中刪除時，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的網絡選項卡

Answer 1

變化：

$.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'