纯ajax+asp.net+sqlserver多方式分页 .

分页,WEB程序中最常见的应用。现在很多网站也采了AJAX分页的方法。真的会提高分页速度嘛?我看,不一定,但给用户更好的视觉感,这是肯定的。。本想找在网上找个源码好好学习一下,这样也可以少走一些弯路。无耐找了一上午也没有找合意的。。。大部分是使用了第三方控件。 要么就是一些讲原理的..唉..还自己动手吧..自己动手,丰衣足食.呵呵...从找到的资料中总结了一下,AJAX分页大概有三种实现方式有(1)直接绑定Gridview,(2)输出xml,(3)输出JSON,首先我也采用GridView绑定,直接输出,这样做客户端JS代码也不要做太多事情,获取输出取直接加载到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>&nbsp;
<span id="PageCurren"></span>&nbsp;
<span><href="javascript:GotoPage('a');">首页</a></span>&nbsp;
<span><href="javascript:GotoPage('pre');">上一页</a></span>&nbsp;
<span><href="javascript:GotoPage('next');">下一页</a></span>&nbsp;
<span><href="javascript:GotoPage('z');">末页</a></span>&nbsp;
<span id="selectarea"></span>&nbsp;
<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 @ 2012-05-20 23:51  小锋神  阅读(1315)  评论(0编辑  收藏  举报