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

Question

单击“从购物车中删除”后，javascript 正在从数据库中的购物车表中删除产品，但似乎无法正确刷新屏幕上的视图。我在某处读到，当我们使用 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                 

索引.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>