Use Ajax2.0 in asp.net 2.0 to transmit a large amount of page data in JSON format

The first time you enter the aspx page, you need to read a large amount of data. Write to the page. You must delete and modify all the operations on the page. Only when you click the Save button on the page can you write them to the database. Therefore, I chose Ajax + JSON to implement this page.
Copy codeThe Code is as follows:
<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>
Institution </th>
<Th>
Occupation group </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 JS on the page is:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Delete an item in the table
Function dataDel (id ){
// Use ajax to use the C # regular expression to remove one of the json strings
Var objId;
ObjId = "<% = this. TextBox1.ClientID %> ";
JQuery ("#" + objId). val (id );
ObjId = "<% = this. Button2.ClientID %> ";
JQuery ("#" + objId). click ();
// Delete the tr row in the table
JQuery ("# pct-" + id). hide ();
}
Var pageTableIdGlobe;
// Add a table
Function dateAdd (pageTableId ){
// Back up data to a global variable
PageTableIdGlobe = pageTableId;
// Obtain the id to be queried
Var objId;
Var id;
ObjId = "<% = this. TextBox1.ClientID %> ";
Id = jQuery ("#" + objId). val ();
// Determine whether this ID exists in serialization
ObjId = "<% = this. TextBox2.ClientID %> ";
Var json = jQuery ("#" + objId). val ();
If (json. indexOf (id) =-1 ){
// Use ajax to go to the background to find the database
PageMethods. AddPageContallorItem (id, RedirectSearchResult );
} Else {
Alert ("already in the List ");
Return;
}
}
// Ajax callback processing method for the data to be added
Function RedirectSearchResult (result ){
Var html;
// Alert (result );
If (result = "error "){
Alert ("Data reading error ");
} Else {
// Generate a line of HTML in the new table
Html = CreatePageHtml (result );
// Display HTML on the page
JQuery ("#" + pageTableIdGlobe). before (html );
// Update json for writing to the database
Var objId = "<% = this. TextBox2.ClientID %> ";
FlashJson (objId, result );
}
}
// Generate a new line of table HTML
Function CreatePageHtml (result ){
Var html;
Var data = eval ("(" + result + ")"); // convert to a 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;
}
// Write the result to json. The objId is the Control ID that saves the json.
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 background program is very convenient:
Copy codeThe Code is as follows:
Private void InitDataSouce ()
{
// Obtain 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 );
// Method 2, occupying 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