Ajaxで古いモデルを新しいモデルで更新するには？

Question

これまでのところ、カートから製品をリストして削除することができます。削除すると、選択した商品が削除され、Ajaxでカートが更新されます：

$.post("/Cart/RemoveFromCart", { "id": $(this).data('id' }

しかし、ポストバックなしでajaxでページを更新する必要があります。

明確化：Ajaxのdataには、新しい更新カートが含まれています。私はちょっとだけ、ページを更新する必要があります。

$(document).ready(function() { 
     $('.remove-from-cart').click(function() {   

       $.post("/Cart/RemoveFromCart", { "id": $(this).data('id' }, 
        function (data) { 

        // Update the page with new models(data) 

        });     
     }); 
    }); 

これは、コントローラで私のAJAX機能である：ビューで

public List<Products> RemoveFromCart(Guid id) { 

    //remove and update the cart/models 

    return newCartModel; 
    } 

：

@foreach (var item in Model) { 
    <div> 
     <label> 
      @item.Name 
     </label> 

     //....some other property 

     <button class="remove-to-cart" data-id="@item.Id">Remove from cart</button> 
    </div> 
    } 

Answer 1

再びビューにすべてのカートを返す必要はありません。現在のページからクリックしたボタンに関連付けられている項目を削除するだけです。

だけアイテムが正常に削除されたかどうか

[HttpPost] 
public JsonResult RemoveFromCart(Guid id) 
{ 
    // remove and update the cart/models 
    return Json(true); // to indicate sucess 
    // or return Json(null); to indicate something failed 
} 

は次にAJAX成功コールバックでは、成功した場合、DOMから関連する要素を削除するかどうかを示す値を返すRemoveFromCart()方法を変更します。選択を容易にするには、含まれている要素にクラス名を指定します。

@foreach (var item in Model) 
{ 
    <div class="item"> // add class name 
     <label>@item.Name</label> 
     .... 
     <button class="remove-to-cart" data-id="@item.Id">Remove from cart</button> 
    </div> 
} 

$('.remove-from-cart').click(function() { 
    var container = $(this).closest('.item'); // get the 'container'  
    $.post("/Cart/RemoveFromCart", { "id": $(this).data('id' }, function (data) { 
     if (data) { 
      container.remove(); // remove from the DOM 
     } else { 
      // Oops something went wrong - display ad error message? 
     } 
    });     
});