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