CascadingDropDown Control in ASP.NET AJAX
CascadingDropDown is one of the Asp.Net AJAX control which handles the dependency between two or more drop down lists. For example if we have two drop down lists one is for Country and another is State values. Whenever user selects particular country, we have to populate corresponding state values. Before Asp.Net AJAX, we use to handle this one by using asp.net drop down list selected index changed event, but through Asp.Net AJAX CascadingDropDown we can easily handle this type of dependency.
Here we discuss this based on example. For example we have different departments in a company and based on department selection we have to populate the employees drop down list. For that first create Departments and Employees database tables by using below SQL script.
USE [test]
GO
/****** Object: Table [dbo].[Departments] Script Date: 06/23/2012 12:42:57 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Departments](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](50) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
USE [test]
GO
/****** Object: Table [dbo].[Employees] Script Date: 06/23/2012 12:43:07 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employees](
[id] [int] IDENTITY(1,1) NOT NULL,
[deptId] [int] NOT NULL,
[name] [varchar](50) NOT NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
Now create Asp.Net web site and EmpService.asmx web service to populate the Departments and Employees details. In aspx add below code for UI.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" Tagprefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Cascading Drop Down List Example</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>
<div>
<label>Departments</label><asp:DropDownList ID="ddlDept" runat="server"></asp:DropDownList>
<label>Employees</label><asp:DropDownList ID="ddlEmps" runat="server"></asp:DropDownList>
</div>
<ajax:CascadingDropDown ID="cddDept" Category="Departments" runat="server" ServicePath="EmpService.asmx"
ServiceMethod="GetDepartments" TargetControlID="ddlDept"></ajax:CascadingDropDown>
<ajax:CascadingDropDown ID="cddEmp" Category="Employees" runat="server" ServicePath="EmpService.asmx"
ServiceMethod="GetEmployees" TargetControlID="ddlEmps" ParentControlID="ddlDept"></ajax:CascadingDropDown>
</form>
</body>
</html>
As shown above we are using CascadingDropDown to populate Department and Employees dro down lists. If you observe above code, we are mentioning ParentControlID of Employees CascadingDropDown as ddlDept(Departments drop down lists), this is because employees drop down list values have to populate based on department drop down selection.
In EmployeeService.asmx, add below code to populate Department and Employee drop down lists.
using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using AjaxControlToolkit;
///<summary>
/// Summary description for EmpService
///</summary>
[WebService(Namespace = http://tempuri.org/)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class EmpService : System.Web.Services.WebService
{
string strConnection = "Data Source=local;Initial Catalog=test;User ID=sa;Password=raj@Tcs434";
public EmpService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public CascadingDropDownNameValue[] GetDepartments(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> deptValues = new List<CascadingDropDownNameValue>();
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlDataAdapter sqlDad = new SqlDataAdapter("select * from Departments", sqlCon);
DataSet ds = new DataSet();
sqlDad.Fill(ds);
foreach (DataRow _row in ds.Tables[0].Rows)
{
deptValues.Add(new CascadingDropDownNameValue(_row["name"].ToString(), _row["id"].ToString()));
}
return deptValues.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetEmployees(string knownCategoryValues, string category)
{
StringDictionary deptValues = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
int deptID = Convert.ToInt32(deptValues["Departments"]);
List<CascadingDropDownNameValue> empValues = new List<CascadingDropDownNameValue>();
SqlConnection sqlCon = new SqlConnection(strConnection);
SqlDataAdapter sqlDad = new SqlDataAdapter("select * from Employees where deptId = " + deptID, sqlCon);
DataSet ds = new DataSet();
sqlDad.Fill(ds);
foreach (DataRow _row in ds.Tables[0].Rows)
{
empValues.Add(new CascadingDropDownNameValue(_row["name"].ToString(), _row["id"].ToString()));
}
return empValues.ToArray();
}
}
As shown above we are populating the department drop down lists and based on department selection we are populating employees drop down list by using Asp.Net AJAX CascadingDropDown control.
