Questions about asynchronous no-refresh paging

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.