asp.net+ajax简单分页实例分析

前端技术 2023/09/08 AJAX

本文实例讲述了asp.net+ajax简单分页实现方法。分享给大家供大家参考，具体如下：

这里涉及两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据，后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：

/*testJs.js*/
// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(\'document.getElementById(\"\' + s + \'\")\'); } else { return eval(\'document.all.\' + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求 
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目前页码, tP总页数 ,tN总记录数 
function showPages(cP, tP, tN) {
 //处理页码大于总页数 
 if (cP >= tP) {
  cP = tP;
 }
 //处理页码小于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 = \"共<span id=\'totalNum\'>\" + tN + \"</span>项 第<span id=\'cuPgNumber\' style=\'color:red\'>\" + cP + \"</span>/<span id=\'sumPgNumber\' >\" + tP + \"</span>页\";
 var pageHtml = \" <a href=\'#\' onclick=\'gotoPage(1)\'>首页</a>\";
 pageHtml += \"<a id=\'prevPg\' href=\'#\' onclick=\'goToNextPrev(-1)\'> 上页 </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)\'> 下页</a>\";
 pageHtml += \"<a href=\'#\' onclick=\'gotoPage(\" + tP + \")\'> 尾页</a>\";
 pageHtml += \" <input name=\'pgNumber\' type=\'text\' id=\'pgNumber\' size=\'3\' onKeyPress=\'return handleEnterOnPgNumber();\'> \" +
   \"<input name=\'goto\' type=\'button\' id=\'goto\' value=\'go\' onClick=\'forward()\'>\";
 newCellThree.innerHTML = pageHtml;
}
//构造页面跳转的js函数，函数中需要判断输入的页号是否是合法的数值 
function forward() {
 if (!(/^([-]){0,1}([0-9]){1,}$/.test($(\"pgNumber\").value))) {
  //输入的值不合法 
  alert(\"请输入合法的页号！\");
  $(\"pgNumber\").focus();
  $(\"pgNumber\").select();
 }
 else
  gotoPage($(\"pgNumber\").value);
}
//处理在跳转页面上按下回车的情况 
function handleEnterOnPgNumber() {
 if (event.keyCode == 13) {
  forward();
  return false;
 }
 return true;
}
function gotoPage(oNum) { // 页数不能为0或者为负数 (首页，尾页)
 if (oNum > 0) {
  var totalNumber = parseInt($(\"totalNum\").innerText); //总记录数
  var curPgNumber = parseInt($(\"cuPgNumber\").innerText);
  var totalPgNumber = parseInt($(\"sumPgNumber\").innerText); // 总页数
  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(\"请输入合法的页号！\");
   $(\"pgNumber\").focus();
   $(\"pgNumber\").select();
   return;
  }
 }
}
function goToNextPrev(oNum) {
 var addNum = parseInt(oNum);
 var totalNumber = parseInt($(\"totalNum\").innerText); //总记录数
 var curPgNumber = parseInt($(\"cuPgNumber\").innerText);
 var totalPgNumber = parseInt($(\"sumPgNumber\").innerText); // 总页数
 //如果当前页是第一页，点击前一页不用刷新 //如果当前页是最后一页，点击下一页不用刷新
 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) { // 处理请求，更新内容
 var xmlReq = createXMLHTTP();
 xmlReq.open(\"post\", \"/AjaxOperations.aspx?pgNumber=\" + oNum, true);
 xmlReq.onreadystatechange = function() {
  if (xmlReq.readyState == 4) {
   if (xmlReq.status == 200) {
    //xmlReq.responseText为输出的那段字符串
    $(\"tbTest\").innerHTML = xmlReq.responseText;
   }
   else {
    $(\"tbTest\").innerHTML = \"　　获取数据中，请稍等．．．\";
    //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 id=\"form1\" runat=\"server\">
 <div>
 <div style=\"text-align: center\" id=\"tbTest\">
 第1页</div>
 <table cellspacing=\"0\" style=\"width: 100%; height: 30px\" border=\"0\" align=\"center\">
 <tr id=\"trPager\">
 </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：

复制代码 代码如下:
<%@ 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(\"第\" + Request[\"pgNumber\"] + \"页\");
   }
  }
 }
}

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

希望本文所述对大家ajax程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21551

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案