How to create Ajax cascading dropdown using Ajax enabled WCF ?

Cascading DDL


While working on web based project, we will get scenario to create cascading drop-down. But if there are more data and you are binding the drop-down using direct approach then performance will be very slow.

In Ajax toolkit there are Cascading drop-down control, using this control we can create very responsive and interactive cascading drop-down. It will give good performance.

Note: I suppose that you are knowing how to use ajax enable WCF in

Here is very simple steps to do this task

Steps 1: Drag the Cascading Ajax Control from ajax toolkit and drop in your designer and configure the control like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head id="Head1" runat="server">
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <legend><b>Ajax Cascading Dropdown Demo</b></legend>
   <br />
            <td style="width: 80px">
                <asp:DropDownList ID="ddlCountries" runat="server" Width="150">
                <asp:CascadingDropDown ID="cdlCountries" TargetControlID="ddlCountries" PromptText="Select Country"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCountries" runat="server"
                    Category="CountryId" LoadingText="Loading..." />
                <asp:DropDownList ID="ddlStates" runat="server" Width="150">
                <asp:CascadingDropDown ID="cdlStates" TargetControlID="ddlStates" PromptText="Select State"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetStates" runat="server"
                    Category="StateId" ParentControlID="ddlCountries" LoadingText="Loading..." />
                <asp:DropDownList ID="ddlCities" runat="server" Width="150">
                <asp:CascadingDropDown ID="cdlCities" TargetControlID="ddlCities" PromptText="Select City"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCities" runat="server"
                    Category="CityId" ParentControlID="ddlStates" LoadingText="Loading..." />

Step2 : Write the Ajax Enabled WCF code to fetch data from database on basis of categoryId

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using AjaxControlToolkit;
using System.Configuration;
using System.Data.SqlClient;

[ServiceContract(Namespace = "MyTestService")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
	// To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
	// To create an operation that returns XML,
	//     add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
	//     and include the following line in the operation body:
	//         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
    public List<CascadingDropDownNameValue> GetCountries(string knownCategoryValues)
        string query = "SELECT CountryName, CountryId FROM Countries";
        List<CascadingDropDownNameValue> countries = GetData(query);
        return countries;

    public List<CascadingDropDownNameValue> GetStates(string knownCategoryValues)
        // this will find the countryId
        string country = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["CountryId"];
        string query = string.Format("SELECT StateName, StateId FROM States WHERE CountryId = {0}", country);
        List<CascadingDropDownNameValue> states = GetData(query);
        return states;

    public List<CascadingDropDownNameValue> GetCities(string knownCategoryValues)
        // this will find the StateId
        string state = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["StateId"];
        string query = string.Format("SELECT CityName, CityId FROM Cities WHERE StateId = {0}", state);
        List<CascadingDropDownNameValue> cities = GetData(query);
        return cities;

    private List<CascadingDropDownNameValue> GetData(string query)
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
        using (SqlConnection con = new SqlConnection(conString))
            cmd.Connection = con;
            using (SqlDataReader reader = cmd.ExecuteReader())
                while (reader.Read())
                    values.Add(new CascadingDropDownNameValue
                        name = reader[0].ToString(),
                        value = reader[1].ToString()
                return values;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.