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

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




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








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 customersLists = new List();
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

具体的效果,大家可以把上述的代码响应的复制到VS中和数据库中,进行演示。
这个版本其实很多的功能点都是没有考虑到的,仅仅是个示例,大家可以在自己的实际项目中修改以上的功能来满足自己的需求。

你可能感兴趣的:(AJAX分页的代码(后台asp.net))