Working with AJAX cascading dropdown
Populating DropDown is a must in any website. You either populate the dropdown manually or bind it to an array / database. Cascading dropdown is a control of ASP.NET Ajax toolkit that let you define the flow of related dropdown controls. This control is used in situations where you have two or more dropdown controls interdependent on each another like a parent child relationship. For EX: Country-State-City. Each time you change the parent dropdown control, child dropdown control will make a service call to get a list of values. This related dropdowns are called cascading dropdown.
Cascading dropdown can be implemented in a number of ways. You can implement it using custom ASP.NET control or Javascript/Jquery or third party tools like AJaX toolkit. Advantages of AJAX CascadingDropDown are lot of inbuilt features, increased productivity and ajax functionality which reload only your control and not the entire page
CascadingDropDown Properties
Some of the important properties of CascadingDropDown are:
TargetControlID - ID of DropDownList to populate.
PromptText - Optional text to be displayed before the dropdown is selected by the user.
PromptValue - Default value set when PromptText is displayed.
Category - Category of dropdownlist. This is used while populating list of values based on the selection of parent control.
EmptyText - Text to be displayed when DropDownList is empty.
EmptyValue - Value set when DropDownList is empty.
LoadingText - Temporary text displayed to the user when the dropdown list is populating list of values.
ParentControlID - Let you specify the parent ID of the DropDownList.
SelectedValue - Value to be selected by default. Value should match exactly with the value present in the DropDownList.
ServicePath - Web service path that returns a list of item to populate the DropDownList. Leave it blank if you intend to use a page method decorated with the System.Web.Script.Services.ScriptService attribute.
ServiceMethod - Name of the method that returns list of values to populate the DropDownList. This method return type should be CascadingDropDownNameValue[]:
This method has two parameters with the option of using third optional parameter.
First Parameter knownCategoryValues returns the StringDictionary containing the name/value pairs of the currently selected values of dropdown control. Second Parameter category returns the category of dropdown control and the third optional parameter ContextKey returns User/page specific context
Demo
In this demo, I have used three normal ASP.Net dropdown and two AJAX cascading dropdown, one for each child dropdown.
My parent dropdown is
<asp:DropDownList ID="ddlCountry" runat="server" Width="149px"></asp:DropDownList>
And my first child dropdown and cascading dropdown are:
<asp:DropDownList ID="ddlState" runat="server" Width="150px">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="CascadingState" Category="States" runat="server"
LoadingText="Loading States..." PromptText="Select State" ServicePath="WebService.asmx"
ServiceMethod="GetStates" TargetControlID="ddlState" ParentControlID="ddlCountry">
</ajaxToolkit:CascadingDropDown>
Now Let us see how I populate my control by calling the following method of my web service. LoadData loads my data into a collection named Dat. Since my parent control does not have any category, I have used undefined to get the country name. Based on the country name, I filter out the list of states from my collection dat, which are then bounded to my child dropdown control.
[WebMethod]
public CascadingDropDownNameValue[] GetStates(string knownCategoryValues, string Category)
{
LoadData();
List<CascadingDropDownNameValue> cascadingValues = new List<CascadingDropDownNameValue>();
StringDictionary categoryValues = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
string cty = categoryValues["UnDefined"];
foreach (data da in dat.Where(x => x.Country == cty))
{
if (!cascadingValues.Any(x=>x.name==da.State))
cascadingValues.Add(new CascadingDropDownNameValue(da.State, da.State));
}
return cascadingValues.ToArray();
}
In the above debugged code, you can see the country name as India and count of cascadingValues as 3 which means 3 states are returned as result.
Similarly, I get the list of regions from the method declared in webservice to bind my third dropdown control. See the below screenshot for cascading drop down in action
Output
Conclusion:
In this article, we saw how to use cascading dropdown to implement a functionality having parent child relationship between dropdowns.
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Paging in silver light Datagrid
Database cannot be opened due to inaccessible files or insufficient memory or disk space
showing row details on button click of silver light datagrid
Working with AJAX cascading dropdown
Call .net service from javascript
What is Silverlight,its features and how it works
Jquery features, Advantages and disadvantages
Testing performance issues with reflection
Demo of Jquery functions and events for dropdownlist
Post Comment