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

在我单击Remove from Cart之后，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

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>

回应

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

---

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

更新success 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>

@model Tp1WebStore3.ViewModels.ShoppingCartViewModel
@{
ViewBag.Title=“购物车”；
}
$（函数（）{
$（'.RemoveLink'）。单击（函数（）{
$.ajax({
url:“/Panier/RemoveFromCart”，
数据：{id:$（this）.data（'id'）}，
键入：“POST”，
cache:false，
成功：功能（结果）{
$（“#行-”+result.DeleteId）.fadeOut（'slow'）；
$（“#购物车状态”）.text（'cart（'+result.CartCount+'）；
$（“#更新消息”）.text（result.message）；
$（“#购物车总数”）.text（result.cartotal）；
$.get（“url”）.done（函数（数据）{$（“#ContentTable）.html（数据）；}）；
},
错误：函数（XMLHttpRequest、textStatus、ErrorSprown）{
警报（“状态：+textStatus”）；警报（“错误：+ERRORSHORN”）；
});
返回false；
});
});
帕尼尔详细信息：

@ActionLink（“签出>>”、“地址和付款”、“签出”）

@Html.Partial（“TableContent”）

您不需要刷新整个页面，这将首先挫败使用AJAX的全部意义。您应该做的是在

success

处理程序中操作Javascript中的DOM，以便AJAX调用更改或删除任何现在过时的元素。@MattBurland感谢您的回答，您能举一个例子来说明m吗e来了解缺失的内容。我查看了MVC音乐商店，我的AJAX似乎完全相同，我想我缺失了从屏幕上删除行的部分，但我找不到缺失的部分。有什么想法吗？没有呈现的HTML很难看到，但在

中，您需要识别已删除的行（看起来您的响应中包含了

DeleteId

，希望它能以某种方式映射到特定的行，大概是

id=“row-31”

）然后用

$（“#row-31”）之类的东西简单地从表中删除它。remove（）

我试图在.fadeout（'slow'）=>$（“#行-”+result.DeleteId）.remove（）；但它没有改变任何内容。表示该行仍在屏幕上，它没有刷新。您能告诉我需要哪些代码来诊断问题吗？当我在ActionResult RemoveFromCart右键单击add View（添加视图）时，我们是否应该选择create a stronly typed View（创建仅键入的视图）？当我使用部分视图时，我仅有的一行代码是@model（模型）Tp1WebStore3.Models.Panier，你能给我提供更多的输入吗？$.get（“url”）.done（函数（数据）{$（“#TableContent”）.html（数据）；}）有错误404没有找到，知道吗？根据我的div id=“table content”>我尝试了这个，没有错误，但没有成功刷新页面（即删除的行仍然出现在页面$.get（“/Panier”）.done（函数（数据）{$（“#TableContent”）.html（数据）；）中）；创建一个新的控制器操作，比如TableView。在该操作中也应该返回类似于部分（#TableContent）。更改“URL”“在js函数中匹配控制器操作。控制器操作是否正在更新模型？

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

     @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>