An example of a DataGrid implemented using Ajax

Ajax technology is used to asynchronously call the Web service on the server to generate a DataGrid on the client page.

First, let's take a look at our web servcie. It uses the passed SQL to generate a dataset, and uses the standard DataGrid Control to output standard HTML using rendercontrol.

 

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 ");

}

// The system generated

/// <Summary>
/// Generate the html of the DataGrid
/// </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 + = "[<span style =/" background-color: # ffdd11; width: 20px; align: center/"> <a href =/" #/"onclick =/" gotopage ('"+ I + "') /">" + I + "</a> </span>]";
}
Else
{
Pager + = "[<span style =/" width: 20px; align: center/"> <a href =/" #/"onclick =/" gotopage ('"+ I + "') /">" + I + "</a> </span>]";
}
}
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;
}
}
}

 

Ajax is used to complete an asynchronous web service.

Ajaxfuncs. js

VaR XMLHTTP;
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;

// URL of the web service call
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 );
}
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)
{

// Output the standard HTML statement returned by the Web Service
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)
}

The client page is very simple.

<HTML>
<Head>
<Title> ajaxgrid </title>
<Script language = "JavaScript" type = "text/JavaScript" src = "ajaxfuncs. js"> </SCRIPT>
</Head>
<Body ms_positioning = "gridlayout" onLoad = "fillgrid ('myph', 'select * from employee ', 1)">
<Form ID = "form1" method = "Post" runat = "server">
<Div id = "myph"> </div>
</Form>
</Body>
</Html>