Asp.net + ajax simple paging instance analysis,

Asp.net + ajax simple paging instance analysis,

This article describes how to implement simple pagination in asp.net + ajax. We will share this with you for your reference. The details are as follows:

Here two. aspx files are involved, one is Default. aspx, the other is AjaxOperations. aspx, the first is used to display some test data, and the other is used to process pages. The js folder contains a file named testJs. js, which is the core part of ajax operations. Good, code is cheap. Check the Code:

/* TestJs. js * // This function is equivalent to document. getElementById/document. allfunction $ (s) {if (document. getElementById) {return eval ('document. getElementById ("'+ s +'") ');} else {return eval ('document. all. '+ s) ;}// create the XMLHttpRequest object to send the 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 ("MSXML is not installed on your system. "); if (! XmlHttp & typeof XMLHttpRequest! = 'Undefined') {xmlHttp = new XMLHttpRequest ();} return xmlHttp;} // window. onload = showPages (1, 10,100); // current cP page number, total tP page number, total tN record count function showPages (cP, tP, tN) {// processing page number greater than the total page number if (cP> = tP) {cP = tP;} // processing page number less than 1 if (cP <1) {cP = 1 ;} var trPg = $ ("trPager"); var newCellOne = trPg. insertCell (0); newCellOne. width = "20%"; var newCellTwo = trPg. insertCell (1); newCellTwo. width = "15%"; newCellTwo. id = "PgSummary"; var newCellThree = trPg. insertCell (2); newCellThree. width = "45%"; newCellThree. id = "pgNumContext"; var newCellFour = trPg. insertCell (3) newCellFour. width = "20%"; newCellTwo. innerHTML = "Total <span id = 'totalnum'>" + tN + "</span> item <span id = 'cupgnumber' style = 'color: red'> "+ cP +" </span>/<span id = 'sumpgnumber'> "+ tP +" </span> page "; var pageHtml = "<a href = '# 'onclick = 'gotopage (1)'> Homepage </a> "; pageHtml + =" <a id = 'prevpg 'href =' # 'onclick = 'gotonextprev (-1) '> previous page </a> "; for (var I = 1; I <tP + 1; I ++) {var numColor = ""; if (I = 1) numColor = "red "; pageHtml + = "<a id = 'numpg" + I + "'style = 'color: "+ numColor +" 'href = '# 'onclick = 'gotopage ("+ I +")'> "+ I +" </a> ";} pageHtml + = "<a id = 'nextpg 'href =' # 'onclick = 'gotonextprev (1) '> next page </a> "; pageHtml + = "<a href = '# 'onclick =' GotoPage ("+ tP +") '> last page </a> "; pageHtml + = "<input name = 'pgnumber' type = 'text' id = 'pgnumber' size = '3' onKeyPress = 'Return handleEnterOnPgNumber (); & apos. innerHTML = pageHtml;} // construct the js function for page Jump. The function must determine whether the entered page number is a valid value. function forward () {if (! (/^ ([-]) {0, 1} ([0-9]) {1,} $ /. test ($ ("pgNumber "). value) {// The input value is invalid alert ("Please enter a valid page number! "); $ (" PgNumber "). focus (); $ ("pgNumber "). select ();} else gotoPage ($ ("pgNumber "). value);} // process the function handleEnterOnPgNumber () {if (event. keyCode = 13) {forward (); return false;} return true;} function gotoPage (oNum) {// The number of pages cannot be 0 or negative (homepage, last page) if (oNum> 0) {var totalNumber = parseInt ($ ("totalNum "). innerText); // The total number of records var curPgNumber = parseInt ($ ("cuPgNumber "). innerText); var totalPgN Umber = parseInt ($ ("sumPgNumber "). innerText); // the total number of pages if (parseInt (oNum) <= totalPgNumber) {chgPages (oNum, totalPgNumber, totalNumber); for (var k = 1; k <totalPgNumber + 1; k ++) {$ ("numPg" + k ). style. color = "" ;}$ ("numPg" + oNum ). style. color = "red"; getPagerInfo (oNum);} else {alert ("Please enter a valid page number! "); $ (" PgNumber "). focus (); $ ("pgNumber "). select (); return ;}} function goToNextPrev (oNum) {var addNum = parseInt (oNum); var totalNumber = parseInt ($ ("totalNum "). innerText); // The total number of records var curPgNumber = parseInt ($ ("cuPgNumber "). innerText); var totalPgNumber = parseInt ($ ("sumPgNumber "). innerText); // total number of pages // if the current page is the first page, you do not need to refresh the previous page. // if the current page is the last page, click the next page and you do not need to refresh if (curPgNumber + addNum)> 0 & (curPgNumber + addNu M) <= totalPgNumber) {chgPages (parseInt (curPgNumber + addNum), totalPgNumber, totalNumber); for (var k = 1; k <totalPgNumber + 1; k ++) {$ ("numPg" + k ). style. color = "" ;}$ ("numPg" + parseInt (curPgNumber + addNum )). style. color = "red"; getPagerInfo (parseInt (curPgNumber + addNum);} function chgPages (cuPg, toPg, tNum) {// $ ("totalNum "). innerHTML = tNum; $ ("cuPgNumber "). innerHTML = cuPg; // $ ("s UmPgNumber "). 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 = "getting data... please wait... "; // alert (" Connect the server failed! ") ;}} XmlReq. send (null );}

Default. aspx:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "WebTest2008.Default" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <script src =" js/testJs. js "type =" text/javascript "> </script> <style type =" text/css "> A: link {color: #003399; text-decoration: none ;} a: visited {color: #003366; text-decoration: none;} A: hover {color: # ff0000; text-decoration: underline;} A: active {color: #00ff00; text-decoration: none ;}</style> <title> 
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:
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "AjaxOperations. aspx. cs" Inherits = "WebTest2008.AjaxOperations" %>
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 ("th" + Request ["pgNumber"] + "page ");}}}}
OK. After passing the test on my machine (vs2008), the simple ajax paging effect is achieved.
I hope this article will help you with ajax programming.
Articles you may be interested in:

 

 
  
Simple and Easy-to-use ASP. NET paging class (supports AJAX and custom text)
 
  
Asp.net uses AJAX to implement refreshing pagination
 
  
Use Jquery + Ajax + Json in asp.net to implement instance code without refreshing pages
 
  
Implementation Code (asp.net) of refreshing pagination implemented by AJAX)
 
  
AJAX paging code (backend asp.net)
 
  
Static paging implementation code of asp.net + Ajax text files
 
  
Asp.net uses the ObjectDataSource control to implement real Ajax pagination in ASP. NET
 
  
AspNetAjaxPager and Asp. Net General Ajax pagination controls without refreshing, support for Symmetric Multi-Data Binding