此局部视图用于列出购物车项目:
<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 & 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)。在调试模式下,我检查了从ajax调用返回的(data
)的值,并且所有值都是正确的。只是这些值与_cartDetails html元素的绑定不起作用。也许我错过了一些东西。请有人指导。
先谢谢了。
答案 0 :(得分: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;
}