Jquery Ajax.ashx 高效分页实现代码
2009-10-20 00:00
731 查看
以前的我,用惯了 UpdatePanel UpdateProgress 等控件,甚至到了滥用的程度,只是一味的追求无刷新,一边弄这 loading 图片 提示,这样貌似更美观,但是 感觉 更损失了性能, 而且有时候还破坏了网站的完整性。
但是学了Jquery之后,了解了 Jquery.ajax ,Jquery.get 等方法,从而学会了使用 webservice 和.ashx 文件,来与服务器交互。
这次的Jquery分页 是与 .ashx文件配合的。
建立三个.ashx,分别为PreviewHandler.ashx,PageHandler.ashx,NextHandler.ashx,分别来处理当前页,下一页,上一页的处理。
PageHandler.ashx
NextHandler.ashx
PreviewHandler.ashx
三个文件其实代码大多类似,然后通过html或者aspx文件来调用,用Jquery.get()
调用.ashx文件生成的数据即可,点击下一页,将NextHandler.ashx文件的内容覆盖PageHandler.ashx文件内容。
结果如图:
有待解决的问题是,对这些行进行编辑,我在.ashx文件加了 一个 <tr onclick='del();'></tr>
而且在.aspx文件上也写了del 方法,但是会报错, object expected error ,这个错误,应该是找不到 del方法吧,他们的生成时间,不懂,还未解决,
谁能解决可以告诉我。。。
但是学了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文件内容。
结果如图:
有待解决的问题是,对这些行进行编辑,我在.ashx文件加了 一个 <tr onclick='del();'></tr>
而且在.aspx文件上也写了del 方法,但是会报错, object expected error ,这个错误,应该是找不到 del方法吧,他们的生成时间,不懂,还未解决,
谁能解决可以告诉我。。。
相关文章推荐
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- Asp .net +jquery +.ashx 文件实现高效分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- 代码下行Jquery结合Ajax和Web服务使用三层架构实现无刷新分页
- Jquery Ajax.ashx 高效分页实现代码
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- Jquery Ajax .ashx 高效分页
- Asp .net +jquery +.ashx 文件实现高效分页
- Asp .net +jquery +.ashx 文件实现高效分页
- ajax+jquery+ashx如何实现上传文件
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- JQuery+Ajax实现数据查询、排序和分页功能
- Jquery+ajax代码实现
- 无刷新分页控件(原创)(jQuery+json+ashx)(Ajax)
- jquery+json实现数据列表分页示例代码
- 基于Jquery+Ajax+Json+高效分页
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- jquery实现html页面 div 假分页有原理有代码
- AjaxPro2.0+jQuery+C#实现文章系统中的顶一下、踩一下的代码开发