AJAX分页的代码(后台asp.net)

228 阅读 0 评论 151 点赞

我是靠谱客的博主忐忑柜子，最近开发中收集的这篇文章主要介绍AJAX分页的代码(后台asp.net)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在ASP.NET 中有很多数据展现的控件，比如用的最多的GridView，它同时也自带了分页的功能。但是我们知道用GridView来显示数据，如果没有禁用ViewState，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。AJAX的分页可以很好的解决这些问题。
开发的坏境是：jQuery AJAX+Northwind。
具体的步骤：
SearchCustomer.aspx:

复制代码代码如下:

 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var pageIndex = 0; 
var pageSize = 10; 
$(function () { 
$("#btnSearch").click(function () { 
/* 
name 顾客的名字, 文本框中输入的内容 
0 表示的是第1页 
10 每页的大小 
*/ 
var name = $("#txtSearch").val(); 
pageIndex = 0; 
AjaxGetData(name, pageIndex, pageSize); 
}); 
}); 
function AjaxGetData(name, index, size) { 
$.ajax({ 
url: "jQueryPaging.aspx", 
type: "Get", 
data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size, 
dataType: "json", 
success: function (data) { 
var htmlStr = ""; 
htmlStr += "<table>" 
htmlStr += "<thead>" 
htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>" 
htmlStr += "</thead>"; 
htmlStr += "<tbody>" 
for (var i = 0; i < data.Customers.length; i++) { 
htmlStr += "<tr>"; 
htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>" 
+ "<td>" + data.Customers[i].CompanyName + "</td>" 
+ "<td>" + data.Customers[i].ContactName + "</td>" 
+ "<td>" + data.Customers[i].ContactTitle + "</td>" 
+ "<td>" + data.Customers[i].Address + "</td>" 
+ "<td>" + data.Customers[i].City + "</td>" 
htmlStr += "</tr>"; 
} 
htmlStr += "</tbody>"; 
htmlStr += "<tfoot>"; 
htmlStr += "<tr>"; 
htmlStr += "<td colspan='6'>"; 
htmlStr += "<span>共有记录" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>页" + "</span>"; 
htmlStr += "<a href='javascript：void' onclick='GoToFirstPage()' id='aFirstPage' >首 页</a>   "; 
htmlStr += "<a href='javascript：void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>   "; 
htmlStr += "<a href='javascript：void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>   "; 
htmlStr += "<a href='javascript：void' onclick='GoToEndPage()' id='aEndPage' >尾 页</a>   "; 
htmlStr += "<input type='text' /><input type='button' value='跳转' onclick='GoToAppointPage(this)' /> "; 
htmlStr += "</td>"; 
htmlStr += "</tr>"; 
htmlStr += "</tfoot>"; 
htmlStr += "</table>"; 
$("#divSearchResult").html(htmlStr); 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest); 
alert(textStatus); 
alert(errorThrown); 
} 
}); 
} 
//首页 
function GoToFirstPage() { 
pageIndex = 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//前一页 
function GoToPrePage() { 
pageIndex -= 1; 
pageIndex = pageIndex >= 0 ? pageIndex : 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//后一页 
function GoToNextPage() { 
if (pageIndex + 1 < parseInt($("#count").text())) { 
pageIndex += 1; 
} 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//尾页 
function GoToEndPage() { 
pageIndex = parseInt($("#count").text()) - 1; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//跳转 
function GoToAppointPage(e) { 
var page = $(e).prev().val(); 
if (isNaN(page)) { 
alert("请输入数字!"); 
} 
else { 
var tempPageIndex = pageIndex; 
pageIndex = parseInt($(e).prev().val())-1; 
if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) { 
pageIndex = tempPageIndex; 
alert("请输入有效的页面范围!"); 
} 
else { 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
} 
} 
</script> 

数据的传输用的JSON格式。大家知道JSON是轻量级别的数据传输。前台的展现时用的table。这样生成的HTML代码很简洁。
HTML如下：

复制代码代码如下:

 
<div> 
<input type="text" id="txtSearch" /> 
<input type="button" id="btnSearch" value="Search" /> 
</div> 
<div id="divSearchResult"> 
</div> 

jQueryPaging.aspx页面的CS代码如下：

复制代码代码如下:

 
public partial class jQueryPaging : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
Int32 pageIndex=Int32.MinValue; 
Int32 pageSize=Int32.MinValue; 
String name=String.Empty; 
JavaScriptSerializer jss=new JavaScriptSerializer(); 
if(Request["Name"]!=null) 
{ 
name=Request["Name"].ToString(); 
if (Request["PageIndex"] != null) 
{ 
pageIndex = Int32.Parse(Request["PageIndex"].ToString()); 
pageSize = Request["PageSize"] != null ? Int32.Parse(Request["PageSize"].ToString()) : 10; 
IList<Customer> customersLists = new List<Customer>(); 
Customer c = null; 
DataSet ds= LookDataFromDB(name,pageIndex,pageSize); 
foreach (DataRow row in ds.Tables[0].Rows) 
{ 
c = new Customer(); 
c.CustomerID = row["CustomerID"].ToString(); 
c.CompanyName = row["CompanyName"].ToString(); 
c.ContactName = row["ContactName"].ToString(); 
c.ContactTitle = row["ContactTitle"].ToString(); 
c.Address = row["Address"].ToString(); 
c.City = row["City"].ToString(); 
customersLists.Add(c); 
} 
if (customersLists.Count>0) 
{ 
Response.Write("{"Count":"+ds.Tables[1].Rows[0][0]+","Customers":"+jss.Serialize(customersLists)+"}"); 
Response.End(); 
} 
} 
} 
} 
private DataSet LookDataFromDB(string name, int pageIndex, int pageSize) 
{ 
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString); 
conn.Open(); 
SqlCommand cmd = new SqlCommand(); 
cmd.Connection = conn; 
cmd.CommandType = CommandType.StoredProcedure; 
cmd.CommandText = "SearchCustomerByName"; 
cmd.Parameters.Add(new SqlParameter("@name",name)); 
cmd.Parameters.Add(new SqlParameter("@pageIndex",pageIndex)); 
cmd.Parameters.Add(new SqlParameter("@pageSize", pageSize)); 
SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd); 
DataSet ds = new DataSet(); 
try 
{ 
dataAdapter.Fill(ds); 
} 
catch (Exception) 
{ 
} 
finally 
{ 
if (dataAdapter != null) 
{ 
dataAdapter.Dispose(); 
} 
if (cmd != null) 
{ 
cmd.Dispose(); 
} 
if (conn != null) 
{ 
conn.Dispose(); 
} 
} 
return ds; 
} 
} 

还有我们在CS中定义的Model类：

复制代码代码如下:

 
public class Customer 
{ 
public String CustomerID { get; set; } 
public String CompanyName { get; set; } 
public String ContactName { get;set;} 
public String ContactTitle { get; set; } 
public String Address { get; set; } 
public String City { get; set; } 
} 
SearchCustomerByName 存储过程的代码如下： 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
Create PROCEDURE SearchCustomerByName 
@name nvarchar(30), 
@pageIndex int, 
@pageSize int 
AS 
BEGIN 
SET NOCOUNT ON; 
select t.CustomerID,t.CompanyName,t.ContactName,t.ContactTitle,t.Address,t.City from 
( 
select Row_Number() over (order by CustomerID) AS RowNum,* from Customers where ContactName like '%'+@name+'%' 
) t 
where t.RowNum between @pageIndex*10+1 and (@pageIndex+1)*10 
select count(*) from Customers 
where ContactName like '%'+@name+'%' 
END 
GO 