Jquery Ajax.ashx 高效分页实现代码


Posted in Javascript onOctober 20, 2009

以前的我,用惯了 UpdatePanel UpdateProgress 等控件,甚至到了滥用的程度,只是一味的追求无刷新,一边弄这 loading 图片 提示,这样貌似更美观,但是 感觉 更损失了性能, 而且有时候还破坏了网站的完整性。

但是学了Jquery之后,了解了 Jquery.ajax ,Jquery.get 等方法,从而学会了使用 webservice 和.ashx 文件,来与服务器交互。
这次的Jquery分页 是与 .ashx文件配合的。
建立三个.ashx,分别为PreviewHandler.ashx,PageHandler.ashx,NextHandler.ashx,分别来处理当前页,下一页,上一页的处理。
PageHandler.ashx

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
IQueryable<Answer> answer = xt.Answer.Take(10); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td onclick='javascript:alert("+"aa"+")'>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

NextHandler.ashx
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int RowCount = 10; 
int Current = Convert.ToInt32(context.Request.Params["index"]) + 1; 
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

PreviewHandler.ashx
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
int RowCount = 10; 
int Current = Convert.ToInt32(context.Request.Params["index"]) - 1; 
IQueryable<Answer> answer = xt.Answer.Skip(RowCount * (Current - 1)).Take(RowCount); 
StringBuilder sb = new StringBuilder(); 
sb.Append("<table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr>"); 
foreach (Answer a in answer) 
{ 
sb.Append("<tr><td>" + a.Answer_content + "</td><td>" + a.Answer_UserName + "</td><td>" + a.Answer_Creatime + "</td></tr>"); 
} 
sb.Append("</table>"); 
context.Response.Write(sb); 
}

三个文件其实代码大多类似,然后通过html或者aspx文件来调用,用Jquery.get()
<div id="lab"> 
<input type="button" onclick="Init();" value="初始化数据" /> 
<div id="content" style="width:100%"> 
</div> 
<div id="PagePanel"> 
<div style="color:Red;" id="PageInfo"></div> 
<a href="#" onclick="Preview();">上一页</a> 
<a href="#" onclick="Next()">下一页</a> 
</div> 
<!--用存储当前页码 --> 
<input type="hidden" class="currIndex" /> 
</div> 
var Init=function(){ 
$.get("PageHandler.ashx",function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',"1"); 
document.getElementById("PageInfo").innerHTML="当前第1页"; 
}); 
} 
var Preview=function(){ 
var current=$('.currIndex').attr('value'); 
var pre=Number(current)-1; 
$.get("PreviewHandler.ashx",{index:current},function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',pre); 
document.getElementById("PageInfo").innerHTML="当前第"+pre+"页"; 
}); 
} 
var Next=function(){ 
var current=$('.currIndex').attr('value'); 
var next=Number(current)+1; 
$.get("NextHandler.ashx",{index:current},function(data){ 
document.getElementById('content').innerHTML=data; 
$('.currIndex').attr('value',next); 
document.getElementById("PageInfo").innerHTML="当前第"+next+"页"; 
}); 
}

调用.ashx文件生成的数据即可,点击下一页,将NextHandler.ashx文件的内容覆盖PageHandler.ashx文件内容。
结果如图:
Jquery Ajax.ashx 高效分页实现代码
有待解决的问题是,对这些行进行编辑,我在.ashx文件加了 一个 <tr onclick='del();'></tr>
而且在.aspx文件上也写了del 方法,但是会报错, object expected error ,这个错误,应该是找不到 del方法吧,他们的生成时间,不懂,还未解决,
谁能解决可以告诉我。。。
Javascript 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 #Javascript
Javascript remove 自定义数组删除方法
Oct 20 #Javascript
JavaScript 事件记录使用说明
Oct 20 #Javascript
7个Javascript地图脚本整理
Oct 20 #Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 #Javascript
javascript 添加和移除函数的通用方法
Oct 20 #Javascript
JS 用6N±1法求素数 实例教程
Oct 20 #Javascript
You might like
PHP中PDO基础教程 入门级
2011/09/04 PHP
php 短链接算法收集与分析
2011/12/30 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
python删除文件示例分享
2014/01/28 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python读写csv文件的方法
2019/08/13 Python
opencv python如何实现图像二值化
2020/02/03 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
小区物业门卫岗位职责
2014/04/10 职场文书
电视节目策划方案
2014/05/16 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
入伍通知书
2015/04/23 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang