asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据
2024-07-10 12:42:24
供稿：网友
第一次进入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{
