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.!!