AJAX 페이징 코드(백엔드 asp.net)_jquery

ASP.NET에는 자체 페이징 기능이 있는 가장 일반적으로 사용되는 GridView와 같은 많은 데이터 표시 컨트롤이 있습니다. 그러나 GridView를 사용하여 데이터를 표시할 때 ViewState가 비활성화되지 않으면 페이지 크기가 매우 커질 것이라는 것을 알고 있습니다. 그리고 일반적으로 홈페이지, 다음 페이지, 이전 페이지, 마지막 페이지를 클릭하면 이러한 기능으로 인해 페이지 포스트백이 발생하므로 서버와 완전히 상호 작용해야 하며, 응답 시간과 전송되는 데이터의 양이 매우 큽니다. . AJAX 페이징은 이러한 문제를 매우 잘 해결할 수 있습니다.
개발 환경은 jQuery AJAX Northwind입니다.
구체적인 단계:
SearchCustomer.aspx:

코드 복사 코드는 다음과 같습니다.

데이터 전송을 위한 JSON 형식입니다. JSON이 경량 데이터 전송이라는 것은 누구나 알고 있습니다. 프런트엔드 디스플레이에 사용되는 테이블입니다. 이런 방식으로 생성된 HTML 코드는 매우 간결합니다.
HTML은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

jQueryPaging.aspx页면적CS代码如下：

复代码 代码如下:

공개 부분 클래스 jQueryPaging : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Int32 pageIndex=Int32.MinValue;
Int32 pageSize=Int32.MinValue;
문자열 이름=String.Empty;
JavaScriptSerializer jss=new JavaScriptSerializer();
if(요청["이름"]!=null)
{
name=요청["이름"].ToString();
if (Request["PageIndex"] != null)
{
pageIndex = Int32.Parse(Request["PageIndex"].ToString());
pageSize = 요청["PageSize"] != null ? Int32.Parse(Request["PageSize"].ToString()) : 10;
IList 고객 목록 = 새 목록<고객>();
고객 c = null;
DataSet ds= LookDataFromDB(이름,pageIndex,pageSize);
foreach(ds.Tables[0].Rows의 DataRow 행)
{
c = new Customer();
c.CustomerID = row["CustomerID"].ToString();
c.CompanyName = 행["CompanyName"].ToString();
c.ContactName = row["ContactName"].ToString();
c.ContactTitle = 행["ContactTitle"].ToString();
c.Address = 행["주소"].ToString();
c.City = row["도시"].ToString();
customersLists.Add(c);
}
if (customersLists.Count>0)
{
Response.Write("{"Count":" ds.Tables[1].Rows[0][0] "," 고객":" jss.Serialize(customersLists) "}");
응답.끝();
}
}
}
}
private DataSet LookDataFromDB(string name, int pageIndex, int pageSize)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[" NorthwindConnectionString"].ConnectionString);
콘.오픈();
SqlCommand cmd = 새 SqlCommand();
cmd.Connection = 연결;
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 = 새 SqlDataAdapter(cmd);
DataSet ds = new DataSet();
시도해 보세요
{
dataAdapter.Fill(ds);
}
catch(예외)
{
}
마침내
{
if (dataAdapter != null)
{
dataAdapter.Dispose();
}
if (cmd != null)
{
cmd.Dispose();
}
if (conn != null)
{
conn.Dispose();
}
}
DS를 반환합니다.
}
}

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

复主代码 代码如下:

public class Customer
{
public String CustomerID { get; 세트; }
공개 문자열 회사명 { get; 세트; }
공용 문자열 ContactName { get;set;}
공용 문자열 ContactTitle { get; 세트; }
공개 문자열 주소 { get; 세트; }
공개 문자열 도시 { get; 세트; }
}
SearchCustomerByName 存储过程的代码如下：
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
프로시저 만들기 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 (CustomerID별 주문) AS RowNum,* from ContactName이 '%' @name '%'와 같은 고객
) t
여기서 @pageIndex*10 1과 (@pageIndex 1)*10 사이의 t.RowNum
고객에서 count(*) 선택
여기서 ContactName like '%' @name '%'
END
GO

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