快捷導(dǎo)航

Asp.net+jquery+.ashx文件實(shí)現(xiàn)分頁(yè)思路

更新時(shí)間：2013年03月28日 11:59:17 作者：

分頁(yè)思路: .ashx程序中，編寫好取得不同頁(yè)碼的程序。在頁(yè)面布局好的前提下，留下數(shù)據(jù)區(qū)域 div。然后在頁(yè)面請(qǐng)求 .ashx程序生成下一頁(yè)的html代碼。覆蓋div.innerHTMl

今天看到一個(gè).java哥們寫過(guò)的在頁(yè)面直接請(qǐng)求數(shù)據(jù)列表的程序代碼。它是實(shí)現(xiàn)選中客戶聯(lián)系人后，無(wú)刷新的彈出div羅列其它聯(lián)系人列表的功能。忽然想到既然可以請(qǐng)求聯(lián)系人列表，而且無(wú)刷新。那么取復(fù)雜的數(shù)據(jù)列表呢，后來(lái)想到了數(shù)據(jù)分頁(yè)。我現(xiàn)在用了自己寫的一個(gè)分頁(yè)控件。但是效率有時(shí)候感覺(jué)不是很高，它是以用戶控件＋存儲(chǔ)過(guò)程＋分頁(yè)處理類來(lái)實(shí)現(xiàn)分頁(yè)的。但是無(wú)可避免的就碰到了刷新的問(wèn)題即使分頁(yè)很快，但是只要這“刷”的一下總是感覺(jué)很不爽。而且還要頁(yè)面編譯一遍，還要在服務(wù)端處理ViewState。以及其它的性能損失。既然 .ashx 可以省略頁(yè)面編譯的過(guò)程。再把分頁(yè)處理類挪到客戶端，那應(yīng)該是會(huì)性能提升不少，還沒(méi)有刷新，一定很爽，想到就做。

我定的思路是： .ashx程序中，編寫好取得不同頁(yè)碼的程序。在頁(yè)面布局好的前提下，留下數(shù)據(jù)區(qū)域 div。然后在頁(yè)面請(qǐng)求 .ashx程序生成下一頁(yè)的html代碼。覆蓋div.innerHTMl 。
首先是頁(yè)面，因?yàn)槭且獙?shí)踐思路，所以頁(yè)面真是很簡(jiǎn)單。引用了jquery.js

復(fù)制代碼代碼如下:

 
<div id="lab"> 
<input id="Button1" type="button" value="初始化數(shù)據(jù)" 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文件、實(shí)現(xiàn)客戶端的分頁(yè)控制。已經(jīng)在顯示頁(yè)面儲(chǔ)存了當(dāng)前頁(yè)碼信息一個(gè)<input type='hidden'>。
引用js文件后，就可以用了，哈哈，很順利。

復(fù)制代碼代碼如下:

 
// 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="當(dāng)前第 "+nextIndex+" 頁(yè)"; 
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="當(dāng)前第 "+nextIndex+" 頁(yè)"; 
document.getElementById('currPageIndex').value=nextIndex; 
}); 
} 

將它引用到顯示頁(yè)面

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="http://www.cnblogs.com/Media/Script/jquery.js"></script> 
<script src="JScript.js" type="text/javascript"></script> 

搞定！
剩下的就是服務(wù)端了，這個(gè)就簡(jiǎn)單了，咱就是c#代碼出身，直接呼啦呼啦.....
1、第一頁(yè)初始化的數(shù)據(jù)。....

復(fù)制代碼代碼如下:

 
<%@ 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'>稅號(hào)</th><th style＝'width:150px'>企業(yè)名稱</th><th style＝'width:200px'>企業(yè)地址</th><th style＝'width:150px'>銀行</th><th style＝'width:150px'>銀行賬號(hào)</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、點(diǎn)擊下一頁(yè)用到的 .ashx文件。

復(fù)制代碼代碼如下:

 
<%@ 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'>稅號(hào)</th><th style＝'width:150px'>企業(yè)名稱</th><th style＝'width:200px'>企業(yè)地址</th><th style＝'width:150px'>銀行</th><th style＝'width:150px'>銀行賬號(hào)</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、點(diǎn)擊前一頁(yè)用到的.ashx文件。有思路了這個(gè)就更簡(jiǎn)單了，直接就是copy了。

復(fù)制代碼代碼如下:

 
<%@ 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'>稅號(hào)</th><th style＝'width:150px'>企業(yè)名稱</th><th style＝'width:200px'>企業(yè)地址</th><th style＝'width:150px'>銀行</th><th style＝'width:150px'>銀行賬號(hào)</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; 
} 
} 
} 

完成！直接測(cè)試..效果果然很不錯(cuò)，要知道我們的數(shù)據(jù)庫(kù)的數(shù)據(jù)量大概在10萬(wàn)級(jí)別以上。..基本上感覺(jué)不到什么延時(shí)。還無(wú)刷新真是爽啊，我要是用分頁(yè)的存儲(chǔ)過(guò)程，應(yīng)該還是會(huì)有所提升的。
效果如圖、、順便畫了一幅抽象畫。哈哈...順便也欣賞一下吧。

最后還是有點(diǎn)疑惑，.net的ajax 的用法是不是也是這樣呢？..以前用ajax就是用一些服務(wù)端控件，沒(méi)有真正實(shí)踐過(guò)客戶端的用法。但是我一直覺(jué)得ajax應(yīng)該和現(xiàn)在我實(shí)現(xiàn)的方式大同小異。以后再學(xué)習(xí)吧..對(duì)ajax精通的哥們們可以指教一下，客戶端的ajax的經(jīng)典、實(shí)用的知識(shí)。先謝謝了。

您可能感興趣的文章: