asp.net+ajax 간단 한 페이지 인 스 턴 스 분석

본 논문 의 사례 는 asp.net+ajax 의 간단 한 페이지 실현 방법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
이것 은 두 개의.aspx 파일 과 관련 되 어 있 습 니 다.하 나 는 Default.aspx 이 고 하 나 는 Ajax Operations.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 += "&nbsp;<input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'>&nbsp;" +
   "<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:

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 。

좋은 웹페이지 즐겨찾기