Use Ajax For Cascading Dropdown List


Cascading dropdown with Asp.Net AJAX Toolkit

Cascading dropdown can be programmed in the in various ways. However I am planning to design my application in a highly performance based approach. For reading data web server to client I am planning to use Web Service. So the data transfer between server and client is very minimal without the bulky HTTP response with lots of HTML tags. By this you can feel the cascading very fast.

Since this article requires Ajax Control kit. It needs to be downloaded separately.

Once downloaded, create a new website and select the DEFAULT.ASPX and then switch to design mode in the Web Form

In Web Form

While in design mode, open the tool box and right click and choose items. In the "Choose Toolbox Item" choose the downloaded AjaxControlToolKit.dll.

Add Cascading Dropdown to the Web form from the tool box.

Add a web service named NorthwindDataService.asmx

In Web Service

import Ajax Control Toolkit

Add a new function named as Get Categories with the following parameters

CascadingDropDownNameValue: Ajax control kit requires this object back for loading data [name should be kept as it is]

Category: The category for filtering data [name should be kept as it is]

Next step is to get data from DB

import System.Data using Imports System.Data in the top

import System.Data.SqlClient also

Now get a Data Reader to fill up the CascadingDropDownNameValue list.

Now its time to fill up the Cascading Dropdown control with the web service and web method we created just now.

Fill up the following

ServicePath = "NorthwindDataService.asmx"

ServiceMethod = "GetCategories"

Category = "CategoryName"

If you are running the website now, the first dropdown should be loaded with data now. If you are getting any errors like error 500 or method error 12031, The chances are there are missing out

After this change, start running the website. It should compile and run. If you select the first dropdown it should return the list of categories. If you are not getting any output you may try running the web service in browser by 'set as start page' on the web service. The logic is to make sure the web service is working as expected and returning the list of categories

For the second drop down the only difference you are going to do is, passing a parameter to filter the data based on the first parameter.

To get the parameter from the selected item of the first DropDownList Dim Param As StringDictionary

Param = CascadingDropDown.ParseKnownCategoryValuesString (knownCategoryValues)

Then the Param Dictionary will contain the data we need. We can easily fetch the value from the name value pair like Param ("CategoryName"). Use that in the select query to fetch filtered record

(For complete source code please refer Cascading DropDown )


Leave a Reply