利用Asp.net+jQuery+ashx实现无刷新数据分页优化
169 浏览量
更新于2024-08-29
收藏 112KB PDF 举报
在Asp.net项目中，利用jQuery和ASHX文件实现分页功能是一种优化数据加载性能的方法。传统的分页通常涉及服务器端的用户控件、存储过程以及在页面上处理ViewState，这些可能导致页面刷新和性能损失。然而，通过使用ASHX（一种Web服务）文件，我们可以跳过页面编译步骤，将分页逻辑移到客户端，从而提高响应速度和用户体验。
具体实现思路如下：
1. 利用AJAX（Asynchronous JavaScript and XML）技术，利用jQuery的$.get方法向ASHX文件发送请求，请求特定页码的数据。ASHX文件负责处理分页逻辑，如根据页码从数据库或数据源获取所需的数据。
2. 在页面上，设计一个简单的布局，包含一个用于初始化数据的按钮和分页导航。例如，有一个包含当前页码的隐藏输入元素，以及上一页和下一页的链接。这些链接的点击事件连接到客户端的函数，如`InitUp()`和`InitNext()`。
3. 客户端JavaScript文件中，编写如`Init()`这样的函数，当按钮被点击时，发起AJAX请求并接收返回的HTML片段。这个HTML片段包含了分页后的数据列表，可以直接替换页面上的数据区域`<div id="Content">`的innerHTML。
4. 这样做的好处在于，用户不会感觉到页面刷新，因为数据的更新是异步完成的，提高了用户体验。同时，由于ASHX文件的执行是在服务器端，避免了客户端的 ViewState 处理和页面编译，从而减少了性能开销。
5. 当需要更新到下一页时，客户端只需再次发送新的页码参数给ASHX，无需重新加载整个页面，进一步节省了资源。
通过结合Asp.net、jQuery和ASHX文件，可以实现高效、无刷新的数据分页，优化了网站性能，提升了用户的交互体验。这种方式对于处理大量数据或者对性能敏感的应用场景尤其适用。
Asp.net+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;
下载后可阅读完整内容，剩余3页未读，立即下载
589 浏览量
102 浏览量
2010-05-19 上传
2024-09-21 上传
2024-09-24 上传
2024-10-18 上传
2023-05-26 上传
2023-05-17 上传
2024-10-11 上传
weixin_38595473
- 粉丝: 3
- 资源: 875
我的内容管理
展开
