Ajax Cascading Drop Down Control

Cascading Drop Down

This control is used with dropdown list control and it is used to automatically get values to display in a dropdown list by executing a method Asynchronously.

Properties

TargetcontrolID : ParentcontrolID : Used to specify the ID of the parent dropdownlist from which it has to take the value to get the list of values for targetcontrol of the current cascading dropdown. Category : Used to specify a category name for the cascading drop down Loading Text : Used to specify the text to display in the target control while loading item into it. Prompt Text : Used to specify the text to display in for the Target control after loading items to it. ServideMethod : Used to specify the method name that is called to get the list of items to display within the target cotrol.

Example

The following example demonstrates how to use the cascading dropdown with dropdownlist controls. Add a page to the website and take a ToolkitscriptManager on it along with two Dropdownlist controls and set their ID’s as DDL1 & DDL2. Within HTML source of the page Drop & Drop two cascading drop down controls & set following for them. <asp : cascading Dropdown ID=”cascading Drop Down1” runat=”server” TargetcontrolID = “DDL1” category=”countries” LoadingText=”[Loading countries]” promptText = “select your country”  Servidemethod=”Getcountries” usecontentkey = “True”> </asp: cascadingDropDown> <asp : Cascading Dropdown ID=”cascading Dropdown2” runat=”server” TargetcontrolID=”DDL2” parentcontrolID=”DDL1” category=”states” LoadingText = “[loading states]” propmptText = “select your state” usecontextkey=”True”>  </asp:cascadingDropDown> Within the design of the page click on the smart tag of 1^st dropdown list & choose “Add cascading Drop down page method”  to create a Method in the code getcounties which is set as the serviceMethods for the 1 st cascading Dropdown & write the following code with in it.{ sqlconnection cn= new sqlconnection (“server=Nikhil; database=mydb;uid=sa;pwd=123”); Sqldatadpater Da=new Sql DataAdapter(“Select country from countires”, cn); Dataset Ds= new Dataset(); Da.fill(Ds,”countries”); CascadingDropDownNameValue[]Items=new cascading DropDownNamevalue[d.Tables[“countries”].Rows.count]; int i=0; foreach(DataRow Dr in Ds.Tables[“Countries”].Rows) { Items[i++]=new cascadingDropDownNameValue(Dr[0].Tostring(),Dr[0].Tostring()); } returns Items; } With in the design of the page click on the smart tag of second DropDownList & choose”Add cascading DropDownPageMethod” to create a method in the code with the name “GetStates” which is the serviceMethos set to 2 nd dropdownlist and write the following code with in that mehod. { string country=knowncategoryvalues; country=country.substring(country.Indexof(“:”)+1); country=country.substring(0,country.Length-1); Sqlconnection cn=new sqlconnection(“Server=Nikhil; database=mydb;uid=sa;pwd=123); SqldataAdapter Da=new sqlDataAdapter( “Select state from states from states where country=”’+country+’”,cn); Dataset Ds = new Dataset(); Da.fill(Ds.”States”); CascadingDropDownNameValue[]Items=new CascadingDropDownNameValue[DS.Table[“states”].Rows.count]; int i=0; foreach(DataRow Dr in Ds.Tables[“states”].Rows) { Item[i++]=new cascading DropDownNameValue( Dr[0].Tostring()); } returns Items; } At runtime immediately after the page is loaded list of countries will be add to 1 st Dropdownlist& when you select a country in DropDownlist then a list of states related to the country are added to the second dropdown list & all this done asynchronously. For this example you required the following two tables in database. create table countries(country  varchar(30)) create table states (country varchar(30),state varchar(30)) For more info on  Ajax Always Visible Control Extender