Question

我正在努力让这个AJAX代码正常工作。当我运行WebStore时，它会显示一个类别列表，如果我点击了1个类别，我就可以选择一个产品。产品出现，我可以添加到购物车。在它被添加到购物车后，我点击了从购物车中删除，没有什么是令人耳目一新的。我将我的解决方案基于MVC音乐商店，我也读到了旧的解决方案没有为此Ajax部件更新。我找到了这个，我想我错过了一些东西。我注意到一个URL更改localhost：49523 / Panier＃。知道为什么＃有吗？

由于

来自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;

我得到了更多信息。当我使用PF12和网络运行Chrome时，我看到了一个找不到的页面

在我的Panier中，我为CartId获得了这个密钥（新创建的）：dbfac4de-ae5e-4fbf-a44a-f6bb8ee3f2fc

在Chrome中它抱怨这个：？RemoveFromCart ID = dbfac4de-ae5e-4fbf-a44a-f6bb8ee3f2fc和放大器; _ = 1394045298037 /帕尼埃

我不明白密钥的下一部分（连接）＆amp; _ = 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>

和一个恐龙古老的石器时代过时并弃用了Microsoft AJAX脚本：

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

首先从ASP.NET MVC应用程序中移除恐龙旧脚本以及绝对不使用的handleUpdate函数。

然后你可以编写一些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>

此外，您还应该学习如何在Web浏览器中调试AJAX调用。所有现代网络浏览器（如谷歌浏览器）都附带javascript调试工具，可帮助您调试和分析此类问题。因此，请不要犹豫，使用 F12 启动调试工具栏，然后查看Network选项卡。它将为您提供有关浏览器正在进行的所有网络请求（包括AJAX）的有用信息。 Console标签会显示您在代码中可能存在的任何错误。因此，当您单击某个锚点时，不要在StackOverflow上说没有任何反应，下次使用您的javascript调试工具栏来分析在幕后发生的事情。

从购物车中删除的AJax没有做任何事情

1 个答案: