Cascading dropdown with Asp.Net AJAX Toolkit
Cascading dropdown can be programmed in the ASP.net 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 few lines might be missed 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 )
Post a Comment