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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jquery仿微信聊天界面
May 06 jQuery
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
JavaScript 定时器详情
Nov 11 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
文件系统基本操作类
2006/11/23 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python实现感知器算法详解
2017/12/19 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
竞争上岗演讲稿
2014/01/05 职场文书
学生喝酒检讨书
2014/02/06 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
vue如何清除浏览器历史栈
2022/05/25 Vue.js