It is ASP.NET Extender that can be attached with the ASP.NET DropDownList Controls. All the drop-down lists in the queue depend on the results of each other. As soon as it changes, the final required result is populated in the last drop-down list. The cascading drop-down list makes a call to web service, to retrieve the values of the next drop-down list in the set.

You can learn more from my previous articles here.

All the logic of getting data depends on the web service. All the changes in one drop-down list fill the data for the next list in the cascading scenario.

To get started, we can use the default options of the cascading drop-down lists and fill them with the use of web service.

Here is the process. We need to first create two drop-down lists and then bind the cascading extender with them. So, let’s start.

Note - For this demo, I am going to use the teams with their employee names.

Step 1 - Create ASP.NET drop-down list for teams and employees.
  1. Teams: < asp: DropDownList ID = "DropDownList1"
  2. runat = "server" > < /asp:DropDownList> < br / > Employees < asp: DropDownList ID = "DropDownList2"
  3. AutoPostBack = "false"
  4. runat = "server" > < /asp:DropDownList>
Step 2 - Add AJAX Control Toolkit Cascading Extender by either dragging or dropping or by writing your own via selecting through rich intelliSense.

As we have two drop-down lists, we need to create two extenders as well. One of them will be the parent while the other will be its child. The selection from parent will fill the data in the child drop-down list. This approach continues till you add the required number of drop-down lists. Whatever the number of drop-down lists is, one of them will act as Master while the others will be Slave.

Here is the extender control code.
  1. <div id="ajaxcontroltoolkitplaceholder">
  2. <ajaxToolkit:CascadingDropDown ID="CDD1" runat="server" TargetControlID=" " Category=" " PromptText="Please select a Team" LoadingText="[Loading Teams...]" ServicePath="WebService.asm" ServiceMethod=" " />
  3. <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID=" " ParentControlID=" " Category=" " PromptText="Please select a Employee" LoadingText="[Loading employees...]" ServicePath="" ServiceMethod=" " /> </div>
Step 3 - Create Service for Operations.

Now, the next thing is to create the web service to fill the drop-down list, using web methods and also, the dependency of parent and child lists.

I am writing full web service code here. Later on, I will explain it in detail.
  1. using AjaxControlToolkit;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web.Script.Services;
  6. using System.Web.Services;
  7. /// <summary>
  8. /// Summary description for WebService
  9. /// </summary>
  10. [WebService(Namespace = "http://tempuri.org/")]
  11. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  12. // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
  13. [ScriptService]
  14. public class WebService: System.Web.Services.WebService {
  15. List < Employee > employees = new List < Employee > ();
  16. List < Team > teams = new List < Team > ();
  17. public WebService() {
  18. //Uncomment the following line if using designed components
  19. //InitializeComponent();
  20. }
  21. [WebMethod]
  22. public CascadingDropDownNameValue[] GetTeamList(string knownCategoryValues, string category) {
  23. teams.Add(new Team {
  24. TeamId = 1, TeamName = "Software Optimization"
  25. });
  26. teams.Add(new Team {
  27. TeamId = 2, TeamName = "Software Development"
  28. });
  29. teams.Add(new Team {
  30. TeamId = 3, TeamName = "Software Quality Assurance"
  31. });
  32. List < CascadingDropDownNameValue > l = new List < CascadingDropDownNameValue > ();
  33. var x = from c in teams select c;
  34. foreach(Team teamsvar in x) {
  35. l.Add(new CascadingDropDownNameValue(teamsvar.TeamName, Convert.ToString(teamsvar.TeamId)));
  36. }
  37. return l.ToArray();
  38. }
  39. [WebMethod]
  40. public CascadingDropDownNameValue[] GetEmployeeList(string knownCategoryValues, string category) {
  41. employees.Add(new Employee {
  42. EmpId = 1, TeamId = 1, EmpName = "Muhammad Aqib"
  43. });
  44. employees.Add(new Employee {
  45. EmpId = 2, TeamId = 1, EmpName = "Ehsan Kamal"
  46. });
  47. employees.Add(new Employee {
  48. EmpId = 3, TeamId = 1, EmpName = "Ghulam Subhani"
  49. });
  50. employees.Add(new Employee {
  51. EmpId = 4, TeamId = 2, EmpName = "Aamir Sultan"
  52. });
  53. employees.Add(new Employee {
  54. EmpId = 5, TeamId = 2, EmpName = "Mehmood ul Hassan"
  55. });
  56. employees.Add(new Employee {
  57. EmpId = 6, TeamId = 2, EmpName = "Waqar Mirza"
  58. });
  59. employees.Add(new Employee {
  60. EmpId = 7, TeamId = 3, EmpName = "Umer Saleem"
  61. });
  62. employees.Add(new Employee {
  63. EmpId = 8, TeamId = 3, EmpName = "Hussnain Khursheed"
  64. });
  65. employees.Add(new Employee {
  66. EmpId = 9, TeamId = 3, EmpName = "Muhammad Nauman"
  67. });
  68. int TeamId;
  69. System.Collections.Specialized.StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
  70. if (!kv.ContainsKey("Team") || !int.TryParse(kv["Team"], out TeamId)) {
  71. throw new ArgumentException("Couldn’t find Team");
  72. };
  73. List < CascadingDropDownNameValue > l = new List < CascadingDropDownNameValue > ();
  74. var x = from c in employees where c.TeamId == TeamId select c;
  75. foreach(Employee employeevar in x) {
  76. l.Add(new CascadingDropDownNameValue(employeevar.EmpName, Convert.ToString(employeevar.EmpId)));
  77. }
  78. return l.ToArray();
  79. }
  80. }
  81. public class Employee {
  82. public int EmpId {
  83. get;
  84. set;
  85. }
  86. public int TeamId {
  87. get;
  88. set;
  89. }
  90. public string EmpName {
  91. get;
  92. set;
  93. }
  94. }
  95. public class Team {
  96. public int TeamId {
  97. get;
  98. set;
  99. }
  100. public string TeamName {
  101. get;
  102. set;
  103. }
  104. }
Step 4 - Bind Webmethods, TargetControlID, and ParentControlID to the DropDownLists.
As the cascading extender is shown above, we can finally bind the WebMethods and TargetControlID.
  1. <div id="ajaxcontroltoolkitplaceholder">
  2. <ajaxToolkit:CascadingDropDown ID="CDD1" runat="server" TargetControlID="DropDownList1" Category="Team" PromptText="Please select a Team" LoadingText="[Loading Teams...]" ServicePath="WebService.asmx" ServiceMethod="GetTeamList" />
  3. <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" ParentControlID="DropDownList1" Category="Employee" PromptText="Please select a Employee" LoadingText="[Loading employees...]" ServicePath="WebService.asmx" ServiceMethod="GetEmployeeList" /> </div>
This is the final Extender Control after filling the WebMethods, Service name, TargetControlID, and ParentControlID.

Here is the final output of the code, written above.

[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category, string contextKey) {.... }
Cascading DropDown Properties

If it is true, then the child DropDownList is not disabled whether the data is loaded or not. If it is set to false (the default value), it is disabled.

AJAX