ajax+asp.net+sqlserver多方式分页
2007-10-25 13:05
375 查看
分页,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();
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯ajax+asp.net+sqlserver多方式分页 .
- 纯ajax+asp.net+sqlserver多方式分页
- 纯ajax+asp.net+sqlserver多方式分页
- Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览
- Ajax + Asp.net + SqlServer 实现分页
- Jquery+Ajax+asp.net+sqlserver-编写的通用邮件管理(有源码)
- asp.net+ajax+sqlserver自动补全功能实现解析
- Jquery+Ajax+asp.net+sqlserver-编写的通用邮件管理(有源码)
- ASP.Net + SQL Server 存储过程实现分页排序
- 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)
- asp.net+ajax+sqlserver自动补全功能实现解析
- 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)
- asp.net + ajax + sqlserver 自动补全功能
- Jquery+Ajax+asp.net+sqlserver-编写的通用邮件管理(源码)
- 【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。
- asp.net 分页类库，支持sql和oracle存储过程
- ASP.NET获取MS SQL Server安装实例实现思路及代码
- 用asp.net在线备份SQL-Server数据库
- sql分页存储过程！与asp.net分页控件一起使用
- ASP.NET MVC 5 - 创建连接字符串(Connection String)并使用SQL Server LocalDB