asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据

<br><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> <br><Scripts> <br><asp:ScriptReference Path="~/WebManage/javascript/jquery.js" /> <br></Scripts> <br></asp:ScriptManager> <br><asp:Repeater ID="Repeater1" runat="server"> <br><HeaderTemplate> <br><table class="popTable" width="100%" cellpadding="0" cellspacing="0" border="1"> <br><thead> <br><tr class="dottedBg"> <br><th> <br>所属机构</th> <br><th> <br>职业群组</th> <br><th> <br>操作</th> <br></tr> <br></thead> <br><tbody> <br></HeaderTemplate> <br><ItemTemplate> <br><tr class="dottedBg" id='pct-<%#Eval("ID") %>'> <br><td align="center"> <br><%#Eval("A1") %> <br></td> <br><td align="center"> <br><%#Eval("A2")%> <br></td> <br><td align="center"> <br><a href="javascript:dataDel('<%#Eval("ID") %>')"><%#Eval("ID") %> - 删除</a> <br></td> <br></tr> <br></ItemTemplate> <br><FooterTemplate> <br><tr id="pct"></tr> <br></tbody></table> <br></FooterTemplate> <br></asp:Repeater> <br><br /> <br><hr /> <br><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <br><ContentTemplate> <br>序列化：<br /> <br><asp:TextBox ID="TextBox2" runat="server" Width="800px" TextMode="MultiLine" Rows="10"></asp:TextBox><br /> <br><asp:TextBox ID="TextBox1" runat="server" Width="800px"></asp:TextBox><br /> <br><input type="button" value="添加" onclick="dateAdd('pct');" /> <br></ContentTemplate> <br></asp:UpdatePanel> <br> <br>所用到的页面端的JS是： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><script type="text/javascript"> <br>// 删除表格中的一项 <br>function dataDel(id){ <br>// 利用ajax使用C#的正则去掉json中的一项 <br>var objId; <br>objId = "<%= this.TextBox1.ClientID %>"; <br>jQuery("#"+objId).val(id); <br>objId = "<%= this.Button2.ClientID %>"; <br>jQuery("#"+objId).click(); <br>// 删除表格中的tr一行 <br>jQuery("#pct-"+id).hide(); <br>} <br>var pageTableIdGlobe; <br>// 添加表中的一项 <br>function dateAdd(pageTableId){ <br>// 备份到全局变量中 <br>pageTableIdGlobe = pageTableId; <br>// 获取要查询的id <br>var objId; <br>var id; <br>objId = "<%= this.TextBox1.ClientID %>"; <br>id = jQuery("#"+objId).val(); <br>// 判断序列化中是否有此ID <br>objId = "<%= this.TextBox2.ClientID %>"; <br>var json = jQuery("#"+objId).val(); <br>if(json.indexOf(id) == -1){ <br>// 利用ajax进入后台查找数据库 <br>PageMethods.AddPageContallorItem(id, RedirectSearchResult); <br>}else{ <br>alert("已存在列表中"); <br>return; <br>} <br>} <br>// 将要添加的数据，ajax的回调处理方法 <br>function RedirectSearchResult(result){ <br>var html; <br>// alert(result); <br>if (result == "error"){ <br>alert("数据读取出错"); <br>}else{ <br>// 生成新的表格中的一行HTML <br>html = CreatePageHtml(result); <br>// 在页面显示HTML <br>jQuery("#"+pageTableIdGlobe).before(html); <br>// 更新json,以备写入数据库 <br>var objId = "<%= this.TextBox2.ClientID %>"; <br>FlashJson(objId, result); <br>} <br>} <br>// 生成新的一行表格HTML <br>function CreatePageHtml(result){ <br>var html; <br>var data = eval("("+result+")");// 转换为json对象 <br>html = "<tr class=\"dottedBg\" id='pct-{id}'><td align=\"center\">{a1}</td><td align=\"center\">{a2}</td><td align=\"center\"><a href=\"javascript:dataDel('{id}')\">{id} - 删除</a></td></tr>"; <br>jQuery.each(data, function(i,item){ <br>jQuery.each(item, function(j,itemchild){ <br>if(j==0) <br>html = html.replace(/{id}/g, itemchild); <br>if(j==1) <br>html = html.replace(/{a1}/g, itemchild); <br>if(j==2) <br>html = html.replace(/{a2}/g, itemchild); <br>}); <br>}); <br>return html; <br>} <br>// 将result写入json中，objId是保存json的控件ID <br>function FlashJson(objId, result){ <br>var obj = jQuery("#"+objId); <br>var oldjson = obj.val(); <br>var newjson; <br>result = result.replace("{", ""); <br>if(oldjson=="{}"){ <br>newjson = oldjson.replace("}", result); <br>}else{ <br>newjson = oldjson.replace("}", ","+result); <br>} <br>obj.val(newjson); <br>} <br></script> <br> <br>后台的程序端就很方便了： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>private void InitDataSouce() <br>{ <br>// 获取数据 <br>pct p; <br>for (int i = 0; i < 6000; i++) <br>{ <br>p = new pct(); <br>p.ID = i.ToString(); <br>p.A1 = string.Format("{0}-1", i.ToString()); <br>p.A2 = string.Format("{0}-2", i.ToString()); <br>dbsouce.Add(p); <br>} <br>Repeater1.DataSource = dbsouce; <br>Repeater1.DataBind(); <br>// 序列化 <br>JSONObject jsonObject = new JSONObject(); <br>JSONArray jsonArray; <br>int index = 0; <br>foreach(pct temp in dbsouce) <br>{ <br>jsonArray = new JSONArray(); <br>jsonArray.Add(temp.ID); <br>jsonArray.Add(temp.A1); <br>jsonArray.Add(temp.A2); <br>jsonObject.Add(index.ToString(), jsonArray); <br>// 第二种方式，占用更多字符 <br>//jsonObject1 = new JSONObject(); <br>//jsonObject1.Add("ID", temp.ID); <br>//jsonObject1.Add("A1", temp.A1); <br>//jsonObject1.Add("A2", temp.A2); <br>//jsonObject.Add(temp.ID, jsonObject1); <br>index++; <br>} <br>this.TextBox2.Text = JSONConvert.SerializeObject(jsonObject); <br>} <br>#endregion <br></li><li>            </li><li>                                </li></ol></pre></li></ol></pre>