前后台传值的情况

版权声明:转载请注明出处!!谢谢!! https://blog.csdn.net/weixin_43474398/article/details/90669000

前后台的相互传值如果值太多,写的麻烦累人,且容易出错。这里整理出一套使用标记 标签属性的办法来传值, 后台取值和前台的绑定都有了大大的简化。
················································································································
上代码看问题。。

ajax把json对象转成字符串

1 $.extend({
2 //将json对象转换成字符串 [貌似jquery没有自带的这种方法]
3 toJSONString: function (object) {
4 if (object == null)
5 return;
6 var type = typeof object;
7 if (‘object’ == type) {
8 if (Array == object.constructor) type = ‘array’;
9 else if (RegExp == object.constructor) type = ‘regexp’;
10 else type = ‘object’;
11 }
12 switch (type) {
13 case ‘undefined’:
14 case ‘unknown’:
15 return;
16 break;
17 case ‘function’:
18 case ‘boolean’:
19 case ‘regexp’:
20 return object.toString();
21 break;
22 case ‘number’:
23 return isFinite(object) ? object.toString() : ‘null’;
24 break;
25 case ‘string’:
26 return ‘"’ + object.replace(/(\|")/g, “\$1”).replace(/\n|\r|\t/g, function () {
27 var a = arguments[0];
28 return (a == ‘\n’) ? ‘\n’ : (a == ‘\r’) ? ‘\r’ : (a == ‘\t’) ? ‘\t’ : “”
29 }) + ‘"’;
30 break;
31 case ‘object’:
32 if (object === null) return ‘null’;
33 var results = [];
34 for (var property in object) {
35 var value = . t o J S O N S t r i n g ( o b j e c t [ p r o p e r t y ] ) ; 36 i f ( v a l u e ! = = u n d e f i n e d ) r e s u l t s . p u s h ( .toJSONString(object[property]); 36 if (value !== undefined) results.push( .toJSONString(property) + ‘:’ + value);
37 }
38 return ‘{’ + results.join(’,’) + ‘}’;
39 break;
40 case ‘array’:
41 var results = [];
42 for (var i = 0; i < object.length; i++) {
43 var value = $.toJSONString(object[i]);
44 if (value !== undefined) results.push(value);
45 }
46 return ‘[’ + results.join(’,’) + ‘]’;
47 break;
48 }
49 }
50 });

创建数据容器对象 [用来绑定要传给后台的值]

1 var DataClass = {
2 create: function () {
3 return function () {
4 this.MyInit.apply(this, arguments);//创建对象的构造函数 //arguments 参数集合 系统名称 不能写错
5 }
6 }
7 }
8 var MyDataPack = DataClass.create();
9 MyDataPack.prototype = {
10 //初始化
11 MyInit: function (url, operation, params) {
12
13 this.data = new Object(); //所有数据容量
14
15 var bdata = new Object();
16 bdata.url = url; //地址
17 bdata.operation = operation;//操作
18 bdata.params = params; //参数
19
20 this.data.BasicData = bdata; //基本数据
21 },
22 //添加数据 如:addValue(“obj”, “111”);
23 addValue: function (p, obj) {
24 this.data[p] = obj;
25 },
26 //取得 所有标记控件的值 并写入数据
27 getValueSetData: function (togName) {
28 var values = Object(); //值的集合
29 $("[subtag=’" + togName + “’]”).each(function () {
30 //如果是input 类型 控件
31 if (this.localName == “input”) {
32 //如果是text 控件
33 if (this.type == “text” || this.type == “hidden”) {
34 values[this.id] = this.value;
35 }
36 else if (this.type == “…”) {
37
38 }
39 //…
40 }
41 else if (this.localName == “…”) {
42
43 }
44 //…
45 });
46 this.data[togName] = values;//添加到数据集合
47 },
48 //取值 如:getValue(“BasicData”)
49 getValue: function § {
50 return this.data[p];
51 },
52 //获取或设置url
53 getUrl: function (url) {
54 if (url)
55 this.data.BasicData[“url”] = url;
56 else
57 return this.data.BasicData[“url”];
58 }
59 ,
60 //取值 转成字符串的对象 数据
61 getJsonData: function () {
62 return $.toJSONString(this.data);
63 }
64 }

创建绑定前台数据对象 [用来读取后台传过来的值,并绑定到前台页面]

var MyDataBinder = {
//绑定数据到 控件 data:数据 tag:标签
Bind: function (data, Tag) {
var MJson = $.parseJSON(data);
//只绑定 标记 了的 标签
$("[bindtag=’" + Tag + “’]”).each(function () {
if (this.localName == “input”) {
if (MJson[this.id]) //如果后台传了值
$(this).attr(“value”, MJson[this.id]);
}
else if (this.localName == “…”) {
}
//…
});
}
};

使用示例

前台html

在这里插入图片描述
JS
在这里插入图片描述

后台

1 public void ProcessRequest(HttpContext context)
2 {
3 context.Response.ContentType = “text/plain”;
4 //取前台值=========================
5 //因为后台传过来的是 json对象 转换后的字符串 所以 所有数据都 做为一个参数传过来了
6 var values = context.Request.Form[0];
7 //需要引入程序集System.Web.Extensions.dll
8 JavaScriptSerializer _jsSerializer = new JavaScriptSerializer();
9 //将 json 对象字符串 转成 Dictionary 对象
10 Dictionary<string, Dictionary<string, string>> dic = _jsSerializer.Deserialize<Dictionary<string, Dictionary<string, string>>>(values);
11
12 //现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
13 string inp_2 = dic[“subtag”][“inp_2”];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
14
15
16
17 //=传值到前台=
18 Dictionary<string, string> dic2 = new Dictionary<string, string>();
19 dic2.Add(“inp_1”, “修改1”);//这里只用对应控件id 传值即可
20 dic2.Add(“inp_2”, “修改2”);
21 dic2.Add(“inp_3”, “修改3”);
22 context.Response.Write(_jsSerializer.Serialize(dic2));
23 }

由于博主能力有限,文中可能存在描述不正确,欢迎指正、补充!
感谢您的阅读。如果文章对您有用,那么请轻轻点个赞,以资鼓励。

猜你喜欢

转载自blog.csdn.net/weixin_43474398/article/details/90669000