Обновить частичное представление, используя jquery

Question

Этот частичный вид используется для отображения списка товаров в корзине:

<ul class="cart-dropdown">
    <li>
        <div class="cart-items cart-caption">
            <ul>
                @foreach (var i in Model.CartItems)
                {
                    <li id="list-item-@i.item.ItemID">
                        <div class="container-fluid item-wrap" style="position: relative">
                            <div class="item-remove">
                                <a href="#" class="RemoveLink"
                                   data-id="@i.RecordID" data-itemid="@i.item.ItemID">
                                    x
                                </a>
                            </div>
                            <div class="col-md-2 item-img">
                                <div class="row-cart">
                                    <img alt="" id="cartImg" height="71" width="75" src="@i.item.ImageUrl">
                                </div>
                            </div>
                            <div class="col-md-5 item-info">
                                <div class="row-cart">
                                    <div class="brand-name">
                                        <a href="#" class="brandName">
                                            @i.item.BrandName
                                        </a>
                                    </div>
                                    <div class="product-name">
                                        <a href="#" class="productName">
                                            @i.item.ItemName
                                        </a>
                                    </div>
                                    <div class="product-qty">
                                        <p class="productQTY" id="item-count-@i.item.ItemID">
                                            @i.Count x @i.item.ItemPrice
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5 price-info">
                                <div class="row-cart" style="margin-top: 10px">
                                    <div class="col-md-6">
                                        <div class="row-mrp">
                                            <span class="cartItemPrice" id="item-total-@i.item.ItemID">
                                                Rs @(@i.Count * @i.item.ItemPrice)
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                }
            </ul>
        </div>
    </li>
    <li class="clearfix">
        <div class="col-md-6">
            <div class="row-cart sub-cost" style="background: #fff; margin-left: -10px; margin-right: 0">
                <p>
                    Sub Total :
                    <span style="float: right">
                        Rs
                        <span class="ng-binding"></span>
                    </span>
                </p>
                <p>
                    Delivery Charge :
                    <span qa="delChargeMB" style="float: right">Free</span>
                </p>
            </div>
            <div class="row-cart cart-chkout-btn">
                <button type="button">View Basket &amp; Checkout</button>
            </div>
        </div>
    </li>
</ul>    

Приведенный выше частичный вид отображается, когда пользователь нажимает кнопку «Моя корзина».Мне нужно разрешить клиентам удалять любые понравившиеся им элементы корзины, нажав кнопку «удалить» внутри _cartDetails.cshtml.Этот код jQuery используется для выполнения этой задачи:

$(function () {
    $(".RemoveLink").click(function () {
        var recordToDelete = $(this).attr("data-id");
        var itemID = $(this).attr("data-itemid");
        if (recordToDelete != '') {
            $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete, "itemID": itemID },
                function (data) {
                    if (data.ItemCount == 0) {
                        $('#list-item-' + recordToDelete).fadeOut('slow');
                    }
                    else {
                        $('#item-count-' + recordToDelete).text(data.ItemCount + " x " + data.ItemPrice);
                        $('#item-total-' + recordToDelete).text(data.ItemCount * data.ItemPrice);
                    }
                    $('#update-message').text(data.Message);
                    $(".confirmItemCart").show();
                    $(".confirmItemCart").addClass("collapsed");
                    $('.confirmItemCart').delay(30000).fadeOut('slow');
                    $('#cart-status').text('Cart (' + data.CartCount + ')');
                    $('#cart-total').text(data.CartTotal);
                });
        }
    })
});

Контроллер: (ОБНОВЛЕНО)

    public ActionResult cartDropDown()
        {
              return RedirectToAction("cartDropDownChild");
        }

    [ChildActionOnly]
    public ActionResult cartDropDownChild()
    {
        var cart = ShoppingCart.GetCart(this.HttpContext);
        // Set up list of cart items with total value
        var viewModel = new ShoppingCartViewModel
        {
            CartItems = cart.GetCartItems(),
            CartTotal = cart.GetTotal(),
            ItemCount = cart.GetCount(),
            Message = Server.HtmlEncode("There are no items in your cart. Continue shopping.")
        };
        foreach (var item in viewModel.CartItems)
        {
            item.item = db.Items.Single(i => i.ItemID == item.ItemID);
        }
        return PartialView("_cartDetails", viewModel);
    }    

Этот код успешно удаляет товары из корзины.список элементов, но не обновляется частичное представление (_cartDetails.cshtml).В режиме отладки я проверил значения для (data), которые возвращаются из вызова ajax, и все значения верны.Это просто связывание этих значений с html-элементами _cartDetails, которое не работает.Может быть, я что-то упускаю.Кто-нибудь, пожалуйста, руководство.

Заранее спасибо.

Answer 1

На самом деле это проблемы, связанные с проектированием системы.Частичное представление отображается при загрузке страницы.

Когда вы удаляете элемент, почему бы вам не опубликовать дочернее действие, которое отобразит тот же частичный вид и вернет HTML.Тогда вы можете поставить HTML на месте.Вам не нужно обрабатывать элемент списка, общую корзину, статус корзины и т. Д. Вручную.

Добавьте фильтр [ChildActionOnly] к действию, которое отображает раздел с информацией о корзине.

Затем в действии: return PartialView("_cartDetails");

Например:

Переместить логику из функции cartDropDown() в частную функцию, которая будет возвращать объект viewModel.Затем вызовите эту приватную функцию как из cartDropDown(), так и из действия RemoveFromCart (после удаления данных).

[ChildActionOnly]
public ActionResult cartDropDown()
{
    return PartialView("_cartDetails", preparecartDropDown(this.HttpContext));
}

[ChildActionOnly]
public ActionResult RemoveFromCart(...)
{
    //Delete data
    return PartialView("_cartDetails", preparecartDropDown(this.HttpContext));
}

private ShoppingCartViewModel preparecartDropDown(HttpContext context)
{
    var cart = ShoppingCart.GetCart(context);
    var viewModel = new ShoppingCartViewModel
    {
        CartItems = cart.GetCartItems(),
        CartTotal = cart.GetTotal(),
        ItemCount = cart.GetCount(),
        Message = Server.HtmlEncode("There are no items in your cart. Continue shopping.")
    };
    foreach (var item in viewModel.CartItems)
    {
        item.item = db.Items.Single(i => i.ItemID == item.ItemID);
    }

    return viewModel;
}