您的位置：首页 > 编程语言 > ASP

Ajax + Asp.net + SqlServer 实现分页

2007-09-27 20:22 579 查看

分页,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();

}

}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航