前台显示:
<asp:Repeater ID="rptFoodKindList" runat="server" OnItemDataBound="rptFoodKindList_OnItemDataBound"> <ItemTemplate> <div class="Cp_fl"> <%#Eval("CategoryTwoName") %><asp:HiddenField ID="hidCategoryTwoID" Value='<%#Eval("CategoryTwoID") %>' runat="server" /> </div> <asp:Repeater ID="rptFoodList" runat="server" OnItemDataBound="rptFoodList_OnItemDataBound"> <ItemTemplate> <div class="CP_con"> <ul> <li class="CP_xh"><span id="spIndex" runat="server"></span></li> <li class="CP_name"><span id="spProName"> <%#Eval("ProductName") %></span></li> <li class="CP_jg">¥<%#decimal.Parse(Eval("Price").ToString()).ToString("f2") %></li> <li class="CP_fs">(已选<span id="spCount">0</span>份)<asp:HiddenField ID="hidProductID" runat="server" Value='<%#Eval("ProductID") %>' /> </li> </ul> <div class="CP_mx" style="display: none;"> <div class="img"> <img src="../ProductImg/160x120/201403011616.png" /> <a href="#">点击查看大图</a> </div> <div class="right"> <div class="R_name"> 菜名:<%#Eval("ProductName") %> </div> <div class="R_dj"> 单价:<span id="spPrice" runat="server">¥<%#decimal.Parse(Eval("Price").ToString()).ToString("f2") %></span> 元/份</div> <div class="R_numer"> <span>订购数量:</span><a id="aRed" class="Redu1" runat="server"></a><input id="txtBuyNum" type="text" value="1" runat="server" /><a class="Add1" id="aAdd" runat="server"></a></div> <div class="R_but"> <a class="Add_CD" id="aAddTo" runat="server">加到我的餐饮盒</a><a class="Redu_CD">取消</a></div> </div> </div> </div> </ItemTemplate> </asp:Repeater> </ItemTemplate> </asp:Repeater>
后台处理:
/// <summary> /// 菜谱分类列表绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void rptFoodKindList_OnItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Repeater rptFoodList = e.Item.FindControl("rptFoodList") as Repeater; HiddenField hidCategoryTwoID = e.Item.FindControl("hidCategoryTwoID") as HiddenField; rptFoodList.DataSource = HSSM_Public_DB.PblicQuery("ProductID,ProductName,Price", "Product", "CategoryTwoID = " + hidCategoryTwoID.Value); rptFoodList.DataBind(); foreach (RepeaterItem item in rptFoodList.Items) { HtmlInputText txtBuyNum = item.FindControl("txtBuyNum") as HtmlInputText; HtmlGenericControl spPrice = item.FindControl("spPrice") as HtmlGenericControl; HtmlGenericControl spIndex = item.FindControl("spIndex") as HtmlGenericControl; string Price = spPrice.InnerText.Replace("¥", ""); spIndex.InnerText = item.ItemIndex+1+"."; //Sum += decimal.Parse(txtBuyNum.Value) * decimal.Parse(Price); //liSum.InnerText = Sum.ToString("¥0.00"); HtmlAnchor aAdd = item.FindControl("aAdd") as HtmlAnchor; HtmlAnchor aRed = item.FindControl("aRed") as HtmlAnchor; HtmlAnchor aAddTo = item.FindControl("aAddTo") as HtmlAnchor; HiddenField hidProductID = item.FindControl("hidProductID") as HiddenField; aAdd.Attributes.Add("onclick", string.Format("UpdateProductNum(this,1,{0})", Price)); aRed.Attributes.Add("onclick", string.Format("UpdateProductNum(this,2,{0})", Price)); aAddTo.Attributes.Add("onclick", string.Format("AddProductNum(this,{0},{1},{2})", Price, hidProductID.Value, proIndex)); proIndex++; } } }
前台添加商品到我的餐饮盒的脚本:
//添加我的餐饮盒产品数量 function AddProductNum(btn, price, proid, index) { var text = $(btn).parent().parent().find(":text"); var count = $(".CP_fs>span")[index]; var proname = $(".CP_name>span")[index]; var spCount = $(btn).parent().parent().parent().parent().find(count); var spProName = $(btn).parent().parent().parent().parent().find(proname); spCount.html(text.val()); $("#liSum").html("¥" + (parseFloat($("#liSum").html().replace("¥", "")) + price * text.val()) + ".00"); $("#hidProID").val($("#hidProID").val() + "," + proid); $("#hidFoodCount").val($("#hidFoodCount").val() + "," + text.val()); $("#hidProInfo").val($("#hidProInfo").val() + "," + proid + "|" + text.val()); $("#divFoodBox").html($("#divFoodBox").html() + "<ul><li class='li_l'>" + spProName.html() + "</li><li class='li_r'>¥" + price * text.val() + ".00" + "</li><ul>"); }
这样的话只能往下累加商品情况:
怎样可以让它不要重复,我是直接通过jquery加进去的;
我想实现的理想结果:
选择相同商品只累加价格不累加商品名称。。
1 <ul><li class='li_l' id='cart-product-list-{{productID}}'>{{productName}}</li><li class='li_r'>{{price}}</li><ul>
为购物车的每条数据加一个id,在添加之前在先判断是否有对应的商品
1 if($('#cart-product-list-{{productID}}')){ 2 //更新价格 3 }else{ 4 //加条新数据 5 }
你的购物车数据缓存在哪里啊?
现在还没有缓存,只是通过html()加在网页上。。。
@以便以谢: 这就是问题的根本原因啦。你这是把html作为缓存在使用,那么这里的商品唯一标识就成了页面上显示的商品名称。那么你再次添加该商品时,就应该先检查页面html列表是否包含新添加的商品名称。如果有,则应该修改该行html;否则新增一行记录。
显然,以上做法是非常不可取的。强烈建议加入数据缓存机制,在新增一种商品时,在数据缓存中处理好商品的数量和价格,然后统一展示到页面上。
@飞扬的尘埃: 但是这样后台处理页面会刷新。。。
@以便以谢: 刷新这个问题,其实是可以避免的:
1、使用 Ajax 更新后台缓存。
2、使用 iframe 来呈现购物车区域。
3、不使用后台缓存,而是使用Cookie或者HTML5支持的本地存储。
建议,如果是游客没有登录,则使用第3种;登录用户使用第1种。
应该加 “数量” “单价” 列吧?
这两列现在是要求不用显示,只显示产品名称和当前产品的总价格以及整个餐饮盒内商品总价格。就是不知道怎样在不加入缓存的情况下不让产品名称重复。因为如果现在加缓存的话,要到后台处理,页面会刷新,体验不好。
@以便以谢: 在前台处理呀,如果名称相同就改变数量和价格就可以了
@junjieok: 不知道怎么弄。。。