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{
