asp.net 2.0 USES Ajax2.0 to realize JSON to transfer a large amount of page data

The first time you enter the aspx page, you need to read a lot of data. Write to the page. Use in the page to add or delete the operation, and only when the save button can be really written to the database. So I chose Ajax+JSON to implement this page.

 
<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> 
 affiliation </th> 
<th> 
 Occupational groups </th> 
<th> 
 operation </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") %> -  delete </a> 
</td> 
</tr> 
</ItemTemplate> 
<FooterTemplate> 
<tr id="pct"></tr> 
</tbody></table> 
</FooterTemplate> 
</asp:Repeater> 
<br /> 
<hr /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
 Serialization: <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=" add " onclick="dateAdd('pct');" /> 
</ContentTemplate> 
</asp:UpdatePanel> 

The page side JS used is:

 
<script type="text/javascript"> 
//  Delete from the table 1 item  
function dataDel(id){ 
//  using ajax use C# Regular removal of json In the 1 item  
var objId; 
objId = "<%= this.TextBox1.ClientID %>"; 
jQuery("#"+objId).val(id); 
objId = "<%= this.Button2.ClientID %>"; 
jQuery("#"+objId).click(); 
//  Delete from the table tr1 line  
jQuery("#pct-"+id).hide(); 
} 
var pageTableIdGlobe; 
//  Add to the table 1 item  
function dateAdd(pageTableId){ 
//  Backup to global variables  
pageTableIdGlobe = pageTableId; 
//  Gets what to query id 
var objId; 
var id; 
objId = "<%= this.TextBox1.ClientID %>"; 
id = jQuery("#"+objId).val(); 
//  Determine if this is present in the serialization ID 
objId = "<%= this.TextBox2.ClientID %>"; 
var json = jQuery("#"+objId).val(); 
if(json.indexOf(id) == -1){ 
//  using ajax Enter the background search database  
PageMethods.AddPageContallorItem(id, RedirectSearchResult); 
}else{ 
alert(" It's already in the list "); 
return; 
} 
} 
//  The data to be added, ajax The callback handling method  
function RedirectSearchResult(result){ 
var html; 
// alert(result); 
if (result == "error"){ 
alert(" Data reading error "); 
}else{ 
//  Generate a new table 1 line HTML 
html = CreatePageHtml(result); 
//  Display on the page HTML 
jQuery("#"+pageTableIdGlobe).before(html); 
//  update json, To prepare for writing to the database  
var objId = "<%= this.TextBox2.ClientID %>"; 
FlashJson(objId, result); 
} 
} 
//  Generate a new 1 Line form HTML 
function CreatePageHtml(result){ 
var html; 
var data = eval("("+result+")");//  convert json object  
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} -  delete </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; 
} 
//  will result write json , objId Is to save json The control of 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> 

The application side of the background is very convenient:

 
private void InitDataSouce() 
{ 
//  To get the data  
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(); 
//  serialization  
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); 
//  The first 2 This way, it takes up more characters  
//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