asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据_.net

第一次进入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 