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是用来指定样式表，这里用来存放数据未尝不可）和隐藏域的使用。