asp.net +Ajax simple paging example analysis

Time:2020-11-12

In this paper, an example is given asp.net +Ajax simple pagination implementation method. For your reference, the details are as follows:

There are two. ASPX files involved, one called Default.aspx One called AjaxOperations.aspx The first is used to display some test data, and the second is used to process paging. There is another one under the JS folder testJs.js This is the core of Ajax operations. Good, code is leap. 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 an XMLHttpRequest object to send Ajax requests 
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);
//CP current page number, TP total page number, TN total record number 
function showPages(cP, tP, tN) {
 //Processing page number is greater than the total number of pages 
 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 number" + TN + "< / span > of < span id =" cupgnumber 'style = " color:red '"+ CP +" < / span > / < span id = sumpgnumber' > "+ TP +" < / span > page ";
 Var pagehtml < / a > ";
 Pagehtml + = < a id = < prevpg 'ref =' #'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 >";
 Pagehtml + "< / a >";
 pageHtml += "&nbsp;<input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'>&nbsp;" +
   "<input name='goto' type='button' id='goto' value='go' onClick='forward()'>";
 newCellThree.innerHTML = pageHtml;
}
//Construct JS function of page Jump. In the function, it is necessary to judge whether the input page number is a legal value 
function forward() {
 if (!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))) {
  //The value entered is illegal 
  Please enter a valid page number! "";
  $("pgNumber").focus();
  $("pgNumber").select();
 }
 else
  gotoPage($("pgNumber").value);
}
//Handle press enter on jump page 
function handleEnterOnPgNumber() {
 if (event.keyCode == 13) {
  forward();
  return false;
 }
 return true;
}
Function gotopage (onum) {// page number cannot be 0 or negative (first page, last page)
 if (oNum > 0) {
  ("innerText); // total number of records ("
  var curPgNumber = parseInt($("cuPgNumber").innerText);
  Var totalpgnumber = parseInt ($("sumpgnumber"). InnerText); // total 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 {
   Please enter a valid page number! "";
   $("pgNumber").focus();
   $("pgNumber").select();
   return;
  }
 }
}
function goToNextPrev(oNum) {
 var addNum = parseInt(oNum);
 ("innerText); // total number of records ("
 var curPgNumber = parseInt($("cuPgNumber").innerText);
 Var totalpgnumber = parseInt ($("sumpgnumber"). InnerText); // total pages
 //If the current page is the first page, click the previous page without refreshing // if the current page is the last page, click the next page without refreshing
 if ((curPgNumber + addNum) > 0 && (curPgNumber + addNum) <= 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;
 //$("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 = "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></title>
</head>
<body onload="showPages(1, 10, 100)">
 <form runat="server">
 <div>
 <div style="text-align: center">
 Page 1 < / div >
 <table cellspacing="0" style="width: 100%; height: 30px" border="0" align="center">
 <tr>
 </tr>
 </table>
 </div>
 </form>
</body>
</html>

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 ("page" + request ["pgnumber"] + "page");
   }
  }
 }
}

OK, I passed the test on my machine (VS2008), and a simple ajax paging effect was achieved.

I hope this article will be helpful to everyone’s Ajax programming.

Recommended Today

SDS of redis data structure

SDS(simple dynamic string), simple dynamic string. S and it’s called hacking string. Where hack is stored is the length of the string and the remaining space in SDS. The implementation of SDS insds.cIn the middle. C language string uses a character array of length N + 1 to represent the string of length N, and […]