asp.net+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程序设计有所帮助。