Question

点击“从购物车中删除”后，javascript正在从数据库中的Cart表中删除产品，但似乎没有正确刷新屏幕上的视图。我在使用AJAX时读到某个地方，我们需要在它返回后控制页面刷新。是这样的吗？我缺少哪些代码来正确刷新页面？

感谢您分享您的意见。

以下是点击“从购物车中删除”后我的输出结果：

 Details of Cart:

 Checkout >>
 -----------

 TV HD Toshiba has been removed from your shopping cart.

 Product         Price(unit) Quantity
 TV HD Toshiba   944.99       1        Remove from Cart   <== this line should be remove ?
 --------------                        ----------------   <== this line should be remove ?       
 Total                                 0                  <== this line should be remove

这是我希望它应该返回

 Details of Cart:

 Checkout >>
 -----------

 TV HD Toshiba has been removed from your shopping cart.

 Product         Price(unit) Quantity

 Total                                 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: '/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);
                 },
                 error: function(XMLHttpRequest, textStatus, errorThrown) { 
                 alert("Status: " + textStatus); alert("Error: " + errorThrown); 
             });
             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", "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>

以下是Google PF12 Network RemoveFromCart。这意味着我认为Javascript成功运行。预览

 {Message:TV HD Toshiba glove has been removed from your shopping cart., CartTotal:0, 
     CartCount:0,..}
 CartCount: 0
 CartTotal: 0
 DeleteId: 31
 ItemCount: 0
 Message: "TV HD Toshiba has been removed from your shopping cart."

响应

  {"Message":"TV HD Toshiba has been removed from your shopping 
         cart.","CartTotal":0,"CartCount":0,"ItemCount":0,"DeleteId":31}

Answer 1

将用于呈现表的逻辑移动到部分剃刀视图，然后使用以下HTML帮助程序调用它。 @ Html.Partial（ “CartTable”）。

更新您的成功ajax处理程序，以对服务器进行另一次ajax调用以检索此部分视图，然后使用结果更新DOM。

     @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') },
                 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);
                    $.get("url").done( function(data){ $("#ContentTable).html(data); } );
                 },
                 error: function(XMLHttpRequest, textStatus, errorThrown) { 
                 alert("Status: " + textStatus); alert("Error: " + errorThrown); 
             });
             return false;
         });
     });
 </script>
 <h3>
    <em>Details</em> du panier:
 </h3>
 <p class="button">
     @Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
 </p>  
 <div id="update-message">
 </div>
 <div id="table-content">
  @Html.Partial("TableContent")
</div>

我们是否需要刷新页面以在AJAX调用后显示正确的信息？

1 个答案: