Asp.net+jquery+.ashx文件实现分页思路 |
|
本文标签：jquery,ashx,分页 今天看到一个.java哥们写过的在页面直接请求数据列表的程序代码 。它是实现选中客户联系人后，无刷新的弹出div罗列其它联系人列表的功能 。忽然想到既然可以请求联系人列表，而且无刷新 。那么取复杂的数据列表呢，后来想到了数据分页 。我现在用了自己写的一个分页控件 。但是效率有时候感觉不是很高，它是以 用户控件＋存储过程＋分页处理类 来实现分页的 。但是无可避免的就碰到了刷新的问题即使分页很快，但是只要这“刷”的一下总是感觉很不爽 。而且还要页面编译一遍，还要在服务端处理ViewState 。以及其它的性能损失 。既然 .ashx 可以 省略页面编译的过程 。再把分页处理类 挪到客户端，那应该是会性能提升不少，还没有刷新，一定很爽，想到就做 。 我定的思路是： .ashx程序中，编写好取得不同页码的程序 。在页面布局好的前提下，留下数据区域 div 。然后在页面请求 .ashx程序生成下一页的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> <a href="#" onclick="InitNext()">Next</a></div> <input type="hidden" value="0" id="currPageIndex" /> </div> 然后编写.js文件、实现客户端的分页控制 。已经在显示页面储存了当前页码信息 一个<input type=hidden> 。 引用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#代码出身，直接呼啦呼啦..... 1、第一页初始化的数据 。.... 复制代码 代码如下: <%@ 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万级别以上 。..基本上感觉不到什么延时 。还无刷新真是爽 啊，我要是用分页的存储过程，应该还是会有所提升的 。 效果如图、、顺便画了一幅抽象画 。哈哈...顺便也欣赏一下吧 。  最后还是有点疑惑，.net的ajax 的用法是不是也是这样呢？..以前用ajax就是用一些服务端控件，没有真正实践过客户端的用法 。但是我一直觉得ajax应该和现在我实现的方式大同小异 。以后再学习吧..对ajax精通的哥们们可以指教一下，客户端的ajax的 经典、实用的知识 。先谢谢了 。 |
