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