目錄
三、創建綁定前台數據對象 [用來讀取后台傳過來的值，並綁定到前台頁面]
前后台的相互傳值如果值太多，寫的麻煩累人，且容易出錯。這里整理出一套使用標記 標簽屬性的辦法來傳值， 后台取值和前台的綁定都有了大大的簡化。
一、把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 = $.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 (p) { 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：
1 <table> 2 <tr> 3 <th>一</th> 4 <th>二</th> 5 <th>三</th> 6 </tr> 7 <tr> 8 <td id="td1"><input type="text" id="inp_1" subtag="subtag" bindtag="bind" /></td> 9 <td id="td2"><input type="text" id="inp_2" subtag="subtag" value="我只是測試一下下" /></td> 10 <td><input type="text" id="inp_3" subtag="subtag" bindtag="bind" /></td> 11 </tr> 12 </table>
前台js：
1 //====================使用示例====================================== 2 var MyDataPack = new MyDataPack("Handler1.ashx", "CESHI", ""); 3 MyDataPack.getValueSetData("subtag");//將控件數據寫入對象 “subtag”為要取 控件 值 的標簽 4 //-------------------傳前台值到后台--------------- 5 $.post(MyDataPack.getUrl(), MyDataPack.getJsonData(), function (data) { 6 //-------------------綁定后台值到前台----------------- 7 MyDataBinder.Bind(data, "bind"); //"bind" 為 要綁定控件的 標簽 8 });
后台：
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 }