现在的位置: 首页 > 综合 > 正文

.net用ajax技术实现无刷新分页(初学)

2012年04月27日 ⁄ 综合 ⁄ 共 10324字 ⁄ 字号 评论关闭
 在.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多方法的。

抱歉!评论已关闭.