C#&JQuery非缓存式无刷新临时存储数据之仿购物车功能
感谢广大博问博友的帮助和共同研究讨论，终于实现了一个无缓存无刷新仿购物车的小功能：
一、实现效果简述：
有一种列表，是由双层Repeater嵌套，第一层用来显示类别，第二层用来显示类别下的商品数据，
其显示效果如下：
且每一个菜名都可以单独点开进行配餐选择，效果如下：
现在要在页面无刷新不计入缓存（在最后提交选餐数据的时候计入缓存，类似购物车，但这里不希望页面刷新）
的情况下将所选择的商品名称和数量无重复的添加到一个叫做“餐饮盒”的容器里：
最终实现结果：
在修改订购数量的时候只修改餐饮盒中该商品的总价格，商品名称不能重复，并重新计算所有商品的总价格：
二、实现代码：
1.前台界面由2个Repeater组成：
<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>
<asp:HiddenField ID="hidProInfo" runat="server" />
2.主要Jquery代码：
（1）控制商品详情的显示和隐藏：
$(function(){ var n = 0; //商品详情和订购选择区域默认隐藏 $(".CP_con").each(function () { var t = $(this);//获取当前的行 t.find("ul").click(function () { if (n == 0) {//如果隐藏则显示 t.find(".CP_mx").show(); n = 1; //设置为显示 } else {//如果显示则隐藏 t.find(".CP_mx").hide(); n = 0; } }); var $cancel = $(".Redu_CD");//取消 var $CP_mx = $(".CP_mx"); t.find($cancel).click(function () { t.find($CP_mx).hide(); });
//鼠标放置和离开时当前行的样式控制，这里是淡蓝色； $(".CP_con>ul").mouseover(function () { $(this).attr("style", "background-color:#F5F9FD"); }).mouseout(function () { $(this).removeAttr("style"); }); }); }); })
（2）修改商品订购数量以及更新餐饮盒情况：
//修改订购产品数量,type=1:添加；type=2：减少 function UpdateProductNum(btn, type, price) { var text = $(btn).parent().find(":text"); if (type == 1) { text.val(parseInt(text.val()) + 1); if (parseInt(text.val()) <= 0) text.val("1"); } else { text.val(parseInt(text.val()) - 1); if (parseInt(text.val()) <= 0) text.val("1"); } } //添加到我的餐饮盒，修改其商品数量，商品详情变动和价格计算 function AddProductNum(btn, price, proid, index) { var proAmount = 0;//每一种商品的总价格 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());//将当前份数设置为文本框中选择的份数 var curAmount = price * text.val();//计算当前总订购商品的价格 if ($("#ul" + proid).length > 0) {//如果已经存在该商品 $("#ul" + proid).attr("class", proid + "|" + text.val());//样式妙用，class用来存放商品id和订购数量，便于以下隐藏域使用 $("#ul" + proid).attr("title", "单价:￥"+price+".00；数量:"+text.val()+"份");//设置提示信息 $("#ul" + proid).html("<li class='li_l' >" + spProName.html() + "</li><li class='li_r'>￥" + curAmount + ".00</li>");//修改该商品的总价格信息 } else {//不存在则添加一行 $("#divFoodBox").html($("#divFoodBox").html() + "<ul id='ul" + proid + "' class='" + proid + "|" + text.val() + "' title='单价:￥"+price+".00；数量:"+text.val()+"份''><li class='li_l' >" + spProName.html() + "</li><li class='li_r'>￥" + curAmount + ".00</li><ul>"); } $("#divFoodBox .li_r").each(function () {//循环查找显示总价格的li控件 proAmount += parseFloat($(this).html().replace("￥", ""));//计算当前行商品总价格并追加到临时变量中； }); var arrClass="";//初始化样式字符串 $("#divFoodBox>ul").each(function () { arrClass+=$(this).attr("class")+","; }); $("#hidProInfo").val(arrClass); $("#liSum").html("￥" + proAmount+ ".00");//更新所有订购商品总价格 }
3.后台第一个Reapeter绑定时追加前台js方法：
/// <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;//第一个Reapeter的每行绑定时查找第二层里面的Reapeter HiddenField hidCategoryTwoID = e.Item.FindControl("hidCategoryTwoID") as HiddenField; rptFoodList.DataSource = HSSM_Public_DB.PblicQuery("ProductID,ProductName,Price", "Product", "CategoryTwoID = " + hidCategoryTwoID.Value); rptFoodList.DataBind();//绑定里面的Reapeter //循环里面Reapeter的项，并给相应控件追加前台js方法 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 + ".";//设置序号 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;//存放商品id的隐藏域 aAdd.Attributes.Add("onclick", string.Format("UpdateProductNum(this,1,{0})", Price));//追加添加订购数量的js方法 aRed.Attributes.Add("onclick", string.Format("UpdateProductNum(this,2,{0})", Price));//追加减少订购数量的js方法 aAddTo.Attributes.Add("onclick", string.Format("AddProductNum(this,{0},{1},{2})", Price, hidProductID.Value, proIndex));//追加更新我的餐饮盒详情的js方法 proIndex++;//每绑定一行商品让这个全局变量值自加1，用于前台js调用find方法寻找当前商品已选择份数和商品名称时使用， } } } /// <summary> /// 产品记录索引（全局变量） /// </summary> public int proIndex = 0;
4.最后填写好订购人信息后计入缓存：
/// <summary> /// 设置Cookie /// </summary> protected void SetFoodList() { string ProInfos = hidProInfo.Value.Substring(0, hidProInfo.Value.Length - 1);//获取最后所有的商品的id和数量信息，这里需要去掉最后一个逗号 string[] arrProInfos = ProInfos.Split(','); HttpCookie cookieFood = new HttpCookie("MyShoppingCart");//初始化一个Cookie对象 foreach (string strProInfo in arrProInfos) { string strProID = strProInfo.Split('|')[0];//商品id string strProCount = strProInfo.Split('|')[1];//该商品订购数量 ProModel = GetProModel(strProID); ImagesModel = GetProImageModel(strProID); //DateTime dt = DateTime.Now; //TimeSpan ts = new TimeSpan(0, 0, 1, 0, 0);//过期时间为1分钟 //cookie.Expires = dt.Add(ts);//设置过期时间 //设置cookie的值 cookieFood.Values.Add("Company", ComModel.Company); cookieFood.Values.Add("ProductID", strProID); cookieFood.Values.Add("ProductName", ProModel.ProductName); cookieFood.Values.Add("SaleUserID", SaleUserID.ToString()); cookieFood.Values.Add("ProductImg", ImagesModel.ImageUrl); cookieFood.Values.Add("Price", ProModel.Price.Value.ToString("f2")); cookieFood.Values.Add("Bonus", "1"); cookieFood.Values.Add("Count", strProCount); Response.Cookies.Add(cookieFood); } } /// <summary> /// 保存配送信息 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnDispatch_Click(object sender, EventArgs e) { SetFoodList(); Response.Redirect("OrderInfo.aspx"); }
小插曲→计入到关键隐藏域hidProInfo的值是这样的：
ok,感谢主，这个功能就此结束了，之前有博问博友建议加到餐饮盒时就加入缓存，但是考虑到需要后台处理，页面会刷新，如果用ajax也可以实现局部异步刷新，过后我再尝试一下看看，不过我这种实现方法是另一种思路，我选择最后点击“OK，下一步”的时候计入缓存到那边选餐订单确认页面获取缓存显示商品情况。其实这当中关键点就是一个class的妙用（本来class是用来指定样式表，这里用来存放数据未尝不可）和隐藏域的使用。
