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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
详解如何使用nvm管理Node.js多版本
May 06 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
详解vue-cli3使用
2018/08/14 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python解析nginx日志文件
2015/05/11 Python
Python读取Excel的方法实例分析
2015/07/11 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
图书室管理制度
2014/01/19 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
责任书范本大全
2015/05/11 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python