AJAX CascadingDropdown in Asp.Net
- Tuesday, June 15, 2010, 15:46
- Programming
- Add a comment
JavaScript Cascading Dropdown in Asp.Net
Looking for a DropDown to be populated from the input from another DropDown, this is known as a CascadingDropDown. There are really a lot of ways to get the cascading dropdown in the ASP.net. But I would like to emphasise on performance this time. Hence I planned to use web service to transfer data web server to client scripts. So the data transfer between server and client is very minimal. Thus you can experience the cascading very fast for a small to medium size of data.
To work on this sample, you may need to download Ajax Control kit. Once downloaded, create a new website or web application model as you wish. Then select the Default.Aspx and go to design mode in the Web Form
CascadingDropDown in Web Form
While in design mode, open the tool box and right click and choose items. In the “Choose Toolbox Item”. Select the downloaded AjaxControlToolKit.dll.
Now you will see a list of Ajax controls in the tool Box.
Drag the Cascading Dropdown to the Web form.
Right click the website and add a web service named NorthwindDataService.asmx
In Web Service
import AjaxControlToolkit using Imports AjaxControlToolkit in the top
Add a new function named as GetCategories with the following paramters
CascadingDropDownNameValue: Ajax control kit needs this object back for loading data [Please don’t change the name]
Category: The category for filtering data [Please don’t change the name]
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 datareader to fill up the CascadingDropDownNameValue list.
(For DataBinding and data retrieval related information ASP.Net Data Controls )
Now its time to fill up the Cascading Dropdown control with the web service and web method we created just now.
CascadingDropDown ConfigurationFill up the following
ServicePath=”NorthwindDataService.asmx”
ServiceMethod=”GetCategories”
Category=”CategoryName”
For the second drop down the only difference you are going to do is passing a parameter to filter the data based on the parameter. To get the parameter from the selected item of the first DropDownList, do the following.
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 records
Further information and source code can be found here(CascadingDropdown)
About the Author
admin has written 12094 stories on this site.
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
You must be logged in to post a comment.
