How to implement an ajaxcontrol toolkit cascading dropdown with database

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
How to implement an ajaxcontrol toolkit cascading dropdown with database How to implement an ajaxcontrol toolkit cascading dropdown with database Reviewed by czetsuya on Wednesday, February 04, 2009 Rating: 5

No comments:

Powered by Blogger.