zoukankan      html  css  js  c++  java
  • Asp .net +jquery +.ashx 文件实现高效分页

    今天看到一个.java哥们 写过的在页面直接请求数据列表的程序代码。它是实现选中客户联系人后,无刷新的弹出div罗列其它联系人列表的功能。忽然想到既然可以请求联系人列表,而且无刷新。那么取复杂的数据列表呢,后来想到了 数据分页。我现在用了自己写的一个分页控件。但是效率有时候感觉不是很高,它是以 用户控件+存储过程+分页处理类 来实现分页的。但是无可避免的就碰到了刷新的问题即使分页很快,但是只要这“刷”的一下总是感觉很不爽。而且还要页面编译一遍,还要在服务端处理ViewState。以及其它的性能损失。既然 .ashx 可以 省略页面编译的过程。再把分页处理类 挪到客户端,那应该是会性能提升不少,还没有刷新,一定很爽,想到就做。

        我定的思路是: .ashx程序中,编写好取得不同页码的程序。在页面布局好的前提下,留下数据区域 div。然后在页面请求 .ashx程序生成下一页的html代码。覆盖div.innerHTMl
     首先是页面,因为是要实践思路,所以页面真是很简单。引用了jquery.js


     <div id="lab">
            
    <input id="Button1" type="button" value="初始化数据" onclick="Init();" />
            
    <div id="Content" style=" 100%">
            
    </div>
            
    <div id="PagePanel" style="margin-left:20px"><label id="pageInfo"></label><href="#" onclick="InitUp()">Last</a>&nbsp; &nbsp;<href="#" onclick="InitNext()">Next</a></div>
            
    <input type="hidden" value="0" id="currPageIndex" />
        
    </div>


          然后编写.js文件、实现客户端的分页控制。已经在显示页面储存了当前页码信息 一个<input type='hidden'>。
    引用js文件后,就可以用了,哈哈,很顺利。


    // JScript 文件

    function Init()
    {
          $.get(
    "Handler.ashx"function (tablestr) {
           document.getElementById(
    'Content').innerHTML=tablestr;
           document.getElementById(
    'currPageIndex').value='1';
        });
    }
    function InitNext()
    {
        
    var currIndex=document.getElementById('currPageIndex').value;
        
    var nextIndex=Number(currIndex)+1;
          
        $.get(
    "NextHandler.ashx",{index:currIndex},function (tablestr) {
           document.getElementById(
    'Content').innerHTML=tablestr;
           document.getElementById(
    'pageInfo').innerText="当前第 "+nextIndex+" 页";
           document.getElementById(
    'currPageIndex').value=nextIndex;
        });
    }
    function InitUp()
    {
        
    var currIndex=document.getElementById('currPageIndex').value;
        
    var nextIndex=Number(currIndex)-1;
          
        $.get(
    "PreviousHandler.ashx",{index:currIndex},function (tablestr) {
           document.getElementById(
    'Content').innerHTML=tablestr;
           document.getElementById(
    'pageInfo').innerText="当前第 "+nextIndex+" 页";
           document.getElementById(
    'currPageIndex').value=nextIndex;
        });
    }


       将它引用到显示页面
          <script type="text/javascript" src="http://www.cnblogs.com/Media/Script/jquery.js"></script>
          <script src="JScript.js" type="text/javascript"></script>
       搞定!
        剩下的就是服务端了,这个就简单了,咱就是c#代码出身,直接呼啦呼啦.....
    1、第一页初始化的数据。....


    <%@ WebHandler Language="C#" Class="Handler" %>

    using System;
    using System.Web;
    using System.Data;
    using System.Text;

    public class Handler : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            
            context.Response.ContentType 
    = "text/plain";
            DataSet ds 
    = HebHX.DBUtility.DbHelperSQL.Query("select top 20 cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info");
            StringBuilder tb 
    = new StringBuilder("<table class='dateGrid'><tr><th style='130px'>税号</th><th style='150px'>企业名称</th><th style='200px'>企业地址</th><th style='150px'>银行</th><th style='150px'>银行账号</th><tr>");
            
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                tb.Append(
    "<tr>");
                
    for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
                {
                    tb.Append(
    "<td class='Item'>");
                    tb.Append(ds.Tables[
    0].Rows[i][j].ToString());
                    tb.Append(
    "</td>");
                }
                
                tb.Append(
    "</tr>");
            }
            tb.Append(
    "</table>");
            context.Response.Write(tb.ToString());
        }
     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }
        }

    }


    2、点击下一页用到的 .ashx文件。


    <%@ WebHandler Language="C#" Class="NextHandler" %>

    using System;
    using System.Web;
    using System.Data;
    using System.Text;

    public class NextHandler : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            context.Response.ContentType 
    = "text/plain";
            
    int pageRows = 20;
            
    int pageIndex = Convert.ToInt32(context.Request.Params["index"]) + 1;

            DataSet ds 
    = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
            StringBuilder tb 
    = new StringBuilder("<table class='dateGrid'><tr><th style='130px'>税号</th><th style='150px'>企业名称</th><th style='200px'>企业地址</th><th style='150px'>银行</th><th style='150px'>银行账号</th><tr>");
            
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            
    {
                tb.Append(
    "<tr>");
                
    for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
                
    {
                    tb.Append(
    "<td class='Item'>");
                    tb.Append(ds.Tables[
    0].Rows[i][j].ToString());
                    tb.Append(
    "</td>");
                }


                tb.Append(
    "</tr>");
            }

            tb.Append(
    "</table>");
            context.Response.Write(tb.ToString());
        }

     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }

        }


    }

    3、点击前一页用到的.ashx文件。有思路了这个就更简单了,直接就是copy了。


    <%@ WebHandler Language="C#" Class="UpHandler" %>

    using System;
    using System.Web;
    using System.Data;
    using System.Text;

    public class UpHandler : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            context.Response.ContentType 
    = "text/plain";
            
    int pageRows = 20;
            
    int pageIndex = Convert.ToInt32(context.Request.Params["index"]) - 1;

            DataSet ds 
    = HebHX.DBUtility.DbHelperSQL.Query("select top " + pageRows.ToString() + " cust_code,cust_name,cust_addr,bank_name,bank_account from customer_info where cust_id> (select max(t.cust_id) from (select top " + (pageRows * pageIndex).ToString() + " cust_id from customer_info order by cust_id) t) order by cust_id");
            StringBuilder tb 
    = new StringBuilder("<table class='dateGrid'><tr><th style='130px'>税号</th><th style='150px'>企业名称</th><th style='200px'>企业地址</th><th style='150px'>银行</th><th style='150px'>银行账号</th><tr>");
            
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            
    {
                tb.Append(
    "<tr>");
                
    for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
                
    {
                    tb.Append(
    "<td class='Item'>");
                    tb.Append(ds.Tables[
    0].Rows[i][j].ToString());
                    tb.Append(
    "</td>");
                }


                tb.Append(
    "</tr>");
            }

            tb.Append(
    "</table>");
            context.Response.Write(tb.ToString());
        }

     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }

        }


    }

    完成!直接测试..效果果然很不错,要知道我们的数据库的数据量大概在10万级别以上。..基本上感觉不到什么延时。还无刷新真是爽 啊,我要是用分页的存储过程,应该还是会有所提升的。
    效果如图、、顺便画了一幅抽象画。哈哈...顺便也欣赏一下吧。


       最后还是有点疑惑,.net的ajax 的用法是不是也是这样呢?..以前用ajax就是用一些服务端控件,没有真正实践过客户端的用法。但是我一直觉得ajax应该和现在我实现的方式大同小异。以后再学习吧..对ajax精通的哥们们可以指教一下,客户端的ajax的 经典、实用的知识。先谢谢了。

  • 相关阅读:
    最新的thinkphp 数据库字段 自动转为小写。是个坑,要小心
    游戏助手开发
    最新的thinkphp 后台入口的问题
    最近的小成就
    一个大坑1111111111
    一个大坑
    代码的重构
    PHP上传文件大小的修改
    博客园Markdown编辑器代码高亮失效(官方已修复)
    2014年最新前端开发面试题(题目列表+答案 完整版)
  • 原文地址:https://www.cnblogs.com/liufei88866/p/1798984.html
Copyright © 2011-2022 走看看