In this article I will explain with an example, how to build Country State City Cascading DropDownList in ASP.Net i.e. Country State City Cascading DropDownList populated from Database and dependent on each other.
First the Country DropDownList will be populated on Page Load event. Then when a Country is selected, the SelectedIndexChanged event will fire and the State DropDownList will be populated based on the selected Country.
In similar way, when the State is selected, the SelectedIndexChanged event will fire and the City DropDownList will be populated based on the selected State.
 
 
Database
Three tables Countries, State and City are created with the following schema.
Countries Table
Cascading DropDownList for Country/State/City in ASP.Net
 
States Table
Cascading DropDownList for Country/State/City in ASP.Net
 
Cities Table
Cascading DropDownList for Country/State/City in ASP.Net
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
HTML Markup
The HTML Markup consists of three DropDownLists each for Country, State and City. The Country and the State DropDownLists have been assigned SelectedIndexChanged event handlers.
All the three DropDownLists for Country, State and City are placed inside an AJAX UpdatePanel control.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table>
            <tr>
                <td>Country:</td>
                <td><asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack = "true" OnSelectedIndexChanged = "Country_Changed">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <asp:DropDownList ID="ddlStates" runat="server" AutoPostBack = "true" OnSelectedIndexChanged = "State_Changed">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <asp:DropDownList ID="ddlCities" runat="server">
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:UpdatePanel>
 
 
Function to bind and populate the ASP.Net DropDownList from Database
The following function accepts the reference of the DropDownList, the SQL Query, the name of the Column to be displayed in Text part and the name of the Column to be displayed in Value part.
The SQL Query is executed and the DropDownList is populated from Database.
C#
private void BindDropDownList(DropDownList ddl, string query, string text, string value, string defaultText)
{
    string conString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            con.Open();
            ddl.DataSource = cmd.ExecuteReader();
            ddl.DataTextField = text;
            ddl.DataValueField = value;
            ddl.DataBind();
            con.Close();
        }
    }
    ddl.Items.Insert(0, new ListItem(defaultText, "0"));
}
 
VB.Net
Private Sub BindDropDownList(ddl As DropDownList, query As String, text As String, value As String, defaultText As String)
    Dim conString As String = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
    Dim cmd As New SqlCommand(query)
    Using con As New SqlConnection(conString)
        Using sda As New SqlDataAdapter()
            cmd.Connection = con
            con.Open()
            ddl.DataSource = cmd.ExecuteReader()
            ddl.DataTextField = text
            ddl.DataValueField = value
            ddl.DataBind()
            con.Close()
        End Using
    End Using
    ddl.Items.Insert(0, New ListItem(defaultText, "0"))
End Sub
 
 
Populating the Country DropDownList from Database
Inside the Page Load event, the Country DropDownList is populated from Database using the BindDropDownList generic function (discussed earlier) and the State and the City DropDownLists are disabled.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string query = "select CountryId, CountryName from Countries";
        BindDropDownList(ddlCountries, query, "CountryName", "CountryId", "Select Country");
        ddlStates.Enabled = false;
        ddlCities.Enabled = false;
        ddlStates.Items.Insert(0, new ListItem("Select State", "0"));
        ddlCities.Items.Insert(0, new ListItem("Select City", "0"));
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim query As String = "select CountryId, CountryName from Countries"
        BindDropDownList(ddlCountries, query, "CountryName", "CountryId", "Select Country")
        ddlStates.Enabled = False
        ddlCities.Enabled = False
        ddlStates.Items.Insert(0, New ListItem("Select State", "0"))
        ddlCities.Items.Insert(0, New ListItem("Select City", "0"))
    End If
End Sub
 
 
Populating the State DropDownList from Database
Inside the SelectedIndexChanged event of the Country DropDownList, the value of the Country is used to populate the State DropDownList and the State DropDownList is enabled.
C#
protected void Country_Changed(object sender, EventArgs e)
{
    ddlStates.Enabled = false;
    ddlCities.Enabled = false;
    ddlStates.Items.Clear();
    ddlCities.Items.Clear();
    ddlStates.Items.Insert(0, new ListItem("Select State", "0"));
    ddlCities.Items.Insert(0, new ListItem("Select City", "0"));
    int countryId = int.Parse(ddlCountries.SelectedItem.Value);
    if (countryId > 0)
    {
        string query = string.Format("select StateId, StateName from States where CountryId = {0}", countryId);
        BindDropDownList(ddlStates, query, "StateName", "StateId", "Select State");
        ddlStates.Enabled = true;
    }
}
 
VB.Net
Protected Sub Country_Changed(sender As Object, e As EventArgs)
    ddlStates.Enabled = False
    ddlCities.Enabled = False
    ddlStates.Items.Clear()
    ddlCities.Items.Clear()
    ddlStates.Items.Insert(0, New ListItem("Select State", "0"))
    ddlCities.Items.Insert(0, New ListItem("Select City", "0"))
    Dim countryId As Integer = Integer.Parse(ddlCountries.SelectedItem.Value)
    If countryId > 0 Then
        Dim query As String = String.Format("select StateId, StateName from States where CountryId = {0}", countryId)
        BindDropDownList(ddlStates, query, "StateName", "StateId", "Select State")
        ddlStates.Enabled = True
    End If
End Sub
 
 
Populating the City DropDownList from Database
Inside the SelectedIndexChanged event of the State DropDownList, the value of the State is used to populate the State DropDownList and the City DropDownList is enabled.
C#
protected void State_Changed(object sender, EventArgs e)
{
    ddlCities.Enabled = false;
    ddlCities.Items.Clear();
    ddlCities.Items.Insert(0, new ListItem("Select City", "0"));
    int stateId = int.Parse(ddlStates.SelectedItem.Value);
    if (stateId > 0)
    {
        string query = string.Format("select CityId, CityName from Cities where StateId = {0}", stateId);
        BindDropDownList(ddlCities, query, "CityName", "CityId", "Select City");
        ddlCities.Enabled = true;
    }
}
 
VB.Net
Protected Sub State_Changed(sender As Object, e As EventArgs)
    ddlCities.Enabled = False
    ddlCities.Items.Clear()
    ddlCities.Items.Insert(0, New ListItem("Select City", "0"))
    Dim stateId As Integer = Integer.Parse(ddlStates.SelectedItem.Value)
    If stateId > 0 Then
        Dim query As String = String.Format("select CityId, CityName from Cities where StateId = {0}", stateId)
        BindDropDownList(ddlCities, query, "CityName", "CityId", "Select City")
        ddlCities.Enabled = True
    End If
End Sub
 
 
Screenshot
Cascading DropDownList for Country/State/City in ASP.Net
 
 
Demo
View Demo
 
 
Downloads