How to Implement an Ajaxcontrol Toolkit Cascading Dropdown in C#

It took me a while to set it up, so I'm documenting the process of implementing the ajaxcontroltoolkit's cascading dropdown with sql database.

We have 3 dropdowns:
Country->City->Airport

What you need:
1.) windows xp os
2.) dotnet 2 framework installed
3.) visual studio 2005
4.) sqlserver express 2005
5.) ajaxcontroltoolkit: http://ajaxcontroltoolkit.com/ (I used the version for framework 2.0 )
*all of these should be installed on the system

Steps:
1.) create a new project: ASP.NET AJAX-Enabled Web Application
2.) add references to ajaxcontrolttoolkit.dll and ajaxextensiontoolbox.dll
3.) in toolbox make a new tab (named it AJAX Controls - you can chose yours)and choose items:
+under .net framework components select "browse"
+select ajaxcontroltoolkit.dll
+you should have a panel like this:

4.) now add a ScriptManager object to the page from Toolbox->AJAX Extensions
5.) add 3 DropDownList object from Toolbox->Standard
+let's name it DropDownList1, DropDownList2, DropDownList3
6.) add 3 AjaxControlToolkit.CascadingDropDown object from Toolbox->AJAX Controls
+CascadingDropDown1, CascadingDropDown2, CascadingDropDown
7.) select CascadingDropDown1 and under properties set TargetControlID=DropDownList1
+repeat the step for CascadingDropDown2 and CascadingDropDown3
8.) while selecting DropDownList1 under properties tab, should look like the image:


9.)
Looking at the code:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList>
<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" Category="country" LoadingText="Loading country..." PromptText="[SELECT COUNTRY]" ServiceMethod="GetMyValues" ServicePath="Lookups.asmx" TargetControlID="DropDownList1">
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" Category="city" LoadingText="Loading city..." PromptText="[SELECT CITY]" ServiceMethod="GetMyValues" ServicePath="Lookups.asmx" TargetControlID="DropDownList2" ParentControlID="DropDownList1">
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" Category="airport" LoadingText="Loading airport" PromptText="[SELECT AIRPORT]" ServiceMethod="GetMyValues" ServicePath="Lookups.asmx" TargetControlID="DropDownList3" ParentControlID="DropDownList2">
</cc1:CascadingDropDown>
</div>
</form>

10.) Explaining the values:
+Lookups.asmx: a webservice on the same project and folder as that of our application
+GetMyValues: a function on our webservice that we will be called by the CascadingDropDown object
*GetMyValues should be declared like this:
public CascadingDropDownNameValue[] GetMyValues(string knownCategoryValues, string category) { }

11.) to connect to a database add a key to webconfig:

<add key="sqlConnString" value="server=youserver;database=database;uid=you;pwd=yourpassword"/>


12.) BTW, the following tables and fields should exist in your database:
+tblCountry
+CountryCode
+CountryDesc
+tblCity
+CountryCode
+CityCode
+CityDesc
+tblAirport
+CityCode
+AirportCode
+AirportDesc
*Please take note of their relation :-)

13.) I've included a zip file of the project in:
cascading dropdown