Cascading DropDownList In ASP.NET

In this article, you will learn how to create cascading DropDownList in ASP.NET.

Sometimes, it is required to make a dropdown which is dependent to another one, I mean to say if the first dropdownlist will be selected, on the basis of selected value, the second dropdownlist will be bind.

Here I am going to take a very simple example for cascading dropdown and it is selection of country, state and city.

Step 1: Create Database and Table in SQL.

So, I have created a database “Test” with three different tables “tblCountry”, “tblState” and “tblCity”.

See the following structure I have made for these tables.

TblCountry

This table contains the list of countries. In this table, there are two columns, first one is CountryId and it is primary key and second one is
 CountryName.


CountryName

TblState

This table contains the list of state. In this table, there are three columns; there are StateId, StateName and Fk_CountryId. There is also relationship between tblCountry and tblState.

TblCountry

TblCity

This table contains the list of City corresponding to their city. In this table, there are three columns: CityId, CityName and StateId. There is also relationship between tblState and tblCity.

TblState

Step 2: Create ASP.NET Project

Open Visual Studio and from the File menu, choose New > Project. It will open a New Project window. From this window, you need to choose ASP.NET Web Application and provide the name of the project and click on OK.

It will open a New ASP.NET Project dialog, where we can choose different template for the project. From the template, you need to select Web Forms and click on OK.

web form

Now add a new web form “Location.aspx” into the solution.

New ASP.NET Project dialog

Create the following structure for cascading DropDownList demo. First you need to select the name of the country and after that it will load all corresponding states into the State DropDownList.

After selecting state, it will be doing same and load all the corresponding cities into the city DropDownList.

Location

Make the code changes as in the following to load the country on page load and on the basis of selection, It will proceed to the next operation.

Location.aspx.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Configuration;  
  4. using System.Data;  
  5. using System.Data.SqlClient;  
  6. using System.Linq;  
  7. using System.Web;  
  8. using System.Web.UI;  
  9. using System.Web.UI.WebControls;  
  10. namespace CascadingDemo  
  11. {  
  12.     public partial class Location: System.Web.UI.Page  
  13.     {  
  14.         SqlConnection objSqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["myconnection"].ConnectionString);  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.             if (objSqlConnection.State == ConnectionState.Closed)  
  18.             {  
  19.                 objSqlConnection.Open();  
  20.             }  
  21.             if (!IsPostBack)  
  22.             {  
  23.                 ddlState.Items.Insert(0, new ListItem("--Select State--""0"));  
  24.                 ddlCity.Items.Insert(0, new ListItem("--Select City--""0"));  
  25.                 BindCountries();  
  26.             }  
  27.         }  
  28.         protected void BindCountries()  
  29.         {  
  30.             try  
  31.             {  
  32.                 SqlDataAdapter objSQLAdapter = new SqlDataAdapter("select * from tblCountry", objSqlConnection);  
  33.                 DataSet objDataSet = new DataSet();  
  34.                 objSQLAdapter.Fill(objDataSet);  
  35.                 ddlCountry.DataSource = objDataSet;  
  36.                 ddlCountry.DataTextField = "CountryName";  
  37.                 ddlCountry.DataValueField = "CountryId";  
  38.                 ddlCountry.DataBind();  
  39.                 ddlCountry.Items.Insert(0, new ListItem("--Select Country--""0"));  
  40.             }  
  41.             catch (Exception ex)  
  42.             {  
  43.                 Response.Write("Exception in Binding Country Dropdownlist : " + ex.Message.ToString());  
  44.             }  
  45.             finally  
  46.             {  
  47.                 objSqlConnection.Close();  
  48.             }  
  49.         }  
  50.         protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)  
  51.         {  
  52.             try  
  53.             {  
  54.                 int CountryId = Convert.ToInt32(ddlCountry.SelectedValue);  
  55.                 SqlDataAdapter objSQLAdapter = new SqlDataAdapter("select * from tblState where Fk_CountryId=" + CountryId, objSqlConnection);  
  56.                 DataSet objDataSet = new DataSet();  
  57.                 objSQLAdapter.Fill(objDataSet);  
  58.                 ddlState.DataSource = objDataSet;  
  59.                 ddlState.DataTextField = "StateName";  
  60.                 ddlState.DataValueField = "StateId";  
  61.                 ddlState.DataBind();  
  62.                 ddlState.Items.Insert(0, new ListItem("--Select State--""0"));  
  63.                 if (ddlState.SelectedValue == "0")  
  64.                 {  
  65.                     ddlCity.Items.Clear();  
  66.                     ddlCity.Items.Insert(0, new ListItem("--Select City--""0"));  
  67.                 }  
  68.             }  
  69.             catch (Exception ex)  
  70.             {  
  71.                 Response.Write("Exception in Binding State Dropdownlist: " + ex.Message.ToString());  
  72.             }  
  73.             finally  
  74.             {  
  75.                 objSqlConnection.Close();  
  76.             }  
  77.         }  
  78.         protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)  
  79.         {  
  80.             try  
  81.             {  
  82.                 int StateId = Convert.ToInt32(ddlState.SelectedValue);  
  83.                 SqlDataAdapter objSQLAdapter = new SqlDataAdapter("select * from tblCity where StateId=" + StateId, objSqlConnection);  
  84.                 DataSet objDataSet = new DataSet();  
  85.                 objSQLAdapter.Fill(objDataSet);  
  86.                 ddlCity.DataSource = objDataSet;  
  87.                 ddlCity.DataTextField = "CityName";  
  88.                 ddlCity.DataValueField = "CityId";  
  89.                 ddlCity.DataBind();  
  90.                 ddlCity.Items.Insert(0, new ListItem("--Select City--""0"));  
  91.             }  
  92.             catch (Exception ex)  
  93.             {  
  94.                 Response.Write("Exception in Binding City Dropdownlist: " + ex.Message.ToString());  
  95.             }  
  96.             finally  
  97.             {  
  98.                 objSqlConnection.Close();  
  99.             }  
  100.         }  
  101.     }  
  102. }  
Location.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Location.aspx.cs" Inherits="CascadingDemo.Location" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div>  
  12.                 <fieldset style="width: 100%">  
  13.                     <legend>Cascading DropDownList Demo</legend>  
  14.                     <table>  
  15.                         <tr>  
  16.                             <td colspan="2">  
  17.                                 <br /> </td>  
  18.                         </tr>  
  19.                         <tr>  
  20.                             <td>Select Country:</td>  
  21.                             <td>  
  22.                                 <asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"> </asp:DropDownList>  
  23.                             </td>  
  24.                         </tr>  
  25.                         <tr>  
  26.                             <td>Select State:</td>  
  27.                             <td>  
  28.                                 <asp:DropDownList ID="ddlState" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlState_SelectedIndexChanged"> </asp:DropDownList>  
  29.                             </td>  
  30.                         </tr>  
  31.                         <tr>  
  32.                             <td>Select City:</td>  
  33.                             <td>  
  34.                                 <asp:DropDownList ID="ddlCity" runat="server" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged"></asp:DropDownList>  
  35.                             </td>  
  36.                         </tr>  
  37.                     </table>  
  38.                 </fieldset>  
  39.             </div>  
  40.         </form>  
  41.     </body>  
  42.   
  43.     </html>  
Web.config

For the database connectivity, you need to add the connection string into the web.config.
  1. <connectionStrings>  
  2.    <add name="myconnection" connectionString="Data Source=my-computer; database=Test; User Id=sa; Pwd=*******;" providerName="System.Data.SqlClient" />  
  3. </connectionStrings>  
Output

To run the project, press F5 and you will see the following output,

Select Country

Select Country

Select State

Select State

Select City


Select City

Thanks for reading this article, hope you enjoyed it.