Cascading A DropDownList With Another DropDownList in ASP.Net

This article shows how to cascade one dropdown list with another dropdown list in ASP.Net using C#. Here I took three dropdown lists, Country, State and City. You will see how to fill the state dropdownlist based on the data of the country dropdownlist. So here we go!

Initial Chamber

Step 1

Open your VS10, create an empty website (I hope you will get the idea of creating an empty website from my previous articles). Name it "Cascade_dropdownlist_demo".

Step 2

In Solution Explorer, right-click on your website then select Add New Item -> Web Form. Name it dropdownlist_demo.aspx (or whatever you want to give the name. No pressure. :P). In Solution Explorer you will get your dropdownlist_demo.aspx and dropdownlist.aspx.cs, both files.

Step 3

Again you need to get to Add New Item and Select -> SQL Server Database. (You know very well what we must do if they prompt you by asking Would you like to place your Database inside the App_Data_Folder? Say “Yes”, always). You will get your database in the Server Explorer (CTRL + ALT + S).

Database Chamber

Step 4

In Server Explorer, click on the arrow sign of your database (“Database.mdf”). Go to tables then right-click and select Add New Table.

1. Country Table : tbl_country (Don't Forgot – IS INDENTITY = “TRUE”)
   
   
   
   
2. State Table : tbl_State (IS IDENTITY=”TRUE”)
   
   
   
   
3. City Table : tbl_city (IS IDENTITY= “TRUE”)
   
   

Make “Is Identity True”. Don't forgot it. Another thing is the data of the tables that you must enter manually. Just right-click on you tables (Country, State and City) then select Show Table Data. Here you need to add all the data that will be shown in the dropdown list when we run the project.

Design Chamber

Step 5

Open you dropdownlist.aspx from Solution Explorer and start designing you application.

It will look Like this:

Here is your design code:

<form id="form1" runat="server">
    <table style="width: 100%; height: 86px;">
        <tr>
            <td class="style1">
                <asp:Label ID="Label1" runat="server" Text="Choose Your Country :"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
                    DataTextField="country_name" DataValueField="country_id" AppendDataBoundItems="true"
                    onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem Value="0">--Select Country--</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style1">
                <asp:Label ID="Label2" runat="server" Text="Choose Your State :"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="true" DataTextField="state_name"
                    DataValueField="state_id" AutoPostBack="True"
                    onselectedindexchanged="DropDownList2_SelectedIndexChanged">
                    <asp:ListItem Value="0">-- Select State--</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style1">
                <asp:Label ID="Label3" runat="server" Text="Choose Your City :"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="DropDownList3" runat="server" AppendDataBoundItems="true" DataTextField="city_name"
                    DataValueField="city_id">
                    <asp:ListItem Value="0">-- Select City--</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                 </td>
        </tr>
    </table>
    <div>
   </div>
</form>

Coding Chamber

Step 6

Now we are entering into our Code Zone. Let's begin by adding the following namespaces:

Here is the code for cascading more than one dropdown list in ASP.Net:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        SqlCommand cmd = new SqlCommand("select * from tbl_country", con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        DropDownList1.DataSource = dt;
        DropDownList1.DataBind();

    }

}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList2.Items.Clear();
    DropDownList2.Items.Add("Select State");

    SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
    SqlCommand cmd = new SqlCommand("select * from tbl_state where country_id=" + DropDownList1.SelectedItem.Value, con);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    DropDownList2.DataSource= dt;
    DropDownList2.DataBind();
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList3.Items.Clear();
    DropDownList3.Items.Add("Select State");

    SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
    SqlCommand cmd = new SqlCommand("select * from tbl_city where state_id=" + DropDownList2.SelectedItem.Value, con);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);

    DropDownList3.DataSource = dt;
    DropDownList3.DataBind();

}

You can get your Connection String by going to your database (in Server Explorer). Right-click Properties and then you can see there “Connection String”. Copy it and paste it into the SQL connection field. Yeah! Surely your connection string is quite different from me, initially it will look like this:

Before

Connection String ("Data Source=.\SQLEXPRESS;AttachDbFilename="C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data\Database.mdf";Integrated Security=True;User Instance=True");

You need to remove the path and make it short like:

C:\Users\Nilesh\Documents\Visual Studio 2010\WebSites\WebSite13\App_Data -- > Remove this

And add instead of this |DataDirectory|

After

Modified Connection String (@"DataSource=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");

Output Chamber

I hope you liked this. Enjoy your day with this tutorial.