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;
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的 经典、实用的知识。先谢谢了。

时间: 2013-03-27

基于jquery封装的一个js分页

复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||

jquery分页插件AmSetPager(自写)

第一次做的插件,早写好了,后来发现一个jquery插件模板,就拿过来套.名字叫jquery.boilerplate.js.我的理解不是很深,也不太理解太多效率问题. 本来我是一个做asp.net开发的,可是公司好些个人包括美工没太会js啊.项目很多js改来改去搞得我都头大了.萌发了写插件的想法,于是照葫芦画瓢写啊,写插件的过程也学了js的面向对象.对js,还有一些效率问题有了更深了解.以前有个项目单个页面写过600多行的js文件.全是按功能面向过程写的.乱的不堪回首啊好吧先是说一下插件吧. 插件

jquery分页对象使用示例

使用方法和相关参数如下: displayId//默认值显示区域Id为pageBox,可以不填 pagesize//每页条数,默认是15条,可以不填 totalsize//总条数 curpage//当前页数 simple//默认是false,true没有上一页和下一页, type//0默认走http跳转,1是jsp页面必须有pageCallBack(pageNum)函数,从1开始 url//链接地址,如果type出入1此处就可以不填 例子:Page._run({totalsize:300,curp

jQuery中jqGrid分页实现代码

(1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT

jquery+json实现数据列表分页示例代码

该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:

jquery.pagination.js 无刷新分页实现步骤分享

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

jQuery 无刷新分页实例代码

复制代码 代码如下: <html> <head>     <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="script/jquery-1.7.1.js"></script>       

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

jQuery客户端分页实例代码

复制代码 代码如下: <script src="/js/jquery-1.4.1.js" type="text/javascript"></script>    <script type="text/javascript">        var pageindex = 1;        var pagesize = 2;        $(function () {            previous(

asp.net jquery无刷新分页插件(jquery.pagination.js)

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

JQuery页面的表格数据的增加与分页的实现

复制代码 代码如下: var countPage; var nowPag = 1; var pageSize; var countSize; var starIndex; var endIndex; // 用户提交信息 var name; var sex; var age; // 定义行号 var num = 1; $(document).ready(function() { // 注册添加用户的事件 $("#submit").click(function() { // 获取用户提交的

使用PHP+JQuery+Ajax分页的实现

为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() {               //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码            $initial = htmlenti

jQuery getJSON()+.ashx 实现分页(改进版)

参考了:http://www.jb51.net/article/35110.htm改进的地方: 1.ashx返回json数据,减少传输数据量,html页面样式控制也比较灵活: 2.改写html页的jQuery代码: 3.把3个ashx文件简化为1个. 一.创建表的测试数据: 复制代码 代码如下: create table test(id int identity,title varchar(36)) declare @index int; set @index = 1; while(@index

JQuery+Ajax无刷新分页的实例代码

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

jQuery教程 $()包装函数来实现数组元素分页效果

最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能:具体demo可以参见下图: 对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了.现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能. 按照传统的一般做法,用jQuery可写成如下: 复制代码 代码如下: var total=$(.class).length; //取得需要分

分享精心挑选的12款优秀jQuery Ajax分页插件和教程

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情  在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa

jquery.pagination +JSON 动态无刷新分页实现代码

aspx 页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

jQuery的ajax中使用FormData实现页面无刷新上传功能

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

jquery ajax多次请求数据时 不刷新问题的解决方法

jquery的ajax在频繁请求数据,或者重复请求数据的时候出现了一个情况,那就是非ie浏览器正常,ie浏览器会设置缓存,导致第二次请求的时候不会刷新,系统报304 not modify, 解决方案: jquery的ajax方法提供配置参数:cache,(只需将属性设置为false即可) 详细: cache:Boolean 默认: true, dataType为"script"和"jsonp"时默认为false如果设置为 false ,浏览器将不缓存此页面. 以上就

ajax实现改变状态和删除无刷新的实例

1. 01.php为主程序,调用smarty模板遍历输出: <?php include './include/Mysql.class.php'; include './libs/Smarty.class.php'; $db=new Mysql; $smarty=new Smarty; $lists=$db->getALL('users'); $smarty->assign('lists',$lists); $smarty->display('list.html'); ?> 2

JS分页控件 可用于无刷新分页

JS分页控件,可用于无刷新分页 复制代码 代码如下: function PagerBar(recordcount, pagesize, pageindex, showpagecount) {     var NumberRegex = new RegExp(/^\d+$/);     this.PageIndex = 1; //页索引,当前页     if (pageindex != null && NumberRegex.test(pageindex)) this.PageIndex =

jQuery不使用插件及swf实现无刷新文件上传

文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式. 首先,我们在页面中放一个form,用来上传文件: 复制代码 代码如下: <form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx"     enctype="multipart/form-data" ta

ajax提交表单实现网页无刷新注册示例

Ajax 无刷新 复制代码 代码如下: var xmlHttp;  uName() //用户名失去焦点时  {   if(all.uname.=="")   {    all.l1.innerHTML="不能为空!";    setTimeout("close(1)",1500);    return;   }   else   {    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"

发布三个ajax相关的函数,包括无刷新提交表单等

几个月前,因为项目需求,我写了下面的三个ajax相关的函数.发布出来和大家分享.第一个是用来无刷新加载一段HTML第二个是把表单数据转换成一串请求字符串第三个是结合函数一和函数二的无刷新提交表单实现. 还有一点要提到的是,无刷新表单提交,还不能对文件上传进行处理,这个主要是因为浏览器的安全设置.目前无刷新的上传,一般是用iframe来实现的.关于这个,我们在google里搜索能找到很多. 网上虽然已经有很多优秀的ajax的类和函数了,但是或许我这几个函数对大家还有点用处,于是我就发布出来了.可以

jQuery结合AJAX之在页面滚动时从服务器加载数据

 简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载. 背景 是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码.浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中.然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现

jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 复制代码 代码如下: //获取cookie值function readCookie(name) {    var cookieValue = "";    var search = name + "=";    if (document.cookie.length > 0) {