Today, asynchronous no-refresh paging, the idea is to asynchronously load each page of content, incoming pagesize (page size of the number of bars) and pageindex (number), and then query out the data, put in the dataset, in the use of JSON common class library, The dataset into a JSON object, back to the page, with the written page code is also sent back to the pages, when the implementation of the difficulties encountered, C # General handlers can not pass two parameters to the page.
Later, a method, System.Web.Script.Serialization.JavaScriptSerializer, serialization, reference-namespace was found : System.Web.Script.Serialization
Assemblies: System.Web.Extensions (in System.Web.Extensions.dll), serialize the object, and then assign the value with an anonymous type, as follows:
String nav= CommonHelper.PageNav.ShowPageNavigate (pageSize, PageIndex, total); Paged HTML string returned by page code
DataSet ds= Dal.DbHelperSQL.Query (SQL);
String jsstr = CommonHelper.ConvertJson.ToJson (ds); Borrow the Convertjson class to convert the dataset to JSON
System.Web.Script.Serialization.JavaScriptSerializer Scriptserializer =new System.Web.Script.Serialization.JavaScriptSerializer ();
var jsonstr = scriptserializer.serialize (new {JSON =jsstr,navhtml=nav}); //Put two parameters into Jsonstr
Context. Response.Write (JSONSTR); Return to Page
The returned jsonstr,navhtml section is deleted, thus it can be seen that the "JSON" is followed by a string, so in the foreground data.json.ds[1].cou_id, can not be displayed, So we're going to turn the JSON string into a JSON image .
{
"JSON": "{\" ds\ ": [{\" select_id\ ": 1,\" cou_id\ ": 6,\" cou_name\ ": \" html base \ ", \" stu_id\ ": 2,\" stu_ Name\ ": \" Luchecang \ ", \" stu_sex\ ": \" man \ "," cla_id\ ": 2,\" cla_name\ ": \" Software 3132\ "},{\" select_id\ ": 2,\" cou_id\ ": 5,\" cou_ Name\ ": \" net base \ ", \" stu_id\ ": 2,\" stu_name\ ": \" Luchecang \ ", \" stu_sex\ ": \" male \ ", \" cla_id\ ": 2,\" cla_name\ ": \" Software 3132\ "} , {\ "select_id\": 3,\ "cou_id\": 5,\ "cou_name\": \ "net base \", \ "stu_id\": 1,\ "stu_name\": \ "Chen ran \", \ "stu_sex\": \ "male \", \ "cla_id\": 2,\ "cla_name\": \ "Software 3132\"},{\ "select_id\": 4,\ "cou_id\": 2,\ "cou_name\": \ "gross \", \ "stu_id\": 2,\ "Stu_name \ ": \" Luchecang \ ", \" stu_sex\ ": \" male \ ", \" cla_id\ ": 2,\" cla_name\ ": \" Software 3132\ "},{\" select_id\ ": 5,\" cou_id\ ": 4,\" cou_name\ " : \ "Java foundation \", \ "stu_id\": 4,\ "stu_name\": \ "kh \", \ "stu_sex\": \ "male \", \ "cla_id\": 1,\ "cla_name\": \ "Software 3131\"},{\ "Select _id\ ": 6,\" cou_id\ ": 3,\" cou_name\ ": \" network security \ "," stu_id\ ": 5,\" stu_name\ ": \" Xiang Wang \ ", \" stu_sex\ ": \" male \ ", \" cla_id\ ": 1,\" Cla_name\ ": \" Software 3131\ "},{\" select_id\ ": 7,\" cou_id\ ": 4,\" cou_name\ ": \" Java foundation \ ", \" stu_id\ ": 6,\" stu_name\ ": \" Lu Chailian \ " , \ "stu_sex\": \ "Female \ ", \" cla_id\ ": 1,\" cla_name\ ": \" Software 3131\ "},{\" select_id\ ": 8,\" cou_id\ ": 1,\" cou_name\ ": \" hacker attack \ ", \" stu_id\ ": 6,\" Stu_name\ ": \" Lu Chailian \ ", \" stu_sex\ ": \" female \ ", \" cla_id\ ": 1,\" cla_name\ ": \" Software 3131\ "},{\" select_id\ ": 9,\" cou_id\ ": 2,\" cou _name\ ": \" Mao summary \ ", \" stu_id\ ": 6,\" stu_name\ ": \" Lu Chailian \ ", \" stu_sex\ ": \" female \ ", \" cla_id\ ": 1,\" cla_name\ ": \" Software 3131\ "},{\" Select_id\ ": 10,\" cou_id\ ": 3,\" cou_name\ ": \" network security \ ", \" stu_id\ ": 7,\" stu_name\ ": \" Zhang Yilei \ ", \" stu_sex\ ": \" female \ ", \" cla_id \ ": 1,\" cla_name\ ": \" Software 3131\ "}]}"
}
Front Code:
function Initinfo (strpostdata) {
$.getjson ("Ajaxpagenav.ashx", Strpostdata, function (data) {
$ (". Tbody"). HTML ("");
Because the background first uses the Convertjson class, the dataset is converted to a JSON string, so when the Data.json value, the JSON string is taken, so the need to use Json.parse (Data.json); conversion//For JSON object
var js = json.parse (Data.json);
var strtr = "";
for (var i = 0; i < js.ds.length; i++) {
Strtr + = "<tr>"
Strtr + = "<td>" + js.ds[i].cou_id + "</td>";
Strtr + = "<td>" + js.ds[i].cou_name + "</td>";
Strtr + = "<td>" + js.ds[i].stu_id + "</td>";
Strtr + = "<td>" + js.ds[i].stu_name + "</td>";
Strtr + = "<td>" + js.ds[i].stu_sex + "</td>";
Strtr + = "<td>" + js.ds[i].cla_id + "</td>";
Strtr + = "<td>" + js.ds[i].cla_name + "</td>";
Strtr + = "</tr>";
}
$ (". Tbody"). HTML (STRTR);
Data. Navhtml is the value, serialization transforms the HTML string into a
{"JSON": "DataSet converted to a string",
"Navhtml": "String of HTML"
}
$ (". Paginator"). HTML (data. navhtml);
Click on the event triggered by the paging navigation,
$ (". CPB"). Click (function () {
var href = $ (this). attr ("href");
var strpostdata = href.substr (Href.lastindexof ('? ') + 1);
Call the Initinfo () method to reload the data that needs to jump to the page, strpostdata:pagesize=**&pageindex=**
alert (strpostdata);
Initinfo (Strpostdata)
To cancel a hyperlink's own jump
return false;
});
$ (". Pagelink"). Click (function () {
var href = $ (this). attr ("href");
var strpostdata = href.substr (Href.lastindexof ('? ') + 1);
alert (strpostdata);
Initinfo (Strpostdata)
return false;
});
})
Questions about asynchronous no-refresh paging