Idea of implementing Paging for Asp.net + jquery +. ashx files

Today, we can see a program code written by the. java buddy to directly request the data list on the page. It is used to display the list of other contacts without refreshing the new pop-up div after the customer contact is selected. I suddenly thought that I could request a contact list without refreshing the new contact list. In this case, the complex data list is used, and then the data paging occurs. I now use a self-written paging control. However, sometimes the efficiency is not very high. It uses user controls, stored procedures, and paging processing classes to implement paging. But it is inevitable that you will encounter a refresh problem. Even if the page is very fast, it will always feel uncomfortable as long as you click "refresh. Compile the page again and process the ViewState on the server. And other performance losses. Since. ashx can omit the page compilation process. If we move the paging processing class to the client, the performance will be improved a lot and the page is not refreshed. It must be nice.

My idea is:: In the. ashx program, compile the program for obtaining different page numbers. When the page layout is good, leave the data area div. Request the. ashx program on the page to generate the html code for the next page. Overwrite div. innerHTMl.
The first is the page, because it is necessary to practice ideas, so the page is really very simple. References jquery. jsCopy codeThe Code is as follows: <div id = "lab">
<Input id = "Button1" type = "button" value = "initialize data" onclick = "Init ();"/>
<Div id = "Content" style = "width: 100%">
</Div>
<Div id = "PagePanel" style = "margin-left: 20px "> <label id =" pageInfo "> </label> <a href =" # "onclick =" InitUp () "> Last </a> <a href =" # "onclick =" InitNext () "> Next </a> </div>
<Input type = "hidden" value = "0" id = "currPageIndex"/>
</Div>

Then write the. js file to implement paging control on the client. The current page number information is already stored on the display page.
After referencing the js file, you can use it. Haha, it went very well.Copy codeThe Code is as follows: // JScript File
Function Init ()
{
$. Get ("Handler. ashx", function (tablestr ){
Document. getElementById ('content'). innerHTML = tablestr;
Document. getElementById ('currpageindex'). value = '1 ';
});
}
Function InitNext ()
{
Var currIndex = document. getElementById ('currpageindex'). value;
Var nextIndex = Number (currIndex) + 1;
$. Get ("NextHandler. ashx", {index: currIndex}, function (tablestr ){
Document. getElementById ('content'). innerHTML = tablestr;
Document. getElementById ('pageinfo'). innerText = "current section" + nextIndex + "page ";
Document. getElementById ('currpageindex'). value = nextIndex;
});
}
Function InitUp ()
{
Var currIndex = document. getElementById ('currpageindex'). value;
Var nextIndex = Number (currIndex)-1;
$. Get ("previushandler. ashx", {index: currIndex}, function (tablestr ){
Document. getElementById ('content'). innerHTML = tablestr;
Document. getElementById ('pageinfo'). innerText = "current section" + nextIndex + "page ";
Document. getElementById ('currpageindex'). value = nextIndex;
});
}

Reference it to the display pageCopy codeThe Code is as follows: <script type = "text/javascript" src = "http://www.cnblogs.com/Media/Script/jquery.js"> </script>
<Script src = "JScript. js" type = "text/javascript"> </script>

Done!
The rest is the server. This is simple. We are c # code, and we are calling directly .....
1. Data initialized on the first page .....Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "Handler" %>
Using System;
Using System. Web;
Using System. Data;
Using System. Text;
Public class Handler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
DataSet ds = HebHX. DBUtility. DbHelperSQL. Query ("select top 20 cust_code, cust_name, cust_addr, bank_name, bank_account from customer_info ");
StringBuilder tb = new StringBuilder ("<table class = 'dategri'> <tr> <th style = 'width: 130px '> tax ID </th> <th style = 'width: 150px '> enterprise name </th> <th style = 'width: 200px'> enterprise address </th> <th style = 'width: 150px '> bank </th> <th style = 'width: 150px'> bank account </th> <tr> ");
For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
{
Tb. Append ("<tr> ");
For (int j = 0; j <ds. Tables [0]. Columns. Count; j ++)
{
Tb. Append ("<td class = 'item'> ");
Tb. Append (ds. Tables [0]. Rows [I] [j]. ToString ());
Tb. Append ("</td> ");
}
Tb. Append ("</tr> ");
}
Tb. Append ("</table> ");
Context. Response. Write (tb. ToString ());
}
Public bool IsReusable {
Get {
Return false;
}
}
}

2. Click the. ashx file used on the next page.Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "NextHandler" %>
Using System;
Using System. Web;
Using System. Data;
Using System. Text;
Public class NextHandler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Int pageRows = 20;
Int pageIndex = Convert. ToInt32 (context. Request. Params ["index"]) + 1;
DataSet ds = HebHX. DBUtility. dbHelperSQL. query ("select top" + pageRows. toString () + "cust_code, cust_name, cust_addr, bank_name, bank_account from customer_info where cust_id> (select max (t. cust_id) from (select top "+ (pageRows * pageIndex ). toString () + "cust_id from customer_info order by cust_id) t) order by cust_id ");
StringBuilder tb = new StringBuilder ("<table class = 'dategri'> <tr> <th style = 'width: 130px '> tax ID </th> <th style = 'width: 150px '> enterprise name </th> <th style = 'width: 200px'> enterprise address </th> <th style = 'width: 150px '> bank </th> <th style = 'width: 150px'> bank account </th> <tr> ");
For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
{
Tb. Append ("<tr> ");
For (int j = 0; j <ds. Tables [0]. Columns. Count; j ++)
{
Tb. Append ("<td class = 'item'> ");
Tb. Append (ds. Tables [0]. Rows [I] [j]. ToString ());
Tb. Append ("</td> ");
}
Tb. Append ("</tr> ");
}
Tb. Append ("</table> ");
Context. Response. Write (tb. ToString ());
}
Public bool IsReusable {
Get {
Return false;
}
}
}

3. Click the. ashx file used in the previous page. If you have the idea, this is simpler, and it is just copy.Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "UpHandler" %>
Using System;
Using System. Web;
Using System. Data;
Using System. Text;
Public class UpHandler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Int pageRows = 20;
Int pageIndex = Convert. ToInt32 (context. Request. Params ["index"])-1;
DataSet ds = HebHX. DBUtility. dbHelperSQL. query ("select top" + pageRows. toString () + "cust_code, cust_name, cust_addr, bank_name, bank_account from customer_info where cust_id> (select max (t. cust_id) from (select top "+ (pageRows * pageIndex ). toString () + "cust_id from customer_info order by cust_id) t) order by cust_id ");
StringBuilder tb = new StringBuilder ("<table class = 'dategri'> <tr> <th style = 'width: 130px '> tax ID </th> <th style = 'width: 150px '> enterprise name </th> <th style = 'width: 200px'> enterprise address </th> <th style = 'width: 150px '> bank </th> <th style = 'width: 150px'> bank account </th> <tr> ");
For (int I = 0; I <ds. Tables [0]. Rows. Count; I ++)
{
Tb. Append ("<tr> ");
For (int j = 0; j <ds. Tables [0]. Columns. Count; j ++)
{
Tb. Append ("<td class = 'item'> ");
Tb. Append (ds. Tables [0]. Rows [I] [j]. ToString ());
Tb. Append ("</td> ");
}
Tb. Append ("</tr> ");
}
Tb. Append ("</table> ");
Context. Response. Write (tb. ToString ());
}
Public bool IsReusable {
Get {
Return false;
}
}
}

Done! Direct Testing... the results are really good. You need to know that the data volume of our database is about 0.1 million or more... Basically, there is no latency. It's really nice to be refreshed. If I use a paging stored procedure, it will be improved.
Effect, and by the way, draw an abstract painting. Haha... By the way, let's take a look.

In the end, I still have some doubts. net's ajax usage is the same ?.. In the past, ajax was used to use some server-side controls, but it has never been used by clients. However, I always think that ajax should be implemented in a similar way. I will study it later. You can advise ajax experts on the classic and practical ajax knowledge of the client. Thank you.