Ajax + Asp.net + SqlServer 实现分页

分页,WEB程序中最常见的应用。现在很多网站也采了AJAX分页的方法。真的会提高分页速度嘛？我看，不一定，但给用户更好的视觉感，这是肯定的。。本想找在网上找个源码好好学习一下，这样也可以少走一些弯路。无耐找了一上午也没有找合意的。。。大部分是使用了第三方控件。要么就是一些讲原理的．．唉．．还自己动手吧．．自己动手，丰衣足食．呵呵．．．从找到的资料中总结了一下，AJAX分页大概有三种实现方式有(1)直接绑定Gridview，(2)输出xml，(3)输出JSON，首先我也采用GridView绑定，直接输出，这样做客户端ＪＳ代码也不要做太多事情，获取输出取直接加载到DIV标签中就是呢。这样做简单是简单，但在练习中遇到一个问题那就是总页码怎么传递过去，再者返回的东西太多，不如返回XML,JSON简洁。这样是否会影响传输速度呢？我也凝惑，还需要高人指点。XML与JSON两种格式，我采用了JSON。JSON比XML更简洁，传输速度更快。对于这样不复杂的数据JSON完全够用呢。

JSON:简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。
JSON参考文章：http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/

效果图

1、创建显示页面PageShowAjax.aspx
主要函数：
createXMLHttpRequest()
创建XMLHttpRequest对象

GotoPage(actiontmp)
actiontmp分页动作
GotoPage()获取页码，异步调用CreatePageAjax。CreatePageAjax根据页码，查询数据表，返回JSON格式字符串。

function CreateTable()
CreateData()获取CreatePageAjax 返回的数据，CreateTable解析返回的JSON字符串，生成表格

function CreateData()
获取CreatePageAjax返回的JSON字符串，调用CreateTable() 生成表格。并加载到DIV标签中。

详细代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
         body { line-height:20px; font-size:12px; background:#ffffff;color:#069;}
         a:link{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;}
         a:visited{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;bgckground:#CCC}
         a:hover{padding 2px 0px 0px 2px;line-height:18px;color:#069;text-decoration:none;background:#FFFF99;}
         table{
          border:1px   solid   #000000;
          background:#f8f8ff;
           hrong:expression(this.cellSpacing=1);

         }


         .tr_head{
         background:#ffffe0;

         }
         .tr_one{
         background:#fffafa;
         }
         .tr_two{
         background:#f8f8ff;
         }
          tr{
           background:#ffffff;
           bencalie:expression(this.onmouseover=function(){this.style.background='#FFFF99';this.style.cursor='pointer'});
           bencalie1:expression(this.onmouseout=function(){this.style.background='#ffffff'})
           }

    </style>
<script type="text/javascript" src="JS/json.js"></script>
<script language=javascript type="text/javascript">
// <!CDATA[
var PageCurrenNO;
var PageCount;
var actiontmp;
var ShowID;
var xmlHttp;
var ShowTalbe;
var Rowset;
var MaxPageNO;
var n;

//创建对象
function createXMLHttpRequest()
{

    var isRight = true;
    try{ xmlHttp = new XMLHttpRequest(); }
    catch(trymicrosoft)
    {
        try{xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");}
        catch(othermicrosoft)
        {
            try{xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");}
            catch(failed)
            {
                isRight = false;
            }
        }
    }
    if(!isRight)
      alert("XML对象创建失败");
}

//分页
function GotoPage(actiontmp)
{
    PageCurrenNO = document.getElementById("PageCurren").innerText;
    MaxPageNO = document.getElementById("PageCount").innerText;

    if(PageCurrenNO=="" || PageCurrenNO==null)
    {
        PageCurrenNO = 1;
    }
    if(PageCurrenNO==1&&actiontmp=="pre")
    {
       alert("以经是第一页");
       return;
    }
    if(PageCurrenNO==MaxPageNO&&actiontmp=="next")
    {
       alert("以经是最后一页");
       return;
    }
    if(actiontmp=="go")
    {
        n = document.getElementById("govalue").value;
        if(n>MaxPageNO)
        {
          alert("不能超过最大页");
          return;
        }
        var reg  = /(^[1-9]{1}[0-9]{0,}$)/;
        if(!reg.test(n))
        {
           alert("输入数字不是有效页码请重新输入");
           return;
        }
    }

    ShowID = document.getElementById("M1_0");
    ShowID.innerHTML="正在载入......";
    //创建xmlHttp对象
    createXMLHttpRequest()
    //第一页
    if(actiontmp=="a")
    {
         n =1;
        document.getElementById("PageCurren").innerText="1";
        url = "CreatePageAjax.aspx?PageNo=1";
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //最后一页
    if(actiontmp=="z")
    {
        n = MaxPageNO;
        url = "CreatePageAjax.aspx?PageNo="+MaxPageNO;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //上一页
    if(actiontmp=="pre")
    {
        n = parseInt(PageCurrenNO)-parseInt(1);
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //下一页
    if(actiontmp=="next")
    {
        n =  parseInt(PageCurrenNO)+parseInt(1);
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange = CreateData;
        xmlHttp.send(null);
    }
    //下拉框选择跳转
    if(actiontmp=="pagechange")
    {
        var thisobj = document.getElementById("svalue");
        n = thisobj.options(thisobj.selectedIndex).value;
        url = "CreatePageAjax.aspx?PageNo="+n;
        xmlHttp.open("GET",url,true);
        xmlHttp.onreadystatechange=CreateData;
        xmlHttp.send(null);
    }
    //输入数字跳转
    if(actiontmp=="go")
    {
        n = document.getElementById("govalue").value;
        var reg  = /(^[1-9]{1}[0-9]{0,}$)/;
        if(reg.test(n))
        {
           url = "CreatePageAjax.aspx?PageNo="+n;
           xmlHttp.open("GET",url,true);
           xmlHttp.onreadystatechange = CreateData;
           xmlHttp.send(null);
        }
        else
        {
           alert("输入数字不是有效页码请重新输入");
           return;
        }
    }
    //生成下拉列表
    CreateSelect();
    //改变所有控件当前页码值
    ChangePageVaue();
}

//创健数据
function CreateData()
{
    if(xmlHttp.readyState=="4")
      if(xmlHttp.status=="200")
      {
        //ShowID.innerHTML=

        Rowset = xmlHttp.responseText;
        //转换成JSON格式
        Rowset = Rowset.parseJSON();
        //创退表格
        CreateTable();
        ShowID.innerHTML=ShowTalbe;
       }
       else
       {
            ShowID.innerHTML="数据读取错误"+xmlHttp.status;
       }
  }
  //创建表格
  function CreateTable()
  {
     //获取最大页
      document.getElementById("PageCount").innerText = Rowset.PageInfo[0].PageCount;
      MaxPageNO = Rowset.PageInfo[0].PageCount;
     //获取当前页
      document.getElementById("PageCurren").innerText =  Rowset.PageInfo[0].PageNo;
     //获取显示记录条数
     var m = parseInt(Rowset.PageInfo[0].ShowRows);
     ShowTalbe = "<table>";
     var ID;
     var FirstName;
     var LastName;
     var Country;
     var Note;
     var ClasName;
     ClasName = "tr_head"
     ShowTalbe = ShowTalbe +"<tr class='"+ClasName+"'><td>ID</td><td>FirstName</td><td>LastName</td><td>LastName</td><td>Country</td><td>Note</td></tr>";
     for(var i=0;i<m;i++)
     {
        ID        = Rowset.RecordList[i].ID;
        FirstName = Rowset.RecordList[i].FirstName;
        LastName  = Rowset.RecordList[i].LastName;
        Country   = Rowset.RecordList[i].Country;
        Note      = Rowset.RecordList[i].Note;

        ShowTalbe = ShowTalbe +"<tr ><td>"+ID+"</td><td>"+FirstName+"</td><td>"+LastName+"</td><td>"+LastName+"</td><td>"+Country+"</td><td>"+Note+"</td></tr>";
     }
     ShowTalbe = ShowTalbe+"</table>";
}
//生成页码下拉列表
function CreateSelect()
{
    var valuetmp = document.getElementById("selectarea").innerText;
    if(valuetmp==null||valuetmp=="")
    {
        var str = "<select id="svalue" onchange="GotoPage('pagechange');">"
        for(var j=1;j<50;j++)
       {
          str = str+"<option value='"+j+"'>"+j+"</option>";
       }
       str = str + "</select>"
      document.getElementById("selectarea").innerHTML =  str;
      //alert(str);
        //function add(){
        //var s=document.getElementById("lbxAccepter");
        //var n=hid.value;
        //hid.value=parseInt(n)+1;
       //var op=new Option(n,n);
       //s.add(op);
    }
}
//改变所有控件当前页码值
function ChangePageVaue()
{
     document.getElementById("govalue").value=n;
     if(n<50)
     {
        var thisobj = document.getElementById("svalue");
        var mm = parseInt(n)-1;
        thisobj.options[mm].selected = true;
     }
}
// ]]>
</script>

</head>
<body onload="GotoPage('a')">
<div id="M1_0"></div>
共<span id="PageCount"></span>页 
第<span id="PageCurren"></span>页 
<span><a href="javascript:GotoPage('a');">首页</a></span> 
<span><a href="javascript:GotoPage('pre');">上一页</a></span> 
<span><a href="javascript:GotoPage('next');">下一页</a></span> 
<span><a href="javascript:GotoPage('z');">末页</a></span> 
<span id="selectarea"></span> 
<span>
   <input id="govalue" type=text maxlength="6"  size="5" value="1"/>
   <input type=button value="go" onclick="GotoPage('go')"/>
</span>
</body>
</html>

CreatePageAjax.aspx只有两句

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreatePageAjax.aspx.cs" Inherits="CreatePageAjax" %>
<%@ OutputCache Duration="60" VaryByParam="PageNo" %>

CreatePageAjax.aspx.cs
根据获取到的页码，查询相关数据。并转换成JSON类型字符串输出。

// (c) Copyright XXXXXXX Corporation.
// 多方式AJAX分页
// See
// Email:alphacn@126.com
// MSN  :cyulicn@hotmail.com
// 2007.9.25 Alpha

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Data.SqlClient;
using System.Text;
using System.Xml;

/// <summary>
/// 根据页码读取本页内容
/// </summary>
public partial class CreatePageAjax : System.Web.UI.Page
{
    //当前页码
    private int PageNo;
    //当前页临时量
    private string PageNoTemp;
    //总页数
    private int PageCount;
    //总记录数
    private int ShowNumbers;
    //每页显示的条数
    private int ShowRows=20;
    //查询SQL语句
    private string SqlStr;
    //开始条数
    private int StartRows;
    //总页数缓存变量
    object o;

    /// <summary>
    ///
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        //获取当然页码
        PageNoTemp = Request.QueryString["PageNo"];
        //PageNoTemp为空默认为第一页
        if (PageNoTemp == null || PageNoTemp == "")
        {
            PageNo = 1;
        }
        else
        {
            PageNo = int.Parse(PageNoTemp);
        }
        //总页数缓存变量
        o = ViewState["PageCount"];

        using(SqlConnection Conn = new SqlConnection("server=.;database=PubData;uid=sa;pwd=123456"))
        {
            //打开数据库链接
            Conn.Open();
            //o为空表示该用户第一次访问，需要统计总页数
            if (o == null)
            {
                SqlStr = "select count(ID) from TestTable";
                SqlCommand cmd3 = new SqlCommand(SqlStr, Conn);
                SqlDataReader  dr = cmd3.ExecuteReader();
                dr.Read();
                ShowNumbers = int.Parse(dr[0].ToString());
                if(ShowNumbers % ShowRows>0)
                {
                    PageCount = (ShowNumbers / ShowRows) + 1;
                }
                else
                {
                    PageCount =  ShowNumbers / ShowRows;
                }
                ViewState["PageCount"] = PageCount;
                dr.Close();
            }
            //从ViewState["PageCount"]中获取总页数
            PageCount = int.Parse(ViewState["PageCount"].ToString());
            //计算开始条数
            StartRows = (this.PageNo - 1) * this.ShowRows;

            SqlStr = "select top " + ShowRows + " *  from  TestTable where ID not in(select top " + StartRows + " ID  from  TestTable order by ID desc)";
            //使用GridView传输
            //SqlDataAdapter Da = new SqlDataAdapter(SqlStr, Conn);
            //DataSet Ds = new DataSet();
            //Da.Fill(Ds, "DsTest");
            //GridView1.DataSource = Ds.Tables["DsTest"].DefaultView;
            //GridView1.DataBind();
            SqlCommand cmd = new SqlCommand(SqlStr, Conn);
            //用XML转输
            // System.Xml.XmlReader reader = cmd.ExecuteXmlReader();
            SqlDataReader reader = cmd.ExecuteReader();
            System.Text.StringBuilder sb = new StringBuilder();
            int n = 0;
            //将记录信息生成JSON格式
            sb.Append("{"RecordList":[");
            while (reader.Read())
            {
                sb.Append("{");
                sb.Append(" "ID":""+reader[0]+"",");
                sb.Append(" "FirstName":"" + reader[1] + "",");
                sb.Append(" "LastName":"" + reader[2] + "",");
                sb.Append(" "Country":"" + reader[3] + "",");
                sb.Append(" "Note":"" + reader[4] + """);
                sb.Append("},");
                n = n + 1;
            }
            sb.Append("],");
            sb.Append(""PageInfo":[{"PageCount":"" + ViewState["PageCount"] + "","PageNo":"" + PageNo + "","ShowRows":"" + n.ToString() + ""}]");
            sb.Append("}");
            reader.Close();
            //输出JSON变量
            Response.Write(sb.ToString());
            //Response.End();
        }
    }
}

posted on 2007-09-27 20:22 leup 阅读(426) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

木子三寿