C# 使用jquery刷新部分视图
此局部视图用于列出购物车项目:C# 使用jquery刷新部分视图,c#,jquery,html,ajax,asp.net-mvc,C#,Jquery,Html,Ajax,Asp.net Mvc,此局部视图用于列出购物车项目: <ul class="cart-dropdown"> <li> <div class="cart-items cart-caption"> <ul> @foreach (var i in Model.CartItems) { <li id="list-item-
<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>
控制器:更新
此代码正在成功地从购物车项目列表中删除项目,但未更新部分视图\u cartdails.cshtml。在调试模式下,我检查了从ajax调用返回的数据值,所有值都是正确的。只是这些值与html元素的绑定不起作用。也许我错过了什么。请有人给我引路
提前谢谢 这实际上是一个与系统设计相关的问题。部分视图在页面加载时呈现 当您删除一个项目时,为什么不发布到一个子操作,该子操作将呈现相同的部分视图并返回html。然后您可以将html放在适当的位置。您不需要手动处理列表项、购物车总数、购物车状态等 将[ChildActionOnly]过滤器添加到呈现购物车信息部分的操作中 然后在操作中:返回PartialView\u 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;
}
在成功回调函数时,使用$'yourcartDetailsDiv'。加载''U cartDetails URL';这将使用cart中的最新项目刷新cart details div“\u cartDetails URL”这两者之间是否存在逗号?@MannanBahelim这将导致对从cart中删除的每个项目进行多个ajax调用,一个删除另一个以在删除数据后加载cart UI。想象一下,当服务器处于负载状态时,服务器请求增加了一倍。可能的性能问题。我刚刚用控制器代码更新了我的问题。这就是你的建议吗?是的。将逻辑从cartDropDown函数移动到私有函数,该函数将返回viewModel对象。然后在删除数据后,从cartDropDown和RemoveFromCart操作调用该私有函数。很抱歉,控制器中的cartDropDown没有启动。我在它的开始大括号上设置了一个调试点,同时在浏览器调试器内的MyCart按钮上单击按钮来检查调试器点。浏览器调试器正在向控制器$.post/ShoppingCart/cartDropDown,函数数据{$'.cart skeleton'.replaceWithdata;$'.cart dropdown'.css'display',inline block';};但是这个调用没有到达控制器操作cartDropDown。这是一个非常初始的ajax请求,用于将所有购物车项目加载到部分视图中。此操作现在已停止。将其还原到原始状态后,以下问题已开始:
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);
}
[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;
}