Asp.net+jquery+.ashx文件实现分页思路

前端技术 2023/09/03 .NET
今天看到一个.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的 经典、实用的知识。先谢谢了。

本文地址：https://www.stayed.cn/item/6505

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案