Ajax paging example, asp.net+ajax simple paging example analysis

satisfactory answer

tl5888

2016.04.19

Adoption rate: 57% Rating: 12

Helped: 14181 people

The example of this article describes the implementation method of asp.net+ajax simple paging. Share for your reference, the details are as follows:

There are two .aspx files involved here, one is Default.aspx, the other is AjaxOperations.aspx, the first is used to display some test data, and the latter is used to process paging. There is also a testJs.js file under the js folder, which is the core part of the ajax operation. Yes, code is cheap. Look at the code: /*testJs.js*/ // This function is equivalent to document.getElementById /document.all function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } // Create XMLHttpRequest object to send ajax request function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2 .XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) { try { xmlHttp = new ActiveXObject(arrSignatures[i]); return xmlHttp; } catch (oError) { xmlHttp = false; //ignore } } // throw new Error("" + tN + "项第" + cP + "/" + tP + "页"; var pageHtml = " 首页"; pageHtml += " 上页 "; for (var i = 1; i < tP + 1; i++) { var numColor = ""; if (i == 1) numColor = "red"; pageHtml += "" + i + " "; } pageHtml += " 下页"; pageHtml += " 尾页numPg" + parseInt(curPgNumber + addNum)).style.color = "red"; getPagerInfo(parseInt(curPgNumber + addNum)); } } function chgPages(cuPg, toPg, tNum) { // $("totalNum"). innerHTML = tNum; $("cuPgNumber").innerHTML = cuPg; //$("sumPgNumber").innerHTML = toPg; } function getPagerInfo(oNum) { // Process the request, update the content var xmlReq = createXMLHTTP(); xmlReq .open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true); xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { //xmlReq.responseText is the output string $("tbTest").innerHTML = xmlReq.responseText; } else { $("tbTest").innerHTML = " Obtaining data, please wait. . . "; //alert("Connect the server failed!"); } } } xmlReq.send(null); } numPg" + parseInt(curPgNumber + addNum)).style.color = "red"; getPagerInfo(parseInt(curPgNumber + addNum)); } } function chgPages(cuPg, toPg, tNum) { // $("totalNum"). innerHTML = tNum; $("cuPgNumber").innerHTML = cuPg; //$("sumPgNumber").innerHTML = toPg; } function getPagerInfo(oNum) { // Process the request, update the content var xmlReq = createXMLHTTP(); xmlReq .open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true); xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { //xmlReq.responseText is the output string $("tbTest").innerHTML = xmlReq.responseText; } else { $("tbTest").innerHTML = " Obtaining data, please wait. . . "; //alert("Connect the server failed!"); } } } xmlReq.send(null); } red"; getPagerInfo(parseInt(curPgNumber + addNum)); } } function chgPages(cuPg, toPg, tNum) { // $("totalNum").innerHTML = tNum; $("cuPgNumber").innerHTML = cuPg; / /$("sumPgNumber").innerHTML = toPg; } function getPagerInfo(oNum) { // Process the request and update the content var xmlReq = createXMLHTTP(); xmlReq.open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true); xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { //xmlReq.responseText is the output string $("tbTest ").innerHTML = xmlReq.responseText; } else { $("tbTest").innerHTML = " Retrieving data, please wait. . . "; //alert("Connect the server failed!"); } } } xmlReq.send(null); } red"; getPagerInfo(parseInt(curPgNumber + addNum)); } } function chgPages(cuPg, toPg, tNum) { // $("totalNum").innerHTML = tNum; $("cuPgNumber").innerHTML = cuPg; / /$("sumPgNumber").innerHTML = toPg; } function getPagerInfo(oNum) { // Process the request and update the content var xmlReq = createXMLHTTP(); xmlReq.open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true); xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { //xmlReq.responseText is the output string $("tbTest ").innerHTML = xmlReq.responseText; } else { $("tbTest").innerHTML = " Retrieving data, please wait. . . "; //alert("Connect the server failed!"); } } } xmlReq.send(null); }

Default.aspx：

第1页

Default.aspx.cs： using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebTest2008 { public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } }

AjaxOperations.aspx：

复制代码代码如下:

AjaxOperations.aspx.cs： using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebTest2008 { public partial class AjaxOperations : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(Request["pgNumber"])) { //int pgNum = Convert.ToInt32(Request["pgNumber"]); Response.Write("第" + Request["pgNumber"] + "页"); } } } }

Ok了，在我的机器上(vs2008)测试通过，简单的ajax分页效果就实现了。

I hope this article will help you ajax programming.

00Share report

Ajax paging example, asp.net+ajax simple paging example analysis

Guess you like