.net用ajax技術實現無重新整理分頁(初學)

 在.net中要想實現無重新整理分頁，其實有很多方案。我所寫的這個執行個體主要是運用ajax的原理，來實現無重新整理分頁（其實我不認為這個方案完全運用了ajax技術）。
      在這裡我們將用預存程序實現資料的分頁，代碼如下：

----胡耀華 2007.4.4
set ANSI_NULLS ON
set QUOTED_IDENTIFIER ON
go

 

ALTER PROCEDURE [dbo].[PageCut]
@strGetFields varchar(1000) = '*', -- 需要返回的列
@fldName varchar(255)='', -- 排序的欄位名
@PageSize int = 10, -- 頁尺寸
@PageIndex int = 1, -- 頁碼
@strWhere varchar(1500) = '' ,-- 查詢條件 (注意: 不要加 where)
@Counts  int  out -- 返回記錄總數, 非 0 值則返回 這裡作運行後返回的記錄總數分頁用
AS
set nocount on
declare @strSQL varchar(5000) -- 主語句
declare @CountSQL nVarchar(4000)
declare @strTmp varchar(110) -- 臨時變數
declare @strOrder varchar(400) -- 排序類型

if @PageIndex = 1
begin
if @strWhere != ''
set @strSQL = 'select top ' + str(@PageSize) +@strGetFields+ ' from  TestTable where ' + @strWhere + ' ' +  ' order by [' + @fldName +'] desc' 

else
set @strSQL = 'select top ' + str(@PageSize) +@strGetFields+ ' from  TestTable '+  ' order by [' + @fldName +'] desc' 
--如果是第一頁就執行以上代碼，這樣會加快執行速度
end

else
begin
--以下代碼賦予了@strSQL以真正執行的SQL代碼
--set @strTmp = '<(select min'
set @strSQL = 'select top ' + str(@PageSize) +@strGetFields+ ' from TestTable where [' + @fldName + ']' + '<(select min'+ '(['+ @fldName + ']) from (select top ' + str((@PageIndex-1)*@PageSize) + ' ['+ @fldName + '] from TestTable ' + ' order by [' + @fldName +'] desc'+ ') as tblTmp)'+  ' order by [' + @fldName +'] desc' 
if @strWhere != ''
set @strSQL = 'select top ' + str(@PageSize) +' '+@strGetFields+ ' from TestTable where [' + @fldName + ']' + '<(select min' + '([' + @fldName + ']) from (select top ' + str((@PageIndex-1)*@PageSize) + ' [' + @fldName + '] from  TestTable  where ' + @strWhere + ' order by [' + @fldName +'] desc' + ') as tblTmp) and ' + @strWhere + ' ' +  ' order by [' + @fldName +'] desc' 

 end

if @strWhere != ''
set @CountSQL='select  @Counts=count(*) from  TestTable  where ' + @strWhere +''
else
set @CountSQL='select  @Counts=count(*) from  TestTable  '

exec sp_executesql @CountSQL, N'@Counts int out ',@Counts out
exec ( @strSQL)
set nocount off

 

這個是我根據現在網上所收集通用預存程序所改寫的，效率不錯適合百萬級資料的分頁。
   那下一步。我們先建立一個web項目，建立一個資料庫連接類db.cs，代碼如下：

using System;
using System.Data;
using System.Configuration;
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;

/// <summary>
/// db 的摘要說明
/// </summary>
public class db
{
 public db()
 {
  //
  // TODO: 在此處添加建構函式邏輯
  //
 }
    //public SqlConnection Conn()
    //{

    //    SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString);//串連資料庫
    //    return conn;
    //}

//返回DATASET
    public static DataSet sta()
    {
        DataSet ds = new DataSet();
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString);//串連資料庫
        conn.Open();
        //SqlCommand com = new SqlCommand("PageCut", conn);   com.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter MyCommand = new SqlDataAdapter("PageCut", conn);
        //SqlDataReader dbr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        MyCommand.SelectCommand.CommandType = CommandType.StoredProcedure;

   SqlParameter strGetFields = new SqlParameter("@strGetFields",SqlDbType.VarChar);
   strGetFields. = "*";//欄位
   MyCommand.SelectCommand.Parameters.Add(strGetFields);

   SqlParameter fldName = new SqlParameter("@fldName",SqlDbType.VarChar);
   fldName. = "id";//排序欄位
   MyCommand.SelectCommand.Parameters.Add(fldName);

   SqlParameter PageSize = new SqlParameter("@PageSize",SqlDbType.Int);
   PageSize. = 10;//每頁大小
   MyCommand.SelectCommand.Parameters.Add(PageSize);

   SqlParameter PageIndex = new SqlParameter("@PageIndex",SqlDbType.Int);
   PageIndex. =1;//當前頁
   MyCommand.SelectCommand.Parameters.Add(PageIndex);

   SqlParameter strWhere = new SqlParameter("@strWhere",SqlDbType.VarChar);
   strWhere. = "";//條件
   MyCommand.SelectCommand.Parameters.Add(strWhere);

   SqlParameter Counts = new SqlParameter("@Counts",SqlDbType.Int);
   Counts. = 1;//總記錄數
   Counts.Direction = ParameterDirection.Output;//因為這裡要返回,所以要設定一下,返回計算過後的結果
   MyCommand.SelectCommand.Parameters.Add(Counts);
   MyCommand.Fill(ds);
   return ds;

   }
    public static SqlDataAdapter dt(int Pagesize)
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString);//串連資料庫
        conn.Open();
        //SqlCommand com = new SqlCommand("PageCut", conn);   com.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter MyCommand = new SqlDataAdapter("PageCut", conn);
        //SqlDataReader dbr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        MyCommand.SelectCommand.CommandType = CommandType.StoredProcedure;

        SqlParameter strGetFields = new SqlParameter("@strGetFields", SqlDbType.VarChar);
        strGetFields. = "*";//欄位
        MyCommand.SelectCommand.Parameters.Add(strGetFields);

        SqlParameter fldName = new SqlParameter("@fldName", SqlDbType.VarChar);
        fldName. = "id";//排序欄位
        MyCommand.SelectCommand.Parameters.Add(fldName);

        SqlParameter PageSize = new SqlParameter("@PageSize", SqlDbType.Int);
        PageSize. = 10;//每頁大小
        MyCommand.SelectCommand.Parameters.Add(PageSize);

        SqlParameter PageIndex = new SqlParameter("@PageIndex", SqlDbType.Int);
        PageIndex. = Pagesize;//當前頁
        MyCommand.SelectCommand.Parameters.Add(PageIndex);

        SqlParameter strWhere = new SqlParameter("@strWhere", SqlDbType.VarChar);
        strWhere. = "";//條件
        MyCommand.SelectCommand.Parameters.Add(strWhere);

        SqlParameter Counts = new SqlParameter("@Counts", SqlDbType.Int);
        Counts. = 1;//總記錄數
        Counts.Direction = ParameterDirection.Output;//因為這裡要返回,所以要設定一下,返回計算過後的結果
        MyCommand.SelectCommand.Parameters.Add(Counts);
        conn.Close();
        return MyCommand;

    }

    public static SqlDataReader sdr(int Pagesize)
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString);//串連資料庫
        conn.Open();
        SqlCommand com = new SqlCommand("PageCut", conn); 
        com.CommandType = CommandType.StoredProcedure;
       
        SqlParameter strGetFields = new SqlParameter("@strGetFields", SqlDbType.VarChar);
        strGetFields. = "*";//欄位
        com.Parameters.Add(strGetFields);

        SqlParameter fldName = new SqlParameter("@fldName", SqlDbType.VarChar);
        fldName. = "id";//排序欄位
        com.Parameters.Add(fldName);

        SqlParameter PageSize = new SqlParameter("@PageSize", SqlDbType.Int);
        PageSize. = 10;//每頁大小
        com.Parameters.Add(PageSize);

        SqlParameter PageIndex = new SqlParameter("@PageIndex", SqlDbType.Int);
        PageIndex. = Pagesize;//當前頁
        com.Parameters.Add(PageIndex);

        SqlParameter strWhere = new SqlParameter("@strWhere", SqlDbType.VarChar);
        strWhere. = "";//條件
        com.Parameters.Add(strWhere);

        SqlParameter Counts = new SqlParameter("@Counts", SqlDbType.Int);
        Counts. = 1;//總記錄數
        Counts.Direction = ParameterDirection.Output;//因為這裡要返回,所以要設定一下,返回計算過後的結果
        com.Parameters.Add(Counts);
        SqlDataReader sdr =com.ExecuteReader();
        return sdr;

    }

    public static SqlDataReader sdr()
    {
        throw new Exception("The method or operation is not implemented.");
    }
}

建立一個.aspx頁（Default.aspx）調用db.cs類：

public partial class _Default : System.Web.UI.Page
{
    db db = new db();
    public string qq;
    public int pageze=1;
    public int temp;
    protected void Page_Load(object sender, EventArgs e)
    {
         
        if (!IsPostBack)
        {
            getveiw(1);
        
        
            next();
          
        }
     

    }
   // public override void VerifyRenderingInServerForm(Control control)
   // {

        // Confirms that an HtmlForm control is rendered for

   // }
    public void next()
    {

    if (Request.QueryString["next"] == "next")
        {
            temp = Convert.ToInt32(Request.QueryString["name"]);
            getveiw(temp);
         
        }
      
    }

    public void getveiw(int pagesize)
    {
        SqlDataAdapter sta = db.dt(pagesize);
        DataSet ds=new DataSet();
        sta.Fill(ds);
        GridView1.DataSource=ds;
        this.GridView1.DataBind();
       
   
    }

在這裡為了方便我們姑且用gridview來綁定資料（我們也可以將資料以XML文檔儲存）。建立一個HTML新頁（HTMLPage.htm）用AJAX技術調用.aspx頁。XMLHttpRequest提供了兩個用來訪問伺服器響應的屬性：responseText和responseXML。在這裡由於我運用gridview儲存資料。所以我們運用responseText屬性（它返回的是一個串，即html串）。假如我們運用XML來儲存資料的話，那我們應該用responseXML屬性了。好了.html的代碼如下：

<!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>
    <title>無標題頁</title>
    < type="text/java">
   var xmlHttp

   var page
        crrate()
        {
 if(ActiveXObject){
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (XMLHttpRequest){
 xmlHttp=new XMLHttpRequest();
 }
  }
//初始化為第一頁
        star()
        {page=1;
        crrate()
        xmlHttp.onreadystatechange=stateChanged;
         xmlHttp.open("GET","Default.aspx",true)
                xmlHttp.send(null) 
         }
//下一頁
     next()
       {page=page+1
       str= getElementById("Text1").;
        getElementById("txtHint").innerHTML="";
       var url="Default.aspx?next=next&name="+page;
        crrate();
     xmlHttp.onreadystatechange=stateChanged;
          xmlHttp.open("GET",url,true);
      xmlHttp.send(null)
       }
//跳轉到某一頁
        go()
       {
       str= getElementById("Text1").;
       page=str;
        getElementById("txtHint").innerHTML="";
       var url="Default.aspx?next=next&name="+page;
        crrate();
     xmlHttp.onreadystatechange=stateChanged;
          xmlHttp.open("GET",url,true);
      xmlHttp.send(null)
       }
//上一頁
          prve()
          {
          page=page-1
       str= getElementById("Text1").;
        getElementById("txtHint").innerHTML="";
       var url="Default.aspx?next=next&name="+page;
        crrate();
     xmlHttp.onreadystatechange=stateChanged;
          xmlHttp.open("GET",url,true);
      xmlHttp.send(null)
         
          }
//解析伺服器響應提供的串
       stateChanged()
        {
            if (xmlHttp.readyState==4)
            {if(xmlHttp.status==200){
                getElementById("txtHint").innerHTML=xmlHttp.responseText;
                }
            }
        }
       setInterval('star()');
     </>
</head>
<body>
<div id="txtHint"></div>
</body>
<input id="Text1" type="text" style="width:20px"/><input id="Button3" type="button"
    ="go"  ="go()"/><input id="Button1" type="button" ="下一頁" ="next()"/><input
    id="Button2" type="button" ="上一頁" ="prve()" />
</html>

代碼說明（關於ajax的知識點我就不細說了）：url="Default.aspx?next=next&name="+page;將next=next&name="+page傳給.aspx頁其中page是要顯示的頁碼。.aspx頁接收後將運行：  if (Request.QueryString["next"] == "next")
        {
            temp = Convert.ToInt32(Request.QueryString["name"]);
            getveiw(temp);
         
}語句很簡單。

這樣一個簡單的無重新整理分頁的執行個體就完成了。由於本人的JS水平有限，現在只能做到這了。當然還可以添加一些新的功能。這裡我只是想將我的方法與大家分享。至於功能，待以後繼續完善了！！！

ps:在網上還有很多方法。方法之一是將GRIDVIEW解析，運用它自身的分頁技術來實現具體方法參閱：http://zfnh2002.bokee.com/viewdiary.12243206.html。此方法不適用因為GRIDVIEW自身的分頁是將資料都取出後再分頁，效率顯然很低。還有一種方法是用.net的ajax架構（ajax.net或alax）來實現無重新整理分頁。這種方法最好，具體從baidu上搜一下會有N多方法的。