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


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