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 相关文章推荐
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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 源代码压缩小工具
2009/12/22 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
微信小程序实现tab切换效果
2017/11/21 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Django操作session 的方法
2020/03/09 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
大学生村官典型材料
2014/01/12 职场文书
单位介绍信范文
2014/01/18 职场文书
教师节活动主持词
2014/04/02 职场文书
医学生求职信
2014/07/01 职场文书
销售工作决心书
2015/02/04 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
医院保洁员管理制度
2015/08/05 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python