作者:龙文浩
撰写时间: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();
}
}