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 27 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
React快速入门教程
Jan 17 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
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不写闭合标签的好处
2014/03/04 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
JS 统计时间
2021/03/09 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
实现vuex原理的示例
2020/10/21 Javascript
python 读取数据库并绘图的实例
2019/12/03 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
音乐教育感言
2014/03/05 职场文书
公司副总经理任命书
2014/06/05 职场文书
物业品质提升方案
2014/06/08 职场文书
会计工作态度自我评价
2015/03/06 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
子女赡养老人协议书
2016/03/23 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
k8s部署redis cluster集群的实现
2021/06/24 Redis