Asp.net+jquery+.ashx 파일 의 페이지 별 사고방식 실현

오늘.자바 형 들 이 쓴 페이지 에서 데이터 목록 을 직접 요청 하 는 프로그램 코드 를 보 았 습 니 다.이것 은 클 라 이언 트 연락 처 를 선택 한 후 새로 고침 되 지 않 은 팝 업 div 로 다른 연락처 목록 을 나열 하 는 기능 입 니 다.연락처 목록 을 요청 할 수 있 고 새로 고침 되 지 않 았 다 는 생각 이 들 었 다.그럼 복잡 한 데이터 목록 을 찾 으 려 면 데이터 페이지 가 생각 났 어 요.나 는 지금 내 가 쓴 페이지 컨트롤 을 사용 했다.그러나 효율 이 높 지 않 을 때 가 있 습 니 다.사용자 컨트롤+저장 과정+페이지 처리 류 로 페이지 를 나 누 는 것 입 니 다.하지만 피 할 수 없 이 새로 고침 문제 에 부 딪 혔 다.그리고 페이지 를 한 번 컴 파일 해 야 하고 서버 에서 View State 를 처리 해 야 합 니 다.기타 성능 손실.ashx 는 페이지 컴 파일 과정 을 생략 할 수 있 습 니 다.페이지 처리 류 를 클 라 이언 트 로 옮 기 면 성능 이 많이 향상 되 고 새로 고침 되 지 않 아서 시원 할 거 예요.생각 나 는 대로 할 거 예요.내 가 정 한 생각 은:.ashx 프로그램 에서 서로 다른 페이지 를 가 져 오 는 프로그램 을 만 드 는 것 이다.페이지 레이아웃 이 좋 은 전제 에서 데이터 영역 div 를 남 깁 니 다.그리고 페이지 에서 다음 페이지 의 html 코드 를 만들어 달라 고 요청 합 니 다.div.innerHTMl 을 덮어 씁 니 다.먼저 페이지 입 니 다.생각 을 실천 해 야 하기 때문에 페이지 는 정말 간단 합 니 다.jquery.js
 
<div id="lab">
<input id="Button1" type="button" value=" " onclick="Init();" />
<div id="Content" style="width: 100%">
</div>
<div id="PagePanel" style="margin-left:20px"><label id="pageInfo"></label><a href="#" onclick="InitUp()">Last</a>&nbsp; &nbsp;<a href="#" onclick="InitNext()">Next</a></div>
<input type="hidden" value="0" id="currPageIndex" />
</div>
을 참조 한 다음 에.js 파일 을 작성 하여 클 라 이언 트 의 페이지 제 어 를 실현 합 니 다.디 스 플레이 페이지 에 현재 페이지 번호 정 보 를 저장 하 였 습 니 다..js 파일 을 인용 하면 사용 할 수 있 습 니 다.하하,잘 되 었 습 니 다.
 
// JScript
function Init()
{
$.get("Handler.ashx", function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('currPageIndex').value='1';
});
}
function InitNext()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex)+1;
$.get("NextHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText=" "+nextIndex+" ";
document.getElementById('currPageIndex').value=nextIndex;
});
}
function InitUp()
{
var currIndex=document.getElementById('currPageIndex').value;
var nextIndex=Number(currIndex)-1;
$.get("PreviousHandler.ashx",{index:currIndex},function (tablestr) {
document.getElementById('Content').innerHTML=tablestr;
document.getElementById('pageInfo').innerText=" "+nextIndex+" ";
document.getElementById('currPageIndex').value=nextIndex;
});
}
이 를 디 스 플레이 페이지
 
<script type="text/javascript" src="http://www.cnblogs.com/Media/Script/jquery.js"></script>
<script src="JScript.js" type="text/javascript"></script>
에 인용 하면 됩 니 다!나머지 는 서버 입 니 다.이 건 간단 합 니 다.우 리 는 c\#코드 출신 입 니 다.그냥 훌훌..........................................................
 
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top 20 cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'> </th><th style='width:150px'> </th><th style='width:200px'> </th><th style='width:150px'> </th><th style='width:150px'> </th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
2.다음 페이지 에 사용 할'ashx 파일'을 클릭 합 니 다.
 
<%@ WebHandler Language="C#" Class="NextHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class NextHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) + 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'> </th><th style='width:150px'> </th><th style='width:200px'> </th><th style='width:150px'> </th><th style='width:150px'> </th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
3.이전 페이지 에 사 용 된'ashx 파일'을 클릭 합 니 다.생각 이 나 면 이게 더 쉬 워 요.바로 copy 예요.
 
<%@ WebHandler Language="C#" Class="UpHandler" %>
using System;
using System.Web;
using System.Data;
using System.Text;
public class UpHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int pageRows = 20;
int pageIndex = Convert.ToInt32(context.Request.Params["index"]) - 1;
DataSet ds = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
StringBuilder tb = new StringBuilder("<table class='dateGrid'><tr><th style='width:130px'> </th><th style='width:150px'> </th><th style='width:200px'> </th><th style='width:150px'> </th><th style='width:150px'> </th><tr>");
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
tb.Append("<tr>");
for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
{
tb.Append("<td class='Item'>");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
public bool IsReusable {
get {
return false;
}
}
}
완성!직접 테스트...효과 가 역시 좋 습 니 다.우리 의 데이터 베 이 스 는 약 10 만 레벨 이상 이라는 것 을 알 아야 합 니 다..........................................기본적으로 어떤 지연 도 느끼 지 못 한다.아직 새로 고침 되 지 않 았 으 니 정말 시원 하 다.내 가 페이지 를 나 누 어 저장 하 는 과정 을 사용 하면 그래도 향상 되 었 을 것 이다.효 과 는 그림 과 같 고 추상 화 도 그 렸 다.하하..겸사겸사 감상 해 보 세 요. 마지막 으로 좀 의 심 스 럽 습 니 다.............................................................이전에 aax 를 사용 한 것 은 일부 서버 컨트롤 러 로 클 라 이언 트 의 사용법 을 진정 으로 실천 한 적 이 없다.하지만 저 는 ajax 가 지금 제 가 이 루 고 있 는 방식 과 대동소이 해 야 한다 고 생각 했 습 니 다.나중에 공부 하 세 요.ajax 에 정통 한 친구 들 에 게 클 라 이언 트 의 ajax 의 전형 적 이 고 실 용적 인 지식 을 가르쳐 줄 수 있 습 니 다.일단 고마워요.

좋은 웹페이지 즐겨찾기