Ajax Cascading Dropdown

Dec 28, 2014 By Mohammed Imtiyaz

Download Downlad [With disable feature]

Demo

Demo

Introduction

This article will explain you how to work with Asp.net Ajax Control Toolkit Cascading Dropdown in Asp.net Web Application.

Here we’ll take three Ajax Cascading Dropdown along with three corresponding Asp.net DropDownlist which will populate data from Sql Database using web services and web methods.

When the page loads, list of countries will populate. On selecting any country, the respective states will populate and on choosing any state, their respective cities will populate.

Working with Ajax Cascading Dropdown

Step 1

Create a database “db_ajaxCascadingDropdown”. You can find the Database Script file in Database Folder. Just execute that file; the database will be automatically created.

Database Structure

Demo

Step 2

Register Ajax Control Toolkit Library on the web page.

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

Step 3

Add Ajax ToolkitScriptManager on the web page

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </ajax:ToolkitScriptManager>

Step 4

Add Ajax Cascading Dropdown control next to Asp.net DropDownList control in the Asp.net Web Page

Aspx

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

 

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

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Ajax - Cascading Dropdown</title>

</head>

<body>

    <form id="frmAjaxCascadingDropdown" runat="server">

   

    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </ajax:ToolkitScriptManager>

   

    <div>

        Select Country:

        <asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>

        <ajax:CascadingDropDown ID="CountryCascading"

                                runat="server"

                                Category="Country"

                                TargetControlID="ddlCountry"

                                LoadingText="Loading Countries..."

                                PromptText="Select Country"

                                ServiceMethod="BindCountryDropdown"

                                ServicePath="DropdownWebService.asmx">

        </ajax:CascadingDropDown>

        Select State:

        <asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList>

        <ajax:CascadingDropDown ID="StateCascading"

                                runat="server"

                                Category="State"

                                TargetControlID="ddlState"

                                ParentControlID="ddlCountry"

                                LoadingText="Loading States..."

                                PromptText="Select State"

                                ServiceMethod="BindStateDropdown"

                                ServicePath="DropdownWebService.asmx">

        </ajax:CascadingDropDown>

 

        Select City:

        <asp:DropDownList ID="ddlregion" runat="server"></asp:DropDownList>

        <ajax:CascadingDropDown ID="RegionCascading"

                                runat="server"

                                Category="Region"

                                TargetControlID="ddlregion"

                                ParentControlID="ddlState"

                                LoadingText="Loading Cities..."

                                PromptText="select"

                                ServiceMethod="BindCityDropdown"

                                ServicePath="DropdownWebService.asmx">

        </ajax:CascadingDropDown>

    </div>

    </form>

</body>

</html>

Step 5

Add WebService file ( DropdownWebService.cs )

using System;

using System.Collections;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data.SqlClient;

using System.Collections.Generic;

using System.Collections.Specialized;

using AjaxControlToolkit;

using System.Configuration;

using System.Data;

 

/// <summary>

/// Summary description for DropdownWebService

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService()]

public class DropdownWebService : System.Web.Services.WebService

{

   SqlConnection objConn = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);

   SqlCommand objCmd;

   SqlDataAdapter objDa;

   DataSet objDs;

 

   [WebMethod]

    public CascadingDropDownNameValue[] BindCountrydropdown(string knownCategoryValues, string category)

    {

        objConn.Open();

        objCmd = new SqlCommand("SELECT country_id_pk, country_name FROM tbl_country", objConn);

        objDa = new SqlDataAdapter(objCmd);

        objCmd.ExecuteNonQuery();

        objDs = new DataSet();

        objDa.Fill(objDs);

        objConn.Close();

        List<CascadingDropDownNameValue> countryDetails = new List<CascadingDropDownNameValue>();

        foreach(DataRow dtRow in objDs.Tables[0].Rows)

        {

           string strCountryId = dtRow["country_id_pk"].ToString();

           string strCountryName = dtRow["country_name"].ToString();

           countryDetails.Add(new CascadingDropDownNameValue(strCountryName,strCountryId));

        }

        return countryDetails.ToArray();

    }

 

   [WebMethod]

   public CascadingDropDownNameValue[] BindStatedropdown(string knownCategoryValues, string category)

   {

       int intCountryId;

       StringDictionary countryDetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

       intCountryId = Convert.ToInt32(countryDetails["country"]);

       objConn.Open();

       objCmd = new SqlCommand("SELECT state_id_pk, state_name FROM tbl_state WHERE country_id_fk = @country_id", objConn);

       objCmd.Parameters.AddWithValue("@country_id", intCountryId);

       objCmd.ExecuteNonQuery();

       objDa = new SqlDataAdapter(objCmd);

       objDs = new DataSet();

       objDa.Fill(objDs);

       objConn.Close();

       List<CascadingDropDownNameValue> stateDetails = new List<CascadingDropDownNameValue>();

       foreach (DataRow dtRow in objDs.Tables[0].Rows)

       {

           string strStateId = dtRow["state_id_pk"].ToString();

           string strStateName = dtRow["state_name"].ToString();

           stateDetails.Add(new CascadingDropDownNameValue(strStateName, strStateId));

       }

       return stateDetails.ToArray();

   }

   [WebMethod]

   public CascadingDropDownNameValue[] BindCityDropdown(string knownCategoryValues, string category)

   {

       int intStateId;

       StringDictionary stateDetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

       intStateId = Convert.ToInt32(stateDetails["state"]);

       objConn.Open();

       objCmd = new SqlCommand("SELECT city_id_pk, city_name FROM tbl_city WHERE state_id_fk = @state_id", objConn);

       objCmd.Parameters.AddWithValue("@state_id", intStateId);

       objCmd.ExecuteNonQuery();

       objDa = new SqlDataAdapter(objCmd);

       objDs = new DataSet();

       objDa.Fill(objDs);

       objConn.Close();

       List<CascadingDropDownNameValue> cityDetails =
new
List<CascadingDropDownNameValue>();

       foreach (DataRow dtRow in objDs.Tables[0].Rows)

       {

           string strCityId = dtRow["city_id_pk"].ToString();

           string strCityName = dtRow["city_name"].ToString();

           cityDetails.Add(new CascadingDropDownNameValue(strCityName, strCityId));

       }

       return cityDetails.ToArray();

   }

}

NOTE: Sometime we come across the situation where we need to disable CascadingDropDown. We cannot disable CascadingDropDown from CodeBehind (C# or VB). In this case, we need to write JavaScript after title tag as follows
NOTE: Add "BehaviorID" attribute to CascadingDropDown to be used in JavaScript.

JavaScript

<script language="javascript" type="text/javascript">

       

        //This function is used to disable DropDownList (ddlCountry, ddlState & ddlregion)

        function pageLoad(sender, args) {

            $find("BidCountry").add_populated(onPopulated);

            $find("BidState").add_populated(onPopulated);

            $find("BidRegion").add_populated(onPopulated);

        }

 

        //NOTE: BidCountry, BidState, BidRegion & BehaviorID of

        //CascadingDropDown (CountryCascading, StateCascading & RegionCascading) respectively.

        function onPopulated() {

           
           
$get('<%= ddlCountry.ClientID %>').disabled = true;

            $get('<%= ddlState.ClientID %>').disabled = true;

            $get('<%= ddlregion.ClientID %>').disabled = true;

        
       
}

    </script>



Post your comment