Today I saw a. Java Buddy wrote the program code to request a list of data directly on the page. It is the ability to list other contact lists without a refreshed pop-up div after the customer contact has been selected. It suddenly occurred to me that since you can request a list of contacts and no refreshes. So take a complex list of data, and then think of data paging. I'm using a paging control I wrote myself. But the efficiency is sometimes not very high, it is the user control + stored procedures + pagination processing class to achieve paging. But the unavoidable encounter of the refresh problem even if the page is very fast, but as long as the "brush" always feel very uncomfortable. and also want the page compiles again, also want to handle viewstate in the service side. and other performance losses. Since. ASHX can omit the process of page compilation. And then move the paging class to the client, it should be a lot of performance improvement, has not been refreshed, must be very cool, think about doing.
The idea I'm setting is:. In the ASHX program, write a program that gets different page numbers. On the premise of good page layout, leave the data area Div. Then on the page request. ASHX program generates the next page of HTML code. Cover div.innerhtml.
The first is the page, because it is to practice ideas, so the page is really very simple. Citing the Jquery.js
Copy Code code as follows:
<div id= "Lab" >
<input id= "Button1" type= "button" value= "Initialization 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, implement the client paging control. The current page number information is already stored on the display page a <input type= ' hidden ' >.
After the reference JS file, you can use, haha, very smooth.
Copy Code code as follows:
JScript files
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 First" +nextindex+ "page";
document.getElementById (' Currpageindex '). Value=nextindex;
});
}
function Initup ()
{
var Currindex=document.getelementbyid (' Currpageindex '). Value;
var nextindex=number (Currindex)-1;
$.get ("Previoushandler.ashx", {index:currindex},function (TABLESTR) {
document.getElementById (' Content '). Innerhtml=tablestr;
document.getElementById (' PageInfo '). innertext= "Current First" +nextindex+ "page";
document.getElementById (' Currpageindex '). Value=nextindex;
});
}
Reference it to the display page
Copy Code code as follows:
<script type= "Text/javascript" src= "Http://www.cnblogs.com/Media/Script/jquery.js" ></script>
<script src= "Jscript.js" type= "Text/javascript" ></script>
Get!
The rest is the service side, this is simple, I am C # code origin, direct hula hula ...
1, the first page of the initialization of the data. ....
Copy Code code 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 Cust_code,cust_name,cust_addr,bank_name,bank_account From Customer_info ");
StringBuilder TB = new StringBuilder ("<table class= ' Dategrid ' ><tr><th style= ' width:130px ' > Tax number </ 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 on the next page to use the. ashx file.
Copy Code code 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 * Pagein DEX). ToString () + "cust_id from Customer_info Order by cust_id) T" ());
StringBuilder TB = new StringBuilder ("<table class= ' Dategrid ' ><tr><th style= ' width:130px ' > Tax number </ 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 on the previous page to use the. ashx file. There is a way of thinking this is more simple, directly is copy.
Copy Code code 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 * Pagein DEX). ToString () + "cust_id from Customer_info Order by cust_id) T" ());
StringBuilder TB = new StringBuilder ("<table class= ' Dategrid ' ><tr><th style= ' width:130px ' > Tax number </ 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;
}
}
}
Complete! Direct Test. The effect is very good, to know that our database data volume is about 100,000 levels above ... Basically don't feel much delay. There is no refresh is really cool, if I use the paging stored procedures, it should still be improved.
Effects such as figure, and by the way draw an abstract picture. Ha ha... Let's enjoy it, by the way.
Finally, there is a bit of doubt, the use of. NET AJAX is also the case? Ajax used to be used with some server-side controls, and did not really practice the client's usage. But I've always felt that Ajax should be the same as the way I've done it now. Let's study again later. AJAX-savvy buddies can teach the classic, practical knowledge of the client's Ajax. Thanks for the first.
