Implementation Code of ASP. NET Ajax cascade dropdownlist

Understanding cascading DDL
Consider the following common scenarios:
· Select a country, province, city, or region for user registration.
· When you purchase a product, select the product category, product name, and product model.
The preceding examples have some common features:
· Select a higher level (such as a province) and a lower level (such as a city.
· The content at the next level is determined by the content at the higher level.
A group like this dropdownlist is Cascade DDL. A common solution is to write hierarchical data to XML, set the autopostback attribute of dropdownlist to "true" to enable automatic callback, and finally process the selectedindexchanged event. This is not only troublesome, but too many page refreshes will bring resentment to users. So how can we implement a cascading dropdownlist with no refreshing features?
Start
1. Create an XML data file
For example, if I want to perform provincial/municipal cascading DDL during user registration, first create the following XML file. CopyCode The Code is as follows: <? Xmlversion = "1.0" encoding = "UTF-8"?>
<Cityservicesource>
<Areaname = "China">
<Provinceid = "1" provinceid = "110000" name = "Beijing">
<Citycityid = "110100" name = "city jurisdiction">
<Pieceareapieceareaid = "110101" name = "Dongcheng District"/>
<Pieceareapieceareaid = "110102" name = "Xicheng district"/>
<Pieceareapieceareaid = "110103" name = "Chongwen District"/>
<Pieceareapieceareaid = "110104" name = "Xuanwu District"/>
<Pieceareapieceareaid = "110105" name = "Chaoyang District"/>
<Pieceareapieceareaid = "110106" name = "Fengtai District"/>
<Pieceareapieceareaid = "110107" name = "Shijingshan district"/>
<Pieceareapieceareaid = "110108" name = "Haidian District"/>
<Pieceareapieceareaid = "110109" name = "Mentougou District"/>
<Pieceareapieceareaid = "110111" name = "Fangshan District"/>
<Pieceareapieceareaid = "110112" name = "Tongzhou District"/>
<Pieceareapieceareaid = "110113" name = "Shunyi District"/>
<Pieceareapieceareaid = "110114" name = "Changping District"/>
<Pieceareapieceareaid = "110115" name = "Daxing District"/>
<Pieceareapieceareaid = "110116" name = "Huairou district"/>
<Pieceareapieceareaid = "110117" name = "Pinggu district"/>
</City>
<Citycityid = "110200" name = "County">
<Pieceareapieceareaid = "110228" name = "Miyun county"/>
<Pieceareapieceareaid = "110229" name = "Yanqing County"/>
</City>
</Province>
</Area>
<Areaname = "UK">
</Area>
<Areaname = "us">
</Area>
<Areaname = "Japan">
</Area>
</Cityservicesource>

2. Create a Web Service
Create a web service (such as cityservice. asmx) Copy code The Code is as follows: [WebService (namespace = "http://tempuri.org/")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
[System. Web. Script. Services. scriptservice ()]
Publicclasscityservice: system. Web. Services. WebService
{
Privatestaticxmldocument _ document; // used to read XML data
Privatestaticobject _ Lock = newobject (); // multithread concurrent processing
Publicstaticxmldocument document
{
Get
{
Lock (_ Lock)
{
If (_ document = NULL)
{
_ Document = newxmldocument ();
_ Document. Load (httpcontext. Current. server. mappath ("~ /App_data/cityservicesource. xml "));
}
}
Return _ document;
}
}
Publicstaticstring [] hierarchy
{
Get
{
Returnnewstring [] {"area", "Province"}; // XML data level
}
}
[Webmethod] // The web method automatically called by the control later. This function does not change according to the actual situation.
Public ajaxcontroltoolkit. cascadingdropdownnamevalue [] getdropdowncontents (string knowncategoryvalues, string category)
{
Stringdictionary knowncategoryvaluesdictionary = ajaxcontroltoolkit. cascadingdropdown. parseknowncategoryvaluesstring (knowncategoryvalues );
Return ajaxcontroltoolkit. cascadingdropdown. querysimplecascadingdropdowndocument (document, hierarchy, knowncategoryvaluesdictionary, category );
}
}

3. Create a dll Control
If Ajax Control Toolkit is not installed, download and install (http://asp.net ).
Create three standard dropdownlists (named dropdownlist1, dropdownlist2, and dropdownlist3 by default ).
Then, drag and drop three cascadingdropdown controls in the Ajax Control Toolkit. Note that one extender can only be used for one standard control. Copy code The Code is as follows: <ajaxtoolkit: cascadingdropdownid = "cascadingdropdown1" runat = "server"
Servicemethod = "getdropdowncontents"
Servicepath = "~ /WebServices/cityservice. asmx "targetcontrolid =" dropdownlist1"
Category = "area" loadingtext = "reading..." prompttext = "Select Country">
</Ajaxtoolkit: cascadingdropdown>
<Ajaxtoolkit: cascadingdropdownid = "cascadingdropdown2" runat = "server"
Parentcontrolid = "dropdownlist1" servicemethod = "getdropdowncontentspagemethod"
Targetcontrolid = "dropdownlist2" Category = "Province" loadingtext = "reading ..."
Prompttext = "select Province">
</Ajaxtoolkit: cascadingdropdown>
<Ajaxtoolkit: cascadingdropdownid = "cascadingdropdown3" runat = "server"
Parentcontrolid = "dropdownlist2" servicemethod = "getdropdowncontents"
Servicepath = "~ /WebServices/cityservice. asmx "targetcontrolid =" dropdownlist3"
Category = "city" loadingtext = "reading..." prompttext = "select city">
</Ajaxtoolkit: cascadingdropdown>
<Asp: updatepanelid = "updatepanel1" runat = "server" updatemode = "Conditional" rendermode = "inline">
<Triggers>
<Asp: asyncpostbacktriggercontrolid = "dropdownlist3" eventname = "selectedindexchanged"/>
</Triggers>
</ASP: updatepanel>

Create a web method in the ". cs" file.
[Webmethod]
[System. Web. Script. Services. scriptmethod]
Publicstaticcascadingdropdownnamevalue [] getdropdowncontentspagemethod (string knowncategoryvalues, string category)
{
Returnnewcityservice (). getdropdowncontents (knowncategoryvalues, category );
}
The following describes the attributes of cascadingdropdown.
Servicemethod = "getdropdowncontents" web method
Servicepath = "~ /WebServices/cityservice. asmx "Web service address
Targetcontrolid = "dropdownlist1" and the ID of the dropdownlist control bound to it
Category = "area" The level of cascade DDL
Loadingtext = "reading..." The text displayed when loading
Prompttext = "Select Country"> text displayed when not selected
It can be said that Ajax has brought revolutionary changes in UE (user experience. The asynchronous refresh mode greatly improves the traditional embarrassing situation of "one-step refresh. I am still a beginner. If you have any mistakes, you are welcome to criticize and testify.
By Kim
2008/12/11