How to implement cascaded DropDownList in ASP.Net with C#

In this article, I will explain you how to implement cascaded DropDownList or multiple dependent DropDownList control in asp.net with from DataBase.

Creating SQL Tables

First, we need to create 3 different tables: tblCountry, tblState , tblCity. And insert related values into tables. Below is the script to create tables.

create table tblCountry
(
CountryId int ,
CountryName varchar(20)
)
insert into tblCountry values(1,'India')
insert into tblCountry values(2,'USA')

create table tblState
(
StateId int,
StateName varchar(20),
CountryId int
)
insert into tblState values(1,'Maharashtra',1)
insert into tblState values(2,'Gujarat',1)
insert into tblState values(3,'NewYork',2)
insert into tblState values(4,'California',2)

create table tblCity
(
 CityId int,
 CityName varchar(20),
 StateId int,
)
insert into tblCity values(1,'Mumbai',1)
insert into tblCity values(2,'Pune',1)
insert into tblCity values(3,'Ahmedabad',2)
insert into tblCity values(4,'Surat',2)
insert into tblCity values(5,'New York City',3)
insert into tblCity values(6,'Rochester',3)
insert into tblCity values(7,'Los Angeles',4)
insert into tblCity values(8,'San Diego',4)

In Web.config File

Write your connection string in web.config within <connectionStrings> tag.

<configuration>
  <connectionStrings>
<add name="MyConnString" connectionString="server=XXXX;database=..;uid=..;password=..;" 
    providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>

In Designer File

In designer file, create 3 DropDownList control named as ddlCountry , ddlState, ddlCity. On select of country DropDown, state related to that country will get bind. On select of state DropDown, city related to that state will get bind. And there is a clear Button to clear the state and city Dropdowns.

<center>
 <asp:DropDownList ID="ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
 AutoPostBack="true"></asp:DropDownList>
 &nbsp;&nbsp;&nbsp;
 <asp:DropDownList ID="ddlState" runat="server" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" 
 AutoPostBack="true"></asp:DropDownList>
 &nbsp;&nbsp;&nbsp;
 <asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
 &nbsp;&nbsp;&nbsp;
 <asp:Button id="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click"></asp:Button>
 </center>

Namespace Used

Include the below Namespaces.

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Complete C# Code

string MyConnString = ConfigurationManager.ConnectionStrings["MyConnString"].ConnectionString;
        //retrieving connection string from web.config file
        SqlConnection con = null;
        SqlCommand cmd = null;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindCountry();
            }

        }

        private void BindCountry()
        {
            con = new SqlConnection(MyConnString);
            cmd = new SqlCommand("select CountryId,CountryName from tblCountry", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            sda.Fill(ds);
            ddlCountry.DataSource = ds;
            ddlCountry.DataTextField = "CountryName";
            ddlCountry.DataValueField = "CountryId";
            ddlCountry.DataBind();
            ddlCountry.Items.Insert(0, new ListItem("--select--"));
        }

        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddlState.Items.Clear();
            ddlCity.Items.Clear();
            if (ddlCountry.SelectedIndex != 0)
            {
                con = new SqlConnection(MyConnString);
                cmd = new SqlCommand("select StateId,StateName from tblState where CountryId=" 
                    + ddlCountry.SelectedItem.Value + "", con);
                cmd.CommandType = CommandType.Text;
                con.Open();
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                sda.Fill(ds);
                ddlState.DataSource = ds;
                ddlState.DataTextField = "StateName";
                ddlState.DataValueField = "StateId";
                ddlState.DataBind();
                ddlState.Items.Insert(0, new ListItem("--select--"));
            }
        }

        protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddlCity.Items.Clear();
            if (ddlState.SelectedIndex != 0)
             {
                con = new SqlConnection(MyConnString);
                 cmd = new SqlCommand("select CityId,CityName from tblCity where StateId="
                      + ddlState.SelectedItem.Value + "", con);
                 cmd.CommandType = CommandType.Text;
                 con.Open();
                 SqlDataAdapter sda = new SqlDataAdapter(cmd);
                 DataSet ds = new DataSet();
                 sda.Fill(ds);
                 ddlCity.DataSource = ds;
                 ddlCity.DataTextField = "CityName";
                 ddlCity.DataValueField = "CityId";
                 ddlCity.DataBind();
                 ddlCity.Items.Insert(0, new ListItem("--select--"));
             }

        }

        protected void btnClear_Click(object sender, EventArgs e)
        {
            ddlState.Items.Clear();
            ddlCity.Items.Clear();
            ddlCountry.SelectedIndex = 0;
          
        }

Output

Output will be shown as below.

How to implement cascaded dropdownlist in asp.net with C#

Monday, 22 February 2016