Use ajax to implement a new page without refreshing the DataGrid (ajaxgrid)

Use ajax to implement a new page without refreshing the DataGrid (ajaxgrid)

The DataGrid feature is powerful. We only need to write a few lines of code to display complex page data. When there is a large amount of data, it is inevitable to display the data by page. When there is a small amount of data, RDI provides its own paging function, but it is very convenient. When there is a large amount of data, the paging mechanism of the DataGrid is not good. Therefore, we found a better paging mechanism using the stored procedure on the Internet (the client retrieves the page number for the page number, and the data query for the last 100,000 levels is also very fast, I have never tried a large amount of data, and I will write the Stored Procedure paging on my blog when I have time.) In my work, I am also fashionable to make the customer more comfortable to use, you want to use ajax to implement a DataGrid without refreshing pages. The rendercontrol method is used to translate the DataGrid into HTML code and then return the code using web service. Of course, you can also use other methods.

Genericajaxws. asmx. CS

Using system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. Data. sqlclient;
Using system. diagnostics;
Using system. Web;
Using system. Web. Services;
Using system. configuration;
Using system. Web. UI. webcontrols;
Using system. Web. UI;
Using system. IO;

Namespace genricajaxws
{
[WebService (namespace = "http: // localhost/genricajaxws/")]
Public class genricajaxws: system. Web. Services. WebService
{
Sqlconnection con;
Sqldataadapter da;
Sqlcommand cmd;
Dataset Ds;

Public genricajaxws ()
{
Initializecomponent ();
Con = new sqlconnection (configurationsettings. receivettings ["Connect"]);
DA = new sqldataadapter ("", con );
Cmd = new sqlcommand ("", con );
DS = new dataset ("tahaschema ");
}

# Region component designer generated code

// Required by the Web Services designer
Private icontainer components = NULL;

/// <Summary>
/// Required method for designer support-do not modify
/// The contents of this method with the code editor.
/// </Summary>
Private void initializecomponent ()
{
}

/// <Summary>
/// Clean up any resources being used.
/// </Summary>
Protected override void dispose (bool disposing)
{
If (disposing & components! = NULL)
{
Components. Dispose ();
}
Base. Dispose (disposing );
}

# Endregion
 
/// <Summary>
/// This function accepts tsql statment and returns Dataset
/// </Summary>
 

[Webmethod]
Public String getgrid (string sqlstr, int pageindex)
{
Da. selectcommand. commandtext = sqlstr;
DA = new sqldataadapter (sqlstr, con );
Da. Fill (DS, "mytable ");

DataGrid = new DataGrid ();
DataGrid. autogeneratecolumns = true;
DataGrid. datasource = Ds. Tables ["mytable"]. defaultview;
DataGrid. allowpaging = true;
DataGrid. pagesize = 4;
DataGrid. pagerstyle. Visible = false;
DataGrid. currentpageindex = pageindex;
Try
{
DataGrid. databind ();
}
Catch (exception)
{

}
Stringwriter wR = new stringwriter ();
Htmltextwriter writer = new htmltextwriter (WR );
DataGrid. rendercontrol (writer );
String gridhtml = Wr. tostring ();
Wr. Close ();
Writer. Close ();
Dropdownlist ddl_pager = new dropdownlist ();
Ddl_pager.attributes.add ("onchange", "gotopage (this. Value )");
String pager = "";
For (INT I = 0; I <DataGrid. pagecount; I ++)
{
Listitem litem = new listitem (I. tostring (), I. tostring ());
Ddl_pager.items.add (litem );
If (I = pageindex)
{
Pager + = "[Background-color: # ffdd11; width" +
": 20px; align: center/"> <a href =/"#/" onclick "+
"=/" Gotopage ('"+ I +"')/">" + I + "</a>]";
}
Else
{
Pager + = "[width: 20px; align: center/"> "+
"<A href =/" #/"onclick =/" gotopage "+
"('" + I + "')/"> "+ I +" </a>] ";
}
}
Ddl_pager.selectedindex = pageindex;
WR = new stringwriter ();
Writer = new htmltextwriter (WR );
Ddl_pager.rendercontrol (writer );
String pagerhtml = "<input type = 'button '" +
"Value = '<'onclick = 'gotoprevpage ()'> ";
Pagerhtml + = Wr. tostring ();
Pagerhtml + = "<input type = 'button 'value = '>'" +
"Onclick = 'this. Disabled = gotonextpage () '> ";
Wr. Close ();
Writer. Close ();
Return pager + pagerhtml + "<br>" + gridhtml;
}
}
}

The above is the Web service, and then the Ajax request is used to obtain the actual data. The following is the client JavaScript code:

Ajaxfuncs. js

// Declare an asynchronous request object

//////////////////////////////////////// /////////////////////////
VaR XMLHTTP;
//////////////////////////////////////// /////////////////////////
// Fill in the DataGrid. This function has three parameters.

// The first one is the ID of the DIV containing the DataGrid

// The second is the SQL statement used to query data.

// The third is to obtain the page number of data

//////////////////////////////////////// /////////////////////////
VaR pH;
VaR fillgrid_str_ SQL = "";
VaR currentpageindex;
Function fillgrid (myph, str_ SQL, pageindex ){
PH = commandid Doc ument. getelementbyid (myph );
Fillgrid_str_ SQL = str_ SQL;
Currentpageindex = pageindex;
VaR url = "http: // localhost/genricajaxws" +
". Asmx/getgrid? Sqlstr = "+ str_ SQL +
"& Pageindex =" + pageindex;

If (window. XMLHttpRequest)
{
XMLHTTP = new XMLHttpRequest ();
XMLHTTP. onreadystatechange = fillgrid_change;
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
}
// Code for IE
Else if (window. activexobject)
{
Try
{
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
Try
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Catch (e ){}
}

If (XMLHTTP)
{
Try
{
XMLHTTP. onreadystatechange = fillgrid_change;
XMLHTTP. Open ("get", URL, false );
XMLHTTP. Send ();
}
Catch (e ){}
}
}
}

Function fillgrid_change ()
{
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200)
{
// Var rows = XMLHTTP. responsexml.
// Selectnodes (". // tahaschema // tahatable ");
VaR ROW = XMLHTTP. responsexml. selectnodes (".//");
Ph. innerhtml = row [1]. text;
}
}

Function gotopage (pageindex ){
Fillgrid (pH. ID, fillgrid_str_ SQL, pageindex)
}
 
Function gotonextpage (){
Try {
Fillgrid (pH. ID, fillgrid_str_ SQL,
Parseint (currentpageindex) + 1 );
Return false;
}
Catch (e ){
Return true;
}
}

Function gotoprevpage (){
Fillgrid (pH. ID, fillgrid_str_ SQL,
Parseint (currentpageindex)-1)
}

Finally, the HTML page for displaying data is displayed. The instance code is as follows:

Ajaxgrid.html:

<HTML>
<Head>
<Title> ajaxgrid </title>
<Script language = "JavaScript"
Type = "text/JavaScript" src = "ajaxfuncs. js"> </SCRIPT>
</Head>
<Body onload = "fillgrid ('myph', 'select * From sale', 1)">

<Form ID = "form1" method = "Post" runat = "server">
<Div id = "myph"> </div>
</Form>
</Body>
</Html>

By now, Ajax is used to implement a new page without refreshing the DataGrid.

Hope to be useful to you!

You are welcome to discuss this. If you have any better methods or comments, please leave a message so that we can do better together.

Thank you for visiting my blog!