asp.net+ajax简单分页实例分析
本文实例讲述了asp.net+ajax简单分页实现方法。分享给大家供大家参考，具体如下：
这里涉及两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据，后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，codeischeap。看代码：
/*testJs.js*/
//此函数等价于document.getElementById/document.all
function$(s){if(document.getElementById){returneval('document.getElementById("'+s+'")');}else{returneval('document.all.'+s);}}
//创建XMLHttpRequest对象，以发送ajax请求
functioncreateXMLHTTP(){
varxmlHttp=false;
vararrSignatures=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
for(vari=0;i<arrSignatures.length;i++){
try{
xmlHttp=newActiveXObject(arrSignatures[i]);
returnxmlHttp;
}
catch(oError){
xmlHttp=false;//ignore
}
}
//thrownewError("MSXMLisnotinstalledonyoursystem.");
if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){
xmlHttp=newXMLHttpRequest();
}
returnxmlHttp;
}
//window.onload=showPages(1,10,100);
//cP目前页码,tP总页数,tN总记录数
functionshowPages(cP,tP,tN){
//处理页码大于总页数
if(cP>=tP){
cP=tP;
}
//处理页码小于1
if(cP<1){
cP=1;
}
vartrPg=$("trPager");
varnewCellOne=trPg.insertCell(0);
newCellOne.width="20%";
varnewCellTwo=trPg.insertCell(1);
newCellTwo.width="15%";
newCellTwo.id="pgSummary";
varnewCellThree=trPg.insertCell(2);
newCellThree.width="45%";
newCellThree.id="pgNumContext";
varnewCellFour=trPg.insertCell(3)
newCellFour.width="20%";
newCellTwo.innerHTML="共<spanid='totalNum'>"+tN+"</span>项第<spanid='cuPgNumber'style='color:red'>"+cP+"</span>/<spanid='sumPgNumber'>"+tP+"</span>页";
varpageHtml="<ahref='#'onclick='gotoPage(1)'>首页</a>";
pageHtml+="<aid='prevPg'href='#'onclick='goToNextPrev(-1)'>上页</a>";
for(vari=1;i<tP+1;i++){
varnumColor="";
if(i==1)numColor="red";
pageHtml+="<aid='numPg"+i+"'style='color:"+numColor+"'href='#'onclick='gotoPage("+i+")'>"+i+"</a>";
}
pageHtml+="<aid='nextPg'href='#'onclick='goToNextPrev(1)'>下页</a>";
pageHtml+="<ahref='#'onclick='gotoPage("+tP+")'>尾页</a>";
pageHtml+=" <inputname='pgNumber'type='text'id='pgNumber'size='3'onKeyPress='returnhandleEnterOnPgNumber();'> "+
"<inputname='goto'type='button'id='goto'value='go'onClick='forward()'>";
newCellThree.innerHTML=pageHtml;
}
//构造页面跳转的js函数，函数中需要判断输入的页号是否是合法的数值
functionforward(){
if(!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))){
//输入的值不合法
alert("请输入合法的页号！");
$("pgNumber").focus();
$("pgNumber").select();
}
else
gotoPage($("pgNumber").value);
}
//处理在跳转页面上按下回车的情况
functionhandleEnterOnPgNumber(){
if(event.keyCode==13){
forward();
returnfalse;
}
returntrue;
}
functiongotoPage(oNum){//页数不能为0或者为负数(首页，尾页)
if(oNum>0){
vartotalNumber=parseInt($("totalNum").innerText);//总记录数
varcurPgNumber=parseInt($("cuPgNumber").innerText);
vartotalPgNumber=parseInt($("sumPgNumber").innerText);//总页数
if(parseInt(oNum)<=totalPgNumber){
chgPages(oNum,totalPgNumber,totalNumber);
for(vark=1;k<totalPgNumber+1;k++){
$("numPg"+k).style.color="";
}
$("numPg"+oNum).style.color="red";
getPagerInfo(oNum);
}
else{
alert("请输入合法的页号！");
$("pgNumber").focus();
$("pgNumber").select();
return;
}
}
}
functiongoToNextPrev(oNum){
varaddNum=parseInt(oNum);
vartotalNumber=parseInt($("totalNum").innerText);//总记录数
varcurPgNumber=parseInt($("cuPgNumber").innerText);
vartotalPgNumber=parseInt($("sumPgNumber").innerText);//总页数
//如果当前页是第一页，点击前一页不用刷新//如果当前页是最后一页，点击下一页不用刷新
if((curPgNumber+addNum)>0&&(curPgNumber+addNum)<=totalPgNumber){
chgPages(parseInt(curPgNumber+addNum),totalPgNumber,totalNumber);
for(vark=1;k<totalPgNumber+1;k++){
$("numPg"+k).style.color="";
}
$("numPg"+parseInt(curPgNumber+addNum)).style.color="red";
getPagerInfo(parseInt(curPgNumber+addNum));
}
}
functionchgPages(cuPg,toPg,tNum){
//$("totalNum").innerHTML=tNum;
$("cuPgNumber").innerHTML=cuPg;
//$("sumPgNumber").innerHTML=toPg;
}
functiongetPagerInfo(oNum){//处理请求，更新内容
varxmlReq=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("Connecttheserverfailed!");
}
}
}
xmlReq.send(null);
}
Default.aspx：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebTest2008.Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<scriptsrc="js/testJs.js"type="text/javascript"></script>
<styletype="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>
<bodyonload="showPages(1,10,100)">
<formid="form1"runat="server">
<div>
<divstyle="text-align:center"id="tbTest">
第1页</div>
<tablecellspacing="0"style="width:100%;height:30px"border="0"align="center">
<trid="trPager">
</tr>
</table>
</div>
</form>
</body>
</html>
Default.aspx.cs：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
namespaceWebTest2008
{
publicpartialclassDefault:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
}
}
}
AjaxOperations.aspx：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="AjaxOperations.aspx.cs"Inherits="WebTest2008.AjaxOperations"%>
AjaxOperations.aspx.cs：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
namespaceWebTest2008
{
publicpartialclassAjaxOperations:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!string.IsNullOrEmpty(Request["pgNumber"]))
{
//intpgNum=Convert.ToInt32(Request["pgNumber"]);
Response.Write("第"+Request["pgNumber"]+"页");
}
}
}
}
Ok了，在我的机器上（vs2008）测试通过，简单的ajax分页效果就实现了。
希望本文所述对大家ajax程序设计有所帮助。