Asp.net+jquery+.ashx文件实现分页思路
2023-06-13 09:14:48 时间
今天看到一个.java哥们写过的在页面直接请求数据列表的程序代码。它是实现选中客户联系人后,无刷新的弹出div罗列其它联系人列表的功能。忽然想到既然可以请求联系人列表,而且无刷新。那么取复杂的数据列表呢,后来想到了数据分页。我现在用了自己写的一个分页控件。但是效率有时候感觉不是很高,它是以用户控件+存储过程+分页处理类来实现分页的。但是无可避免的就碰到了刷新的问题即使分页很快,但是只要这“刷”的一下总是感觉很不爽。而且还要页面编译一遍,还要在服务端处理ViewState。以及其它的性能损失。既然.ashx可以省略页面编译的过程。再把分页处理类挪到客户端,那应该是会性能提升不少,还没有刷新,一定很爽,想到就做。
我定的思路是:.ashx程序中,编写好取得不同页码的程序。在页面布局好的前提下,留下数据区域div。然后在页面请求.ashx程序生成下一页的html代码。覆盖div.innerHTMl。
首先是页面,因为是要实践思路,所以页面真是很简单。引用了jquery.js
复制代码代码如下:
我定的思路是:.ashx程序中,编写好取得不同页码的程序。在页面布局好的前提下,留下数据区域div。然后在页面请求.ashx程序生成下一页的html代码。覆盖div.innerHTMl。
首先是页面,因为是要实践思路,所以页面真是很简单。引用了jquery.js
<divid="lab">
<inputid="Button1"type="button"value="初始化数据"onclick="Init();"/>
<divid="Content"style="width:100%">
</div>
<divid="PagePanel"style="margin-left:20px"><labelid="pageInfo"></label><ahref="#"onclick="InitUp()">Last</a> <ahref="#"onclick="InitNext()">Next</a></div>
<inputtype="hidden"value="0"id="currPageIndex"/>
</div>
然后编写.js文件、实现客户端的分页控制。已经在显示页面储存了当前页码信息一个<inputtype="hidden">。
引用js文件后,就可以用了,哈哈,很顺利。
//JScript文件
functionInit()
{
$.get("Handler.ashx",function(tablestr){
document.getElementById("Content").innerHTML=tablestr;
document.getElementById("currPageIndex").value="1";
});
}
functionInitNext()
{
varcurrIndex=document.getElementById("currPageIndex").value;
varnextIndex=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;
});
}
functionInitUp()
{
varcurrIndex=document.getElementById("currPageIndex").value;
varnextIndex=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;
});
}
将它引用到显示页面
<scripttype="text/javascript"src="http://www.cnblogs.com/Media/Script/jquery.js"></script>
<scriptsrc="JScript.js"type="text/javascript"></script>
搞定!
剩下的就是服务端了,这个就简单了,咱就是c#代码出身,直接呼啦呼啦.....
1、第一页初始化的数据。....
<%@WebHandlerLanguage="C#"Class="Handler"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
usingSystem.Text;
publicclassHandler:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
DataSetds=HebHX.DBUtility.DbHelperSQL.Query("selecttop20cust_code,cust_name,cust_addr,bank_name,bank_accountfromcustomer_info");
StringBuildertb=newStringBuilder("<tableclass="dateGrid"><tr><thstyle="width:130px">税号</th><thstyle="width:150px">企业名称</th><thstyle="width:200px">企业地址</th><thstyle="width:150px">银行</th><thstyle="width:150px">银行账号</th><tr>");
for(inti=0;i<ds.Tables[0].Rows.Count;i++)
{
tb.Append("<tr>");
for(intj=0;j<ds.Tables[0].Columns.Count;j++)
{
tb.Append("<tdclass="Item">");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
2、点击下一页用到的.ashx文件。
<%@WebHandlerLanguage="C#"Class="NextHandler"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
usingSystem.Text;
publicclassNextHandler:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
intpageRows=20;
intpageIndex=Convert.ToInt32(context.Request.Params["index"])+1;
DataSetds=HebHX.DBUtility.DbHelperSQL.Query("selecttop"+pageRows.ToString()+"cust_code,cust_name,cust_addr,bank_name,bank_accountfromcustomer_infowherecust_id>(selectmax(t.cust_id)from(selecttop"+(pageRows*pageIndex).ToString()+"cust_idfromcustomer_infoorderbycust_id)t)orderbycust_id");
StringBuildertb=newStringBuilder("<tableclass="dateGrid"><tr><thstyle="width:130px">税号</th><thstyle="width:150px">企业名称</th><thstyle="width:200px">企业地址</th><thstyle="width:150px">银行</th><thstyle="width:150px">银行账号</th><tr>");
for(inti=0;i<ds.Tables[0].Rows.Count;i++)
{
tb.Append("<tr>");
for(intj=0;j<ds.Tables[0].Columns.Count;j++)
{
tb.Append("<tdclass="Item">");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
3、点击前一页用到的.ashx文件。有思路了这个就更简单了,直接就是copy了。
<%@WebHandlerLanguage="C#"Class="UpHandler"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
usingSystem.Text;
publicclassUpHandler:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
intpageRows=20;
intpageIndex=Convert.ToInt32(context.Request.Params["index"])-1;
DataSetds=HebHX.DBUtility.DbHelperSQL.Query("selecttop"+pageRows.ToString()+"cust_code,cust_name,cust_addr,bank_name,bank_accountfromcustomer_infowherecust_id>(selectmax(t.cust_id)from(selecttop"+(pageRows*pageIndex).ToString()+"cust_idfromcustomer_infoorderbycust_id)t)orderbycust_id");
StringBuildertb=newStringBuilder("<tableclass="dateGrid"><tr><thstyle="width:130px">税号</th><thstyle="width:150px">企业名称</th><thstyle="width:200px">企业地址</th><thstyle="width:150px">银行</th><thstyle="width:150px">银行账号</th><tr>");
for(inti=0;i<ds.Tables[0].Rows.Count;i++)
{
tb.Append("<tr>");
for(intj=0;j<ds.Tables[0].Columns.Count;j++)
{
tb.Append("<tdclass="Item">");
tb.Append(ds.Tables[0].Rows[i][j].ToString());
tb.Append("</td>");
}
tb.Append("</tr>");
}
tb.Append("</table>");
context.Response.Write(tb.ToString());
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
完成!直接测试..效果果然很不错,要知道我们的数据库的数据量大概在10万级别以上。..基本上感觉不到什么延时。还无刷新真是爽啊,我要是用分页的存储过程,应该还是会有所提升的。
效果如图、、顺便画了一幅抽象画。哈哈...顺便也欣赏一下吧。
最后还是有点疑惑,.net的ajax的用法是不是也是这样呢?..以前用ajax就是用一些服务端控件,没有真正实践过客户端的用法。但是我一直觉得ajax应该和现在我实现的方式大同小异。以后再学习吧..对ajax精通的哥们们可以指教一下,客户端的ajax的经典、实用的知识。先谢谢了。
相关文章
- .net 温故知新:【9】.NET日志记录 ILogger使用和原理
- VB.NET Core调用YOLOv5 ONNX模型进行目标检测(ML.NET)
- jQuery图片切换插件jquery.cycle.js详解编程语言
- .NET 5.0 正式版发布:应用可在 ARM64 设备上原生运行
- Oracle Database: The Ultimate Connection Guide for .NET Developers(net连接oracle)
- NET环境下 MySQL数据库应用实践(.net配合 mysql)
- NET与MySQL实现无缝连接(.net mysql连接)
- 低耗时高效net下使用Redis实现队列处理(redis队列 .net)
- 关于.NET动态代理的介绍和应用简介
- asp.net下用url重写URLReWriter实现任意二级域名的方法
- ACCESS的参数化查询,附VBSCRIPT(ASP)和C#(ASP.NET)函数
- .net数据库连接池配置技巧(默认值)
- JQuery初体验(建议学习jquery)
- ASP.net(c#)生成html的几种解决方案[思路]
- Jquery组合form元素为json格式,asp.net反序列化
- 手动把asp.net的类生成dll文件的方法
- ASP.NET中基于JQUERY的高性能的TreeView补充
- Asp.net在三层架构中事务的使用实例代码
- 注册页实现激活邮箱验证(asp.netc#)
- asp.net中的“按需打印”(打印你需要打印的部分)实现代码
- Asp.net的GridView控件实现单元格可编辑方便用户使用
- .Net下二进制形式的文件(图片)的存储与读取详细解析
- .NET中文乱码的解决方法分享