asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据
发布时间:2020-12-15 20:43:44 所属栏目:asp.Net 来源:网络整理
导读:第一次进入aspx页面,就要读取出大量数据。写入页面中。使用都在页面要有添删改的操作,而且只有当点击面的保存按钮才能真正的写入到数据库中。因此我选择了Ajax+JSON的方式来实现这个页面。 复制代码 代码如下: asp:ScriptManager ID="ScriptManager1" runat
第一次进入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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net – 终止所有会话,然后是应用程序结束事件
- asp.net-mvc – 如何单元测试返回ContentResult的ActionRes
- asp.net-mvc – MVC Razor HTML助手语法:Viewbag in Html.
- asp.net – 运行示例应用程序时出错,Uncaught Error:Signa
- asp.net-mvc – 当它被称为DocumentationController时,MVC控
- Asp.net会话到期重定向到登录页面
- asp.net-mvc – 使用Razor,如何使所有“bool?”属性显示为
- asp.net-mvc – 带有Base64编码的JsonResult
- asp.net-mvc – 权限设计
- asp.net mvc4 jquery不工作
推荐文章
站长推荐
- asp.net – 在不使用MVC的情况下在WebPages中渲染
- asp.net – 为什么在调试我的Web应用程序时得到“
- 在Entity Framework中使用存储过程(一):实现存
- ASP.NET:在代码中验证用户
- asp.net-mvc – 如何在MVC3中为多行文本框创建多
- asp.net-mvc – 使用AutoMapper的控制器上的单元
- asp.net-mvc – 使用LINQ从MVC调用存储过程而不指
- asp.net-mvc-3 – 淘汰赛和全球化
- asp.net-mvc – Cookie中的ASP.NET MVC Store Te
- asp.net – 有没有一个原因,cshtml不受欢迎
热点阅读