An example of a DataGrid implemented using Ajax

Source: Internet
Author: User

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>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.