AJAX Cascading Dropdown in Asp.NET

AJAX Cascading Dropdown in Asp.NET

Hi Friends,

           In this post i have shown how to use AJAX Cascading Dropdown in Asp.Net. Also added sample Code at the end of the post.

Step 1: Download the ajax toolkit from Ajax Toolkit and extract it.

Step 2: Now open toolbox in Visual Studio then Right Click on it and Add Tab

Now enter tab Name and press Enter Key

Now Right Click on your New tab And Select Choose Items...

A popup box will appear Click on Browse then go to the path where you have extracted AjaxToolkit and select AjaxControlToolkit.dll then press OK

Now you will see the list of ajax tools

Now we are Ready to use Ajax Cascading Dropdown

Now we have to add reference in the project 

Note:- First check references if AjaxControlToolkit is there then no need to add reference Proceed to Step 3

Right Click on References in your project then click Add Reference

A popup box will appear click on browse tab then go to folder where you have extracted ajax toolkit and select AjaxControlToolkit.dll then press OK

Step 3: Now Create a new WebForm and paste the below code

<div>

        <table align="center">

            <tr>

                <td colspan="2">

                    <b>Cascading Dropdown Sample</b>

                </td>

            </tr>

            <tr>

                <td>

                    Select Country:

                </td>

                <td>

                    <asp:DropDownList ID="ddCountry" runat="server" Width="200px">

                    </asp:DropDownList>

                    

                </td>

            </tr>

</table>

</div>

Now Drag and Drop Cascading DropDown From Tool Box Near asp:dropdownlist

Step: 4 Now Right Click on your project and add new item to your project 

then select Web Service and click add button

Step: 5 Open WebService1.asmx.cs and add the name space

using AjaxControlToolkit;

Now paste below code:-

 [WebMethod]

        public CascadingDropDownNameValue[] BindCountry(string knownCategoryValues, string category)

        {

            List<CascadingDropDownNameValue> countrydetails = new List<CascadingDropDownNameValue>();

            countrydetails.Add(new CascadingDropDownNameValue("India", "1"));

            countrydetails.Add(new CascadingDropDownNameValue("USA", "2"));

            countrydetails.Add(new CascadingDropDownNameValue("Germany", "3"));

            countrydetails.Add(new CascadingDropDownNameValue("South Africa", "4"));

            countrydetails.Add(new CascadingDropDownNameValue("Russia", "5"));

            countrydetails.Add(new CascadingDropDownNameValue("China", "6"));

            countrydetails.Add(new CascadingDropDownNameValue("Japan", "7"));

            countrydetails.Add(new CascadingDropDownNameValue("Canada", "8"));

            countrydetails.Add(new CascadingDropDownNameValue("Rome", "9"));

            countrydetails.Add(new CascadingDropDownNameValue("Brazil", "10"));

            return countrydetails.ToArray();

        }

Now your page should look like this:-

Now Un-comment this line:- 

    [System.Web.Script.Services.ScriptService]

Step: 5 Now in cascading dropdown on your web form add the below code after runat="server"

Category="Country"

                    TargetControlID="ddCountry" LoadingText="Loading Countries..." PromptText="Select Country"

                    ServiceMethod="BindCountry" 

after ServiceMethod paste this :- 

 ServicePath="~/WebService1.asmx"

Now it Should look like this :-

 Step: 6 Now drag and Drop toolkitscriptmanager from toolbox after form tag 

  

Now you are Done Press F5 to start debugging and you will see your dropdown

You can download sample code from below link:-

Cascading Dropdown Example

Please leave your feedback and comments below..!