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