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