快捷導(dǎo)航

asp.net 2.0中利用Ajax2.0實(shí)現(xiàn)JSON傳送大量頁(yè)面數(shù)據(jù)

更新時(shí)間：2010年03月30日 12:54:47 作者：

本人遇到一個(gè)程序頁(yè)面，要有很大量的數(shù)據(jù)進(jìn)行交互操作。

第一次進(jìn)入aspx頁(yè)面，就要讀取出大量數(shù)據(jù)。寫(xiě)入頁(yè)面中。使用都在頁(yè)面要有添刪改的操作，而且只有當(dāng)點(diǎn)擊面的保存按鈕才能真正的寫(xiě)入到數(shù)據(jù)庫(kù)中。因此我選擇了Ajax+JSON的方式來(lái)實(shí)現(xiàn)這個(gè)頁(yè)面。

復(fù)制代碼代碼如下:

 
<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> 
所屬機(jī)構(gòu)</th> 
<th> 
職業(yè)群組</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> 

所用到的頁(yè)面端的JS是：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
// 刪除表格中的一項(xiàng) 
function dataDel(id){ 
// 利用ajax使用C#的正則去掉json中的一項(xiàng) 
var objId; 
objId = "<%= this.TextBox1.ClientID %>"; 
jQuery("#"+objId).val(id); 
objId = "<%= this.Button2.ClientID %>"; 
jQuery("#"+objId).click(); 
// 刪除表格中的tr一行 
jQuery("#pct-"+id).hide(); 
} 
var pageTableIdGlobe; 
// 添加表中的一項(xiàng) 
function dateAdd(pageTableId){ 
// 備份到全局變量中 
pageTableIdGlobe = pageTableId; 
// 獲取要查詢(xún)的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進(jìn)入后臺(tái)查找數(shù)據(jù)庫(kù) 
PageMethods.AddPageContallorItem(id, RedirectSearchResult); 
}else{ 
alert("已存在列表中"); 
return; 
} 
} 
// 將要添加的數(shù)據(jù)，ajax的回調(diào)處理方法 
function RedirectSearchResult(result){ 
var html; 
// alert(result); 
if (result == "error"){ 
alert("數(shù)據(jù)讀取出錯(cuò)"); 
}else{ 
// 生成新的表格中的一行HTML 
html = CreatePageHtml(result); 
// 在頁(yè)面顯示HTML 
jQuery("#"+pageTableIdGlobe).before(html); 
// 更新json,以備寫(xiě)入數(shù)據(jù)庫(kù) 
var objId = "<%= this.TextBox2.ClientID %>"; 
FlashJson(objId, result); 
} 
} 
// 生成新的一行表格HTML 
function CreatePageHtml(result){ 
var html; 
var data = eval("("+result+")");// 轉(zhuǎn)換為json對(duì)象 
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寫(xiě)入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> 

后臺(tái)的程序端就很方便了：

復(fù)制代碼代碼如下:

 
private void InitDataSouce() 
{ 
// 獲取數(shù)據(jù) 
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 