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

本文实例讲述了asp.net+ajax简单分页实现方法。分享给大家供大家参考，具体如下：
这里涉及两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据，后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：

/*testJs.js*/// 此函数等价于document.getElementById /document.allfunction $（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; } //处理页码小于1if （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（）; } elsegotoPage（$（"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程序设计有所帮助。