asp.net 2.0 using Ajax2.0 to implement JSON to transfer a large number of page data _ practical skills

The first time you enter the ASPX page, you must read a large amount of data. Write to the page. Use all on the page to have to add the deletion of the operation, and only when the click of the Save button can be true to write to the database. So I chose the Ajax+json way to implement this page.

Copy Code code 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>
Affiliated Organizations </th>
<th>
Career Groups </th>
<th>
Operations </th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr class= "dottedbg" Id= ' pct-<% #Eval ("id")%> ' >
&LT;TD align= "center" >
<% #Eval ("A1")%>
</td>
&LT;TD align= "center" >
<% #Eval ("A2")%>
</td>
&LT;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/>
<asp:updatepanel id= "UpdatePanel1" runat= "Server" >
<ContentTemplate>
Serialization: <br/>
<asp:textbox id= "TextBox2" runat= "Server" width= "800px" textmode= "MultiLine" rows= "ten" ></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 use of the page side of JS is:

Copy Code code as follows:

<script type= "Text/javascript" >
Delete one of the items in the table
function Datadel (ID) {
Using AJAX to use C # to get rid of a single item in JSON
var ObjID;
ObjID = "<%= this." Textbox1.clientid%> ";
JQuery ("#" +objid). Val (id);
ObjID = "<%= this." Button2.clientid%> ";
JQuery ("#" +objid). Click ();
Delete a TR row in a table
JQuery ("#pct-" +id). Hide ();
}
var pagetableidglobe;
Add an item in a table
function DateAdd (Pagetableid) {
Back up to global variables
Pagetableidglobe = Pagetableid;
Get the ID to query
var ObjID;
var id;
ObjID = "<%= this." Textbox1.clientid%> ";
id = jQuery ("#" +objid). Val ();
Determine if this ID is in the serialization
ObjID = "<%= this." Textbox2.clientid%> ";
var json = jQuery ("#" +objid). Val ();
if (json.indexof (id) = = 1) {
Use Ajax to go backstage to find a database
Pagemethods.addpagecontalloritem (ID, redirectsearchresult);
}else{
Alert ("Already in List");
Return
}
}
The data that will be added, the AJAX callback processing method
function Redirectsearchresult (Result) {
var html;
alert (result);
if (result = = "Error") {
Alert ("Data read error");
}else{
Generate a row of HTML in a new table
html = createpagehtml (result);
displaying HTML on a page
JQuery ("#" +pagetableidglobe). before (HTML);
Update JSON for writing to the database
var ObjID = "<%= this." Textbox2.clientid%> ";
Flashjson (ObjID, result);
}
}
Generate a new row table html
function createpagehtml (Result) {
var html;
var data = eval ("(+result+)");//Convert to JSON object
html = "<tr class=\" dottedbg\ "id= ' Pct-{id} ' ><td align=\" center\ ">{a1}</td><td align=\" Center\ " &GT;{A2}&LT;/TD&GT;&LT;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;
}
Writes result to JSON, ObjID is the control ID that holds 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 backend of the program is very convenient:

Copy Code code as follows:

private void Initdatasouce ()
{
Get 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 of
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 second way, more characters are consumed
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