AJAX paging code (backend asp.net)_jquery

There are many data display controls in ASP.NET, such as the most commonly used GridView, which also has its own paging function. But we know that using GridView to display data, if ViewState is not disabled, the page size will be very large. And usually when we click on the homepage, next page, previous page, and last page, these functions will cause page postback, which means that we need to completely interact with the server. The response time and the amount of data transmitted are very large. . AJAX paging can solve these problems very well.
The development environment is: jQuery AJAX Northwind.
Specific steps:
SearchCustomer.aspx:

Copy code The code is as follows:

JSON format for data transmission. Everyone knows that JSON is a lightweight data transmission. The table used for front-end display. The HTML code generated in this way is very concise.
The HTML is as follows:

Copy code The code is as follows:

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中和数据库中，进行演示。
这个版本其实很多的功能点都是没有考虑到的，仅仅是个示例，大家可以在自己的实际项目中修改以上的功能来满足自己的需求。