asp.net+ajax簡單分頁執行個體分析_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; } //處理頁碼小於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程式設計有所協助。