從購物車中刪除的AJAX沒有做任何事情

Question

我試圖讓這個AJAX代碼工作。當我運行WebStore時，它會顯示一個類別列表，如果我點擊了1個類別，則可以選擇一個產品。該產品出現，我可以添加到購物車。在它被添加到購物車後，我點擊了從購物車中刪除，沒有什麼是令人耳目一新的。我將我的解決方案基於MVC音樂商店，並且我還閱讀了針對此Ajax部分未更新的舊解決方案。我找到了這個，我想我錯過了一些東西。 我注意到URL更改localhost：49523/Panier＃。任何想法爲什麼一個＃在那裏？

感謝

從帕尼埃index.cshtml

@model Tp1WebStore3.ViewModels.ShoppingCartViewModel 

@{ 
    ViewBag.Title = "Shopping Cart"; 
} 
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    function handleUpdate(context) { 
     // Load and deserialize the returned JSON data 
     var json = context.get_data(); 
     var data = Sys.Serialization.JavaScriptSerializer.deserialize(json); 

     // Update the page elements 
     $('#row-' + data.DeleteId).fadeOut('slow'); 
     $('#cart-status').text('Cart (' + data.CartCount + ')'); 
     $('#update-message').text(data.Message); 
     $('#cart-total').text(data.CartTotal); 
    } 
</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); 

修改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> 

我也加入 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和網絡，我看到了一個找不到網頁

在我帕尼埃我得到了CartId此鍵（新建）：dbfac4de-ae5e-4fbf-a44a-f6bb8ee3f2fc

在Chrome中它抱怨這一點：？ RemoveFromCart ID = dbfac4de-ae5e-4fbf-a44a-f6bb8ee3f2fc & _ = 1394045298037 /帕尼埃

我不明白的鍵（連接）的下一部分& _ = 1394045298037 我ProduitId是這樣定義的：3

任何人都可以向我解釋這個嗎？

Answer 1

你有一個刪除錨點：

<a href="#" class="RemoveLink" data-id="@item.ProduitId">Remove from Cart </a> 

和一些JavaScript handleUpdate函數，它是絕對不會叫：

<script type="text/javascript"> 
    function handleUpdate(context) { 
     // Load and deserialize the returned JSON data 
     var json = context.get_data(); 
     var data = Sys.Serialization.JavaScriptSerializer.deserialize(json); 

     // Update the page elements 
     $('#row-' + data.DeleteId).fadeOut('slow'); 
     $('#cart-status').text('Cart (' + data.CartCount + ')'); 
     $('#update-message').text(data.Message); 
     $('#cart-total').text(data.CartTotal); 
    } 
</script> 

也似乎使用jQuery的一個非常過時的版本：

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 

和一個恐龍舊，石器時代過時和不贊成d微軟AJAX腳本：

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

所以從你的ASP.NET MVC應用程序，以及這是絕對沒有使用過handleUpdate功能刪除的dinosaurly舊腳本啓動。

然後，你可以寫一些jQuery的AJAX功能，將訂閱您的錨的Click事件，並執行一個AJAX請求：

<script type="text/javascript"> 
    $(function() { 
     $('.RemoveLink').click(function() { 
      $.ajax({ 
       url: '/ShoppingCart/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> 

你也應該學會如何調試AJAX Web瀏覽器中調用。所有現代Web瀏覽器（如Google Chrome）都附帶有JavaScript調試工具，可幫助您調試和分析此類問題。所以，請不要猶豫，使用F12來激活您的調試工具欄，然後查看Network選項卡。它將爲您提供有關瀏覽器正在製作的所有網絡請求（包括AJAX）的有用信息。 Console標籤會顯示您在代碼中可能遇到的任何可能的javascript錯誤。因此，不要在StackOverflow上說當你點擊某個錨時沒有任何反應，下次使用你的javascript調試工具欄來分析下面發生的事情。