Use ajax to implement dropdownlist multi-level linked instances

 

We often use dropdownlist to bind data, which involves the issue of Multi-Level Association. refreshing the page is not good, so it took some time to use ajaxpro to bind dropdownlist data without refreshing.
--------------------------------------------------------------------------------

Instance:
Implement seamless data binding at the provincial, municipal, and county levels
Thoughts:
When loading the page, read and bind the province data from the database, bind the city data according to the ID selected by the province's current dropdownlist, and then bind the county data according to the ID selected by the city's dropdownlist.
Then, when the user changes the province's dropdownlist and uses the ajaxpro technology to pass the value (the currently selected province ID), the user binds the dropdownlist of the city and county based on the selected province ID, the principle is the same when dropdownlist is changed .. The CS page transmits data from the database to the page in XML format, and then analyzes and processes the binding using JavaScript.
It doesn't matter if you don't understand it.CodeThe implementation is clear.
Description:

Preparation:
First, deploy ajaxpro.2 to your project. If you deploy ajaxpro.2, see how to deploy ajaxpro.
Code:
The three dropdownlists on the page are province, city, and county:

<Asp: dropdownlist id = "ddlp" runat = "server">
</ASP: dropdownlist>
<Asp: dropdownlist id = "ddlc" runat = "server">
</ASP: dropdownlist>
<Asp: dropdownlist id = "ddlx" runat = "server">
</ASP: dropdownlist> three dropdownlist controls are bound during page loading:
Protected void page_load (Object sender, eventargs E)
{
# Region Registration
Ajaxpro. Utility. registertypeforajax (typeof (alldeadmin_usercontrol_areauc ));
# Endregion
If (! This. ispostback)
{
This. bindprodata (); // bind the province
This. bindcitydata (); // City Data Binding
This. bindxiandata (); // county-level data binding
}
} Code bound to the three dropdownlist controls:
/// <Summary>
/// Bind the province data dropdownlist
/// </Summary>
Private void bindprodata ()
{
Bll. alldeadmin. areabll myareabll = new areabll ();
This. ddlp. datasource = myareabll. getalllistp ();
This. ddlp. datatextfield = "proname ";
This. ddlp. datavaluefield = "ID ";
This. ddlp. databind ();
This. ddlp. attributes. add ("onchange", "loadcity (opddlselect (this);"); // This event is handled when the province drop-down list changes. Program It is implemented through JavaScript, which will be mentioned below.
}
/// <Summary>
/// City Data dropdownlist binding
/// </Summary>
Private void bindcitydata ()
{
This. ddlc. datasource = This. returncitydata (this. ddlp. selectedvalue );
This. ddlc. datatextfield = "cityname ";
This. ddlc. datavaluefield = "ID ";
This. ddlc. databind ();
This. ddlc. attributes. add ("onchange", "loadxian (opddlselect (this)"); // bind a county event when the city drop-down list changes. This event handler is implemented using JavaScript, as mentioned below.

}
/// <Summary>
/// Bind the dropdownlist of county data
/// </Summary>
Private void bindxiandata ()
{
This. ddlx. datasource = This. returnxiandata (this. ddlc. selectedvalue );
This. ddlx. datatextfield = "xianname ";
This. ddlx. datavaluefield = "ID ";
This. ddlx. databind ();
} Return the data of a city and county from the database:
/// <Summary>
/// Return City Data
/// </Summary>
Private dataset returncitydata (string state)
{
Bll. alldeadmin. areabll myareabll = new areabll ();
String Tw = "where proid =" + state;
Return myareabll. getlistc (TW );
}
/// <Summary>
/// Return county data
/// </Summary>
Private dataset returnxiandata (string state)
{
Bll. alldeadmin. areabll myareabll = new areabll ();
String Tw = "where cityid =" + state;
Return myareabll. getlistx (TW );
} Here is the place where data is returned without refreshing the ASPX page:
/// <Summary>
/// Return Municipal Data to the page without refreshing
/// </Summary>
/// <Param name = "state"> </param>
/// <Returns> </returns>
[Ajaxpro. ajaxmethod]
Public String getcity (string state)
{
Return returncitydata (state). getxml ();
}

/// <Summary>
/// Return county-level data to the page without refreshing
/// </Summary>
/// <Param name = "state"> </param>
/// <Returns> </returns>
[Ajaxpro. ajaxmethod]
Public String getxian (string state)
{
Return returnxiandata (state). getxml ();
}

JavaScript processing module of the front-end. ASPX page
Javascript is used to process XML. The XML structure returned by me is

<Script language = "JavaScript" type = "text/JavaScript">
<! --
// Return the value of the current DDL (Auxiliary Function)
Function opddlselect (objectselect)
{
If (objectselect! = NULL)
{
Return objectselect. Options [objectselect. selectedindex]. value;
}
}

// Municipal Data Processing
Function loadcity (state)
{
Alldeadmin_usercontrol_areauc.getcity (State, callback); // load City Data
Alldeadmin_usercontrol_areauc.getxian (State, callbackxian); // load county data
}

Function callback (RES) // callback function
{
VaR drp2 = document. getelementbyid ("<% = ddlc. clientid %> "); // because this example is running as a user control, you cannot directly reference the control name using JavaScript. You need to use the control. client ID of the control.
VaR iteml = drp2.options. Length-1; // clear the items in the dropdownlist
For (VAR I = 0; I <= iteml; I ++)
{
Drp2.remove (iteml-I );
}
VaR odoc = new activexobject ("msxml2.domdocument ");
Result = res. value; // get XML data
Odoc. loadxml (result );
Items = odoc. selectnodes ("// newdataset/Ds ");
For (VAR item = items. nextnode (); item = items. nextnode ()){
VaR city = item. selectsinglenode ("cityname"). nodetypedvalue;
VaR cid = item. selectsinglenode ("ID"). nodetypedvalue;
VaR newoption = Document. createelement ("option ");
Newoption. Text = city;
Newoption. value = CID;
Drp2.options. Add (newoption );
}
}
// County Data Processing
Function loadxian (state)
{
VaR GetObject = alldeadmin_usercontrol_areauc.getxian (State, callbackxian );
}

Function callbackxian (RES) // callback function
{
VaR drp2 = Document. getelementbyid ("<% = ddlx. clientid %> ");
VaR iteml = drp2.options. Length-1; // clear the items in the dropdownlist
For (VAR I = 0; I <= iteml; I ++)
{
Drp2.remove (iteml-I );
}
VaR odoc = new activexobject ("msxml2.domdocument ");
Result = res. value; // get XML data
Odoc. loadxml (result );
Items = odoc. selectnodes ("// newdataset/Ds ");
For (VAR item = items. nextnode (); item = items. nextnode ()){
VaR city = item. selectsinglenode ("xianname"). nodetypedvalue;
VaR cid = item. selectsinglenode ("ID"). nodetypedvalue;
VaR newoption = Document. createelement ("option ");
Newoption. Text = city;
Newoption. value = CID;
Drp2.options. Add (newoption );
}
}
-->
</SCRIPT>

ArticleSource (web development technology knowledge base): http://www.cn-web.com/cnweb/0/483/article/483.html