《.net/C#专题—基于asp.netMVC动态计算、增减、验证input、Select等实现商品分类》

作者:龙文浩
撰写时间:2019年4月23日
开发工具与关键技术:vs/C#

有一个需求是,需要在一个页面动态添加输入框,例如淘宝上,我们看到
加入购物车的时候,每一个商品都具有不同的参数,
手机的有:版本参数、内存参数,屏幕宽度参数、套餐参数、花呗分期等等
在这里插入图片描述
服装的有:尺码参数、颜色参数等等
在这里插入图片描述
服装的有:尺码参数、颜色参数、宽窄参数等等,
食物红枣的有:食物口味参数等等
在这里插入图片描述
而这些参数都是数量不一,样式不固定,
可见都是用户自定义的名称、价格、数量、折扣和分类标题;
我们为了完成这个需求,只能采用动态添加输入框的方式来完成,
看图一:
在这里插入图片描述
图1
图1中,有个按钮,添加分类,点击后,
由于我们观察淘宝时,可以发现,加入购物车页面时,
那些小标题都是用户自定义的,我就采用输入框的方式让用户自定义信息,
例如下图中的:尺码:
m码 黑色裙子 10件 59元 80%折扣 加一张图片
下图:
在这里插入图片描述
图2
首先我们定义一个按钮,按钮中添加Click事件:
在这里插入图片描述
图3
可以看到页面上,增加后,就是拼接了一段 html
在这里插入图片描述
图4
在div里面又添加上不同的内容,但是这里需要注意的是,添加上不同的内容的时候,
我们需要传达父div的id,
在这里插入图片描述
图5,
传递了父div之后,里面又设立了一个点击事件,
点击事件中,是添加它子级html,下图:

在这里插入图片描述
图6,
在子级中又有一个事件,该事件就是添加html的具体内容了:
在这里插入图片描述
图7
然后在每一个div中我们又绑定了正则来验证每一个div
在这里插入图片描述
图8
主要触发两个事件,一个是onkeyup,另一个是触发onblur事件,然后传递三个参数,调用的都是同一个方法,就是对每个输入框进行内容验证:
在这里插入图片描述
图9
如果不符合输入的内容,则返回错误信息给用户,弹出一个tip和把提示变成红色的字体,帮助用户填写合法的内容,示例,输入错误的内容,或者不符合字数要求,出现下图提示:
在这里插入图片描述
图10
在完成的用户的验证信息之外,我这里还有个计算,请看页面的样式:
在这里插入图片描述
图11
就是通过页面上动态的文本框来获取到所有对应文本框的值,然后按照内部特定的规则进行计算:
特定的规则代码如下:
代码说明:
首先,由于是动态的,会自由的增减输入框,
所有我们不可能提前设定好输入框的id,目前我是通过收集页面所有的id,
并且在收集之前,我按照一定的规则添加上去id,然后通过我的规则解析出来
规则的代码在下面了:
在这里插入图片描述
图 12
还有就是对动态输入框的增减,功能是实现自由增减任意一个输入框,并且可自由任意增加输入框
并且还能获取到每一个在页面的输入框的值,
这就是要求循环或者递归来实现
先看循环实现的:
这里还有一些说明,如果是删除父类,则删除所有子类代码如下:
在这里插入图片描述
图13
若删除子类,代码如下:
删除子类div是不会影响父类div,
如果删除父类,则遍历出所有子类,连同父类一起删除:
在这里插入图片描述
图14
接下来讲的是验证动态的输入框,
思路是递归或者循环
在这里插入图片描述
图15
但是这里还是不够完善,我觉得不妨使用strxSon[0]+ strxSon[1]同时作为ID;
下面是可以验证到所有输入框的代码,我就是去除一个判断;
那个判断原本是想以此类推的方式,
然后,发现有特殊性,
还是参照下面的代码吧:
在这里插入图片描述
图16
下面附加上对于静态的输入框的验证:
图中底部是配合动态验证封装的方法,
在这里插入图片描述

图17
接下来就是保存数据,下面是保存之前的验证:
验证输入框,要验证每一个输入款,就要获取到所有输入框的数据,
通过数组或者字符串的方式,进行数据的获取,
然后分割,进行每一个输入框的验证,代码如下:
在这里插入图片描述
图18
通过循环数组,去验证,验证成功则加一
失败则不增加,最后判断总数是否成功;
在这里插入图片描述
图19
在这里插入图片描述
图20
在这里插入图片描述
图21
在这里插入图片描述
图22

上图的方法用于标识出错的输入框,
在此之前,我们已经传输了对应的id过来;

验证完成了之后就是保存到控制器的代码,如下:
控制器就是通过视图层传输过来的进行标识分类,
然后准确的保存进去表:
在这里插入图片描述
图23
先获取到页面的数据,
然后就处理字符串,目的是把字符串转换成数组,
只要给一个标识,就可以声明一个数组,通过分割,自动生成数组:

在这里插入图片描述
图24

在这里插入图片描述
图25
在这里插入图片描述在这里插入图片描述
图26
在这里插入图片描述
图27
保存的时候,就是把父类先保存,
然后通过父类的ID,保存到子类的表格,
在这里插入图片描述
图28
下面是数据库的帮助分析先要保存到商品表;商品表的主键给到商品明细表
商品明细表的主键又要给到商品子明细表
在这里插入图片描述
图29
在这里插入图片描述
图30
目前就是通过这样的形式,实现文章开头的那样子的样式,
如果哪路前辈有更好的建议,
请在后面给晚辈留言;
var PrivateNumber = 0;//proving Number
var PrivateSuccess = 0;//proving Success Number
//Click Add Goods And GoodsDetail
function Click_AddGoodsAndGoodsDetail() {
var strxImage = “0”;

        $.ajaxSettings.async = false;
        PrivateNumber = 0;
        PrivateSuccess = 0;
        var strxFather = strx.split('+');
        for (var i = 0; i < strxFather.length; i++) {
            if (strxFather[i] != "0") {
                var strxSon = strxFather[i].split('!');
                for (var f = 0; f < strxSon.length; f++) {
                    var strxSonSon = strxSon[f].split('_');
                    var voucher = "", id = "", tipId = "";
                    if (Number(strxSonSon[0]) == Number(strxSonSon[1])) {
                        voucher = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,25}/;
                        id = "IdClassifyTitle" + strxSonSon[0]+"+"+strxSonSon[1] + "";
                        tipId = "IdClassifyTitle_tips" + strxSonSon[1] + "";
                        PrivateValidateField(voucher, id, tipId);
                    } else {
                        strxImage = strxImage + "!" + strxSonSon[0] + "-" + strxSonSon[1];
                            voucher = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,25}/;
                            id = "IdClassify_" + strxSonSon[1] + "";
                            tipId = "IdClassify_tips" + strxSonSon[1] + "";
                            PrivateValidateField(voucher, id, tipId);
                            voucher = /[0-9_]{1,15}/;
                            id = "IdClassifyStock_" + strxSonSon[1] + "";
                            tipId = "IdClassifyStock_tips" + strxSonSon[1] + "";
                            PrivateValidateField(voucher, id, tipId);
                            voucher = /[0-9_]{1,15}/;
                            id = "IdClassifyPrice_" + strxSonSon[1] + "";
                            tipId = "IdClassifyPrice_tips" + strxSonSon[1] + "";
                            PrivateValidateField(voucher, id, tipId);
                            voucher = /[0-9_]{1,3}/;
                            id = "IdClassifySales_" + strxSonSon[1] + "";
                            tipId = "IdClassifySales_tips" + strxSonSon[1] + "";
                            PrivateValidateField(voucher, id, tipId);
                    }
                 
                }
            }
        }

        if ((/[\u4e00-\u9fa5_a-zA-Z0-9_]{1,25}/).test($("#IdGoodsNa").val()) 
               && (/[a-zA-Z0-9_]{1,50}/).test($("#GoodsMa").val())
               && (/[a-zA-Z0-9_]{1,50}/).test($("#GoodsHao").val())
               && (/[a-zA-Z0-9_]{1,5}/).test($("#InsertzKou").val())
               && (/[a-zA-Z0-9_]{1,15}/).test($("#InsertdJia").val())
               && (/[a-zA-Z0-9_]{1,10}/).test($("#InsertShu").val())
               && (/[a-zA-Z0-9_]{1,10}/).test($("#InsertMoney").val())
               && Number(PrivateSuccess) == Number(PrivateNumber)
            ) {
            
            var strxArrayImage = strxImage.split('!');//1_2
            var strClassifyImg = "0";
          
            for (var t = 0; t < strxArrayImage.length; t++) {
                if (strxArrayImage[t] != "0") {
                    strxImageId = strxArrayImage[t].split("-");
                    $("#imgfileupload_" + Number(strxImageId[1]) + "").ajaxSubmit(function (result) {
                        console.log("#imgfileupload_" + Number(strxArrayImage[t]) + "");
                        if (result.length > 5) {
                            strClassifyImg = strClassifyImg + "!" + strxArrayImage[t] + "_" + result;
                            console.log(strClassifyImg);
                        }
                       
                    })
                }
            }
            var strClassifyTitle = "0";//ClassifyTitle
            var strClassify = "0";//Classify
            var strClassifyStock = "0";//ClassifyStock
            var strClassifyPrice = "0";//ClassifyPrice
            var strClassifySales = "0";//ClassifySales
            for (var i = 0; i < strxFather.length; i++) {
                if (strxFather[i] != "0") {
                    var strxSon = strxFather[i].split('!');
                    for (var f = 0; f < strxSon.length; f++) {
                        var strxSonSon = strxSon[f].split('_');
                        var voucher = "", id = "", tipId = "";
                        if (Number(strxSonSon[0]) == Number(strxSonSon[1])) {
                            strClassifyTitle = strClassifyTitle + "!" + strxSonSon[0] + "-" + strxSonSon[1] + "_" + $("#IdClassifyTitle" + strxSonSon[1] + "").val();
                           
                        } else {

                            strClassify = strClassify + "!" + strxSonSon[0] + "-" + strxSonSon[1] + "_" + $("#IdClassify_" + strxSonSon[1] + "").val();
                            strClassifyStock = strClassifyStock + "!" + strxSonSon[0] + "-" + strxSonSon[1] + "_" + $("#IdClassifyStock_" + strxSonSon[1] + "").val();
                            strClassifyPrice = strClassifyPrice + "!" + strxSonSon[0] + "-" + strxSonSon[1] + "_" + $("#IdClassifyPrice_" + strxSonSon[1] + "").val();
                            strClassifySales = strClassifySales + "!" + strxSonSon[0] + "-" + strxSonSon[1] + "_" + $("#IdClassifySales_" + strxSonSon[1] + "").val();
                        }
                        console.log(strClassifyTitle);
                        console.log(strClassify);
                        console.log(strClassifyStock);
                        console.log(strClassifyPrice);
                        console.log(strClassifySales);
                    }
                }
            }
            $.post('/ShoppingMall0/Click_AddGoodsAndGoodsDetail?strGoodsNa=' + $("#IdGoodsNa").val()
                + "&strGoodsMa=" + $("#GoodsMa").val() + "&IdGoodsTypeNaID=" + $("#GoodsTypeNaID").val()
                + "&strGoodsHao=" + $("#GoodsHao").val() + "&strClassifyTitle=" + strClassifyTitle
                + "&strClassify=" + strClassify + "&strClassifyStock=" + strClassifyStock
                + "&strClassifyPrice=" + strClassifyPrice + "&strClassifyImg=" + strClassifyImg
                + "&strClassifySales=" + strClassifySales + "&strInsertdJia=" + $("#InsertdJia").val()
                + "&strInsertzKou=" + $("#InsertzKou").val() + "&strInsertShu=" + $("#InsertShu").val()
                + "&strInsertMoney=" + $("#InsertMoney").val(), function (data) {

                    var Idsuccess = strClassifySales.split('!');
                    if ((Number(Idsuccess.length) - 1) == Number(data)) {
                        layer.confirm('已保存,是否刷新页面?', {
                            icon: 3, btn: ['刷新页面', '不了']
                        }, function () {
                            location.reload();
                        })
                    }

                }
                );
        }
        else {
            layer.msg('信息未验证通过', { icon: 5, time: 2000 });
            ValidateField(/[\u4e00-\u9fa5_a-zA-Z0-9_]{1,25}/, "IdGoodsNa", "IdGoodsNa_tips");
            ValidateField(/[a-zA-Z0-9_]{1,50}/, "GoodsMa", "GoodsMa_tips");
            ValidateField(/[a-zA-Z0-9_]{1,50}/, "GoodsHao", "GoodsHao_tips");
            ValidateField(/[a-zA-Z0-9_]{1,5}/, "InsertzKou", "InsertzKou_tips");
            ValidateField(/[a-zA-Z0-9_]{1,15}/, "InsertdJia", "InsertdJia_tips");
            ValidateField(/[a-zA-Z0-9_]{1,10}/, "InsertShu", "InsertShu_tips");
            ValidateField(/[a-zA-Z0-9_]{1,10}/, "InsertMoney", "InsertMoney_tips");
        }
    }
    //validate dynamically Input
    function PrivateValidateField(voucher, id, tipId) {
        PrivateNumber = Number(PrivateNumber) + 1;
        if (!(voucher).test($("#" + id + "").val())) {
            layer.tips('长度1~5个字符,允许数字', "#" + tipId + "", { tips: [1, '#3595CC'], time: 500 });
            $("#" + tipId + "").css('color', "red");
        } else 
        { 
            $("#" + tipId + "").css('color', "#c4c4c4");
            PrivateSuccess = Number(PrivateSuccess) + 1;
            }
    }
    //validate dynamically Input
    function ValidateField(voucher,id,tipId) {
        if (!(voucher).test($("#" + id + "").val())) {
            layer.tips('长度1~5个字符,允许数字', "#" + tipId + "", { tips: [1, '#3595CC'], time: 500 });
            $("#" + tipId + "").css('color', "red"); 
        } else { $("#" + tipId + "").css('color', "#c4c4c4"); }
    }
    //validate dynamically Input Two
    function ValidateFieldTwo(voucher, id, tipId) {
        if (!(voucher).test($("#" + id + "").val())) {
            layer.tips('长度1~5个字符,允许数字', "#" + tipId + "", { tips: [1, '#3595CC'], time: 500 });
            $("#" + tipId + "").css('color', "red"); 
        } else {
            $("#" + tipId + "").css('color', "#c4c4c4");
            AveragePrice();
        }
     
    }

//Click Add Goods And GoodsDetail

    [ValidateInput(false)]
    public void Click_AddGoodsAndGoodsDetail() {

        strGoodsNa = Request["strGoodsNa"] == "" ? "00" : Request["strGoodsNa"];
        strGoodsMa = Request["strGoodsMa"] == "" ? "00" : Request["strGoodsMa"];
        int.TryParse(Request["IdGoodsTypeNaID"] == "" ? "00" : Request["IdGoodsTypeNaID"], out IdGoodsTypeNaID);
        strGoodsHao = Request["strGoodsHao"] == "" ? "00" : Request["strGoodsHao"];
        string strClassifyTitle = Request["strClassifyTitle"] == "" ? "00" : Request["strClassifyTitle"];//ClassifyTitle 父类
        string strClassify = Request["strClassify"] == "" ? "00" : Request["strClassify"];
        string strClassifyStock = Request["strClassifyStock"] == "" ? "00" : Request["strClassifyStock"];
        string strClassifyPrice = Request["strClassifyPrice"] == "" ? "00" : Request["strClassifyPrice"];
        string strClassifyImg = Request["strClassifyImg"] == "" ? "00" : Request["strClassifyImg"];
        string strClassifySales = Request["strClassifySales"] == "" ? "00" : Request["strClassifySales"];
        double strInsertdJia = Convert.ToDouble(Request["strInsertdJia"] == "" ? "0" : Request["strInsertdJia"]);
        double strInsertzKou = Convert.ToDouble(Request["strInsertzKou"] == "" ? "0" : Request["strInsertzKou"]);
        double strInsertShu = Convert.ToDouble(Request["strInsertShu"] == "" ? "0" : Request["strInsertShu"]);
        double strInsertMoney = Convert.ToDouble(Request["strInsertMoney"] == "" ? "0" : Request["strInsertMoney"]);

        string arrayClassifyTwo ="0";//Classify
        string[] arrayClassify = strClassify.Split('!');//Classify[]  0  1-2_子类一  1-3_子类二
        for (int q = 0; q < arrayClassify.Length; q++)
        {
            if (arrayClassify[q] != "0")
            {

                arrayClassifyTwo = arrayClassifyTwo + "!"
                    + arrayClassify[q].Split('_')[0].Split('-')[0] +"_"+ arrayClassify[q].Split('_')[1];
               
            }   
        }
        string[] arrayClassifyThree = arrayClassifyTwo.Split('!');
        string arrayClassifyStockTwo = "0";
        string[] arrayClassifyStock = strClassifyStock.Split('!');//ClassifyStock
        for (int e = 0; e < arrayClassifyStock.Length; e++)
        {
            if (arrayClassifyStock[e] != "0")
            {
                arrayClassifyStockTwo = arrayClassifyStockTwo + "!"
                     + arrayClassify[e].Split('_')[0].Split('-')[0] + "_" + arrayClassifyStock[e].Split('_')[1];
            }
        }
        string[] arrayClassifyStockThree = arrayClassifyStockTwo.Split('!');
        string arrayClassifyPriceTwo = "0";
        string[] srrayClassifyPrice = strClassifyPrice.Split('!');//ClassifyPrice
        for (int r = 0; r < srrayClassifyPrice.Length; r++)
        {
            if (srrayClassifyPrice[r] != "0")
            {
                arrayClassifyPriceTwo = arrayClassifyPriceTwo + "!"
                    + arrayClassify[r].Split('_')[0].Split('-')[0] + "_" + srrayClassifyPrice[r].Split('_')[1];
            }
        }
        string[] arrayClassifyPriceThree = arrayClassifyPriceTwo.Split('!');
        string srrayClassifyImgTwo = "0";
        string[] srrayClassifyImg = strClassifyImg.Split('!');//yClassifyImg
        for (int t = 0; t < srrayClassifyImg.Length; t++)
        {
            if (srrayClassifyImg[t] != "0")
            {
                srrayClassifyImgTwo = srrayClassifyImgTwo + "!"
                    + arrayClassify[t].Split('_')[0].Split('-')[0] + "_" + srrayClassifyImg[t].Split('_')[1];
            }
        }
        string[] srrayClassifyImgThree = srrayClassifyImgTwo.Split('!');
        string arrayClassifySalesTwo = "0";
        string[] arrayClassifySales = strClassifySales.Split('!');//ClassifySales
        for (int y = 0; y < arrayClassifySales.Length; y++)
        {
            if (arrayClassifySales[y] != "0")
            {
                arrayClassifySalesTwo = arrayClassifySalesTwo + "!"
                    + arrayClassify[y].Split('_')[0].Split('-')[0] + "_" + arrayClassifySales[y].Split('_')[1];
            }
        }
        string[] sarrayClassifySalesThree = arrayClassifySalesTwo.Split('!');


        int strCountId = 0;
        var lstCountId = dbs.S_GoodsUpdate.OrderByDescending(v => v.CountId).Select(v => new { CountId = v.CountId }).FirstOrDefault();
        if (lstCountId != null)
        {
            strCountId = Convert.ToInt32(lstCountId.CountId) + 1;
        }
        int strCountTypeId = 0;
        var lstCountTypeId = dbs.S_GoodsUpdate.OrderByDescending(p => p.CountTypeId)
            .Where(p => p.CountTypeId == IdGoodsTypeNaID).Select(p => new { CountTypeId = p.CountTypeId }).FirstOrDefault();
        if (lstCountTypeId != null)
        {
            strCountTypeId = Convert.ToInt32(lstCountTypeId.CountTypeId) + 1;
        }
        int Idsuccess = 0;
        S_GoodsUpdate lstGoodsUpdate = new S_GoodsUpdate();
        lstGoodsUpdate.GoodsNa = strGoodsNa;
        lstGoodsUpdate.GoodsMa = strGoodsMa;
        lstGoodsUpdate.IfHide = "1";
        lstGoodsUpdate.GoodsTypeID = IdGoodsTypeNaID;
        lstGoodsUpdate.CountId = strCountId;
        lstGoodsUpdate.CountState = "1";
        lstGoodsUpdate.CountTypeId = strCountTypeId;
        lstGoodsUpdate.GoodsHao = strGoodsHao;
        dbs.S_GoodsUpdate.Add(lstGoodsUpdate);
        dbs.SaveChanges();

        string[] arrayClassifyTitle = strClassifyTitle.Split('!');//ClassifyTitle
        for (int q = 0; q < arrayClassifyTitle.Length; q++)//1-1_a
        {
            string strClassifyTitleFather = "";
            if (arrayClassifyTitle[q] != "0")
            {
                string[] strClassifyTitleTwo = arrayClassifyTitle[q].Split('_');//"1-1" "父类一"
                strClassifyTitleFather = strClassifyTitleTwo[0].Split('-')[0];

                S_GoodsDetail lstGoodsDetail = new S_GoodsDetail();
                lstGoodsDetail.GoodsID = lstGoodsUpdate.GoodsID;
                lstGoodsDetail.ClassifyTitle = strClassifyTitleTwo[1];
                dbs.S_GoodsDetail.Add(lstGoodsDetail);
                dbs.SaveChanges();

                var Index = 0;
                for (int u = 0; u < arrayClassifyThree.Length; u++)
                {
                    if (arrayClassifyThree[u] != "0")
                    {
                        Index = u;
                        if (Convert.ToInt32(strClassifyTitleFather) == Convert.ToInt32(arrayClassifyThree[Index].Split('_')[0]))
                        {
                            S_GoodsDetailClassify lstGoodsDetailClassify = new S_GoodsDetailClassify();
                            lstGoodsDetailClassify.GoodsDetailID = lstGoodsDetail.GoodsDetailID;
                            lstGoodsDetailClassify.Classify = arrayClassifyThree[Index].Split('_')[1];
                            lstGoodsDetailClassify.ClassifyStock = Convert.ToInt32(arrayClassifyStockThree[Index].Split('_')[1]);
                            lstGoodsDetailClassify.ClassifyPrice = Convert.ToDecimal(arrayClassifyPriceThree[Index].Split('_')[1]);
                            lstGoodsDetailClassify.ClassifyImg = srrayClassifyImgThree[Index].Split('_')[1];
                            lstGoodsDetailClassify.ClassifySales = Convert.ToInt16(sarrayClassifySalesThree[Index].Split('_')[1]);
                            lstGoodsDetailClassify.ClassifyIntegral
                                = Convert.ToDecimal(Convert.ToDouble(arrayClassifyPriceThree[Index].Split('_')[1]) * 0.01);
                            lstGoodsDetailClassify.ClassifyIfHide = true;
                            dbs.S_GoodsDetailClassify.Add(lstGoodsDetailClassify);
                            dbs.SaveChanges();
                            Idsuccess++;
                        }
                    }
                 
                }
             


            }
           
        }
        if (Convert.ToInt32(Idsuccess) + 1 == Convert.ToInt32(arrayClassifyThree.Length))
        {
            Response.Write(Idsuccess);
            Response.End();
        }
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值