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

无需再将所有购物车商品返回视图。您需要做的就是删除与您从当前页面单击的按钮关联的项目。

修改RemoveFromCart()方法，只返回一个值，指示项目是否已成功删除

[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中删除关联的元素。要使选择更容易，请为包含元素指定类名

@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?
        }
    });                
});

如何用Ajax用新模型更新旧模型？

1 个答案: