CascadingDropDown is an ASP.NET AJAX extender that can
be attached to an ASP.NET DropDownList control. It will automatically populate set of DropDownList controls without page postback. Each time the selection of one the DropDownList
controls changes, the CascadingDropDown makes a call to a specified web service
to retrieve the list of values for the next DropDownList in the set.
Here I’ll
explain how to use Ajax Cascading DropDown to bind Country, State and City
details from database. So first we have to create tables
Table
design (Country):
Column
Name
|
Data
Type
|
CountryID
|
int
|
Country
|
varchar(50)
|
Table
design (State):
Column
Name
|
Data
Type
|
CountryID
|
int
|
StateID
|
int
|
State
|
varchar(50)
|
Table
design (City):
Column
Name
|
Data
Type
|
StateID
|
int
|
CityID
|
int
|
City
|
varchar(50)
|
Create
web service:
Right click root folder -> select new item ->
select web service (Ex. CCDDLWebService.cs)

Now we have to use following namespace in web service
using AjaxControlToolkit;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
Note:
Uncomment the following the line in web service for
handling callbacks
[System.Web.Script.Services.ScriptService]
At runtime, the extender will make callbacks to a web
service we specify (which is decorated with the System.Web.Script.Services.ScriptService
attribute). In that web service, it expects a WebMethod with the
following signature
Then we have to create web methods for bind Country, State
and City details from database
Sample
code:
[WebMethod]
public CascadingDropDownNameValue[]
BindCountry(string knownCategoryValues, string category)
{
}
The knownCategoryValues parameter will return a string
containing the currently selected category values, as well as the category to
retrieve values for. For example, if the extender is populating the "Country"
field, you will be passed the values for the "State" and "District"
fields, as well as "Country" to specify the field to return values
for.
The CascadingDropDown class has a helper method for
unpacking the category values:
Sample code:
StringDictionary CountryDetails =
AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
This method will return a StringDictionary containing
the name/value pairs of the currently selected values.
Full
web service code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using AjaxControlToolkit;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
/// <summary>
/// Summary description for
CCDDLWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using
ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class CCDDLWebService : System.Web.Services.WebService {
SqlConnection
conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
//Web method for
bind country
[WebMethod]
public CascadingDropDownNameValue[] BindCountry(string knownCategoryValues, string
category)
{
DataSet
ds = new DataSet();
conn.Open();
SqlCommand
cmd = new SqlCommand("select * from Country", conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
cmd.ExecuteNonQuery();
adp.Fill(ds);
conn.Close();
List<CascadingDropDownNameValue> CountryDetails = new List<CascadingDropDownNameValue>();
foreach
(DataRow DR in
ds.Tables[0].Rows)
{
string
CountryID = DR["CountryID"].ToString();
string
CountryName = DR["Country"].ToString();
CountryDetails.Add(new CascadingDropDownNameValue(CountryName,
CountryID));
}
return
CountryDetails.ToArray();
}
//Web method for
bind state
[WebMethod]
public CascadingDropDownNameValue[] BindState(string knownCategoryValues, string
category)
{
DataSet
ds = new DataSet();
int
CountryID;
StringDictionary
CountryDetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
CountryID = Convert.ToInt32(CountryDetails["Country"]);
conn.Open();
SqlCommand
cmd = new SqlCommand("select * from State where
CountryID=@CountryID", conn);
cmd.Parameters.AddWithValue("@CountryID", CountryID);
cmd.ExecuteNonQuery();
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
conn.Close();
List<CascadingDropDownNameValue> StateDetails = new List<CascadingDropDownNameValue>();
foreach
(DataRow DR in
ds.Tables[0].Rows)
{
string
stateID = DR["StateID"].ToString();
string
statename = DR["State"].ToString();
StateDetails.Add(new CascadingDropDownNameValue(statename,
stateID));
}
return
StateDetails.ToArray();
}
//Web method for
bind city
[WebMethod]
public CascadingDropDownNameValue[] BindCity(string knownCategoryValues, string
category)
{
DataSet
ds = new DataSet();
int
stateID;
StringDictionary
statedetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
stateID = Convert.ToInt32(statedetails["State"]);
conn.Open();
SqlCommand
cmd = new SqlCommand("Select * from City where StateID=@StateID",
conn);
cmd.Parameters.AddWithValue("@StateID", stateID);
cmd.ExecuteNonQuery();
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
conn.Close();
List<CascadingDropDownNameValue> CityDetails = new List<CascadingDropDownNameValue>();
foreach
(DataRow DR in
ds.Tables[0].Rows)
{
string
CityID = DR["CityID"].ToString();
string
City = DR["City"].ToString();
CityDetails.Add(new CascadingDropDownNameValue(City,
CityID));
}
return
CityDetails.ToArray();
}
}
Then we have to create designer aspx page
First we have to use following code to include AJAX
Casacading DropDown in aspx page
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
AJAX
Cascading DropDown properties:
<ajaxToolkit:CascadingDropDown ID="CDD1"
runat="server"
TargetControlID="DropDownList2"
Category="Model"
PromptText="Please select a model"
LoadingText="[Loading models...]"
ServicePath="CarsService.asmx"
ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList1"
SelectedValue="SomeValue" />
You can refer all the properties AJAX Cascading
DropDown here
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
ValidateRequest="false"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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
DropDown</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table align="center">
<tr><td colspan="2"><b>Cascading Dropdown List</b></td></tr>
<tr><td> Select
Country:</td><td>
<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
<asp:CascadingDropDown ID="CountryCascading" runat="server" Category="Country"
TargetControlID="ddlCountry" LoadingText="Loading Countries..." PromptText="Select
Country"
ServiceMethod="BindCountry" ServicePath="~/CCDDLWebService.asmx">
</asp:CascadingDropDown>
</td></tr>
<tr> <td> Select State: </td> <td>
<asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList>
<asp:CascadingDropDown ID="StateCascading" runat="server" Category="State" TargetControlID="ddlState"
ParentControlID="ddlCountry" LoadingText="Loading States..." PromptText="Select
State"
ServiceMethod="BindState" ServicePath="~/CCDDLWebService.asmx">
</asp:CascadingDropDown></td></tr>
<tr><td>Select
Region:</td><td>
<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
<asp:CascadingDropDown ID="CityCascading" runat="server" Category="Region"
TargetControlID="ddlCity" ParentControlID="ddlState" LoadingText="Loading Cities..."
PromptText="select" ServiceMethod="BindCity" ServicePath="~/CCDDLWebService.asmx">
</asp:CascadingDropDown>
</td></tr>
</table>
</div>
</form>
</body>
</html>
Note:
We have to disable EventValidation in aspx page
Sample
code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
EnableEventValidation="false"
%>
happy Coding.!!