AJAX分页

查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。

在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<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

具体的效果，大家可以把上述的代码响应的复制到VS中和数据库中，进行演示。

这个版本其实很多的功能点都是没有考虑到的，仅仅是个示例，大家可以在自己的实际项目中修改以上的功能来满足自己的需求。

posted @ 2011-02-14 20:37 chenping2008 阅读(20291) 评论(2) 编辑收藏举报

刷新页面返回顶部

AJAX分页

公告