ASP.NET

Working with Multiple Dropdown Lists in ASP.NET

In most of the registration forms you can find a common thing; there will be 3 drop-down lists asking you to choose your country, state, and city as below.

Address information

The specialty of these drop-down lists is when you select a country from the first drop down list, it should show all the states of the corresponding country in the second drop-down list, and if you select a state from the second drop-down list, in the thirs drop-down list it should show all the city names of the corresponding state dynamically.

Let us take an example for better understanding.

Select State
                                                 Figure 1

Select City
                                              Figure 2

Have a look at the above screen shots. In pic1, when I select the country as India, in the second drop-down list it shows all the states of India. In pic2 when I select the state as Odisha it shows all the cities of Odisha.

Lets learn step by step how to design it.

  • First we have to design our database.
  • Now create a database with name “CsharpCorner”.
  • Database: CsharpCorner

Now create a table to all the country names:

Table: tbl_country

create a table

Enter some data with in it like:

Country

Now design the 2nd table “tbl_state” like this:

Design View

And enter some data.

enter some data

Now design the 3rd Table like this:

Table design

And enter some sample data like this:

enter some sample data

Now table creation is completed, establish a primary key and foreign key relationship between the tables.

tables

Now the database part is completed. Let us write code for it,

  • 1st create a ASP.NET empty project name it as “DynamicDataBindingWithDropDownList”.
  • Add a webform in it with name “DinamicDDL” and write the following code inside it.

Design View: (DynamicDDL.aspx)

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDDL.aspx.cs" Inherits="DynamicDataBindingWithDropDownList.DynamicDDL" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div align="center">  
  12.     <table>  
  13.             <tr>  
  14.                 <th width="18%">Country</th>  
  15.                 <th width="3%">:</th>  
  16.                 <td>  
  17.                     <asp:DropDownList ID="ddlCountry" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" >  
  18.                         <asp:ListItem>--Select--</asp:ListItem>  
  19.                         <asp:ListItem>India</asp:ListItem>  
  20.                         <asp:ListItem>USA</asp:ListItem>  
  21.                         <asp:ListItem>China</asp:ListItem>  
  22.                         <asp:ListItem>Japan</asp:ListItem>  
  23.                     </asp:DropDownList>  
  24.                 </td>  
  25.             </tr>  
  26.             <tr>  
  27.                 <th>State</th>  
  28.                 <th>:</th>  
  29.                 <td>  
  30.                   <asp:DropDownList ID="ddlState" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" />  
  31.                 </td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <th>City</th>  
  35.                 <th>:</th>  
  36.                 <td>  
  37.                     <asp:DropDownList ID="ddlCity" runat="server" Width="185px" Height="30px" ></asp:DropDownList>  
  38.                 </td>  
  39.             </tr>  
  40.                 </table>  
  41.     </div>  
  42.     </form>  
  43. </body>  
  44. </html>  
Code View: (DynamicDDL.aspx.cs)
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. using System.Data;  
  9. using System.Data.SqlClient;  
  10. using System.Configuration;  
  11.   
  12. namespace DynamicDataBindingWithDropDownList  
  13. {  
  14.     public partial class DynamicDDL : System.Web.UI.Page  
  15.     {  
  16.         SqlConnection con = null;  
  17.         SqlCommand cmd = null;  
  18.         SqlDataReader dr = null;  
  19.   
  20.         string strSqlCmd = string.Empty;  
  21.   
  22.         protected void Page_Load(object sender, EventArgs e)  
  23.         {  
  24.              con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);  
  25.         }  
  26.   
  27.         protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)  
  28.         {  
  29.             
  30.             strSqlCmd = "select * from tbl_state where countryid=" + ddlCountry.SelectedIndex;  
  31.             SqlCommand cmd = new SqlCommand(strSqlCmd,con);  
  32.   
  33.             if(con.State!=ConnectionState.Open)  
  34.             {  
  35.                 con.Open();  
  36.             }  
  37.             dr = cmd.ExecuteReader();  
  38.   
  39.             ddlState.DataSource = dr;  
  40.             ddlState.DataTextField = "state";  
  41.             ddlState.DataValueField = "id";  
  42.             ddlState.DataBind();  
  43.             ddlState.Items.Insert(0, new ListItem("-Select-", "0"));  
  44.   
  45.             if (con.State != ConnectionState.Closed)  
  46.                 con.Close();  
  47.         }  
  48.   
  49.         protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)  
  50.         {  
  51.               
  52.             strSqlCmd = "select * from tbl_city where stateid=" + ddlState.SelectedValue;  
  53.             SqlCommand cmd = new SqlCommand(strSqlCmd, con);  
  54.   
  55.             if (con.State != ConnectionState.Open)  
  56.             {  
  57.                 con.Open();  
  58.             }  
  59.             dr = cmd.ExecuteReader();  
  60.   
  61.             ddlCity.DataSource = dr;  
  62.             ddlCity.DataTextField = "city";  
  63.             ddlCity.DataBind();  
  64.             ddlCity.Items.Insert(0, new ListItem("-Select-", "0"));  
  65.   
  66.             if (con.State != ConnectionState.Closed)  
  67.                 con.Close();  
  68.         }  
  69.     }  
  70. }   

Web.config:

  1. <configuration>  
  2.   <connectionStrings >  
  3.     <add name="MyConStr" connectionString="server=DEBASIS;database=CSharpCorner;trusted_connection=true"/>  
  4.   </connectionStrings>  
  5.     <system.web>  
  6.       <compilation debug="true" targetFramework="4.5.1" />  
  7.       <httpRuntime targetFramework="4.5.1" />  
  8.     </system.web>  
  9.   
  10. </configuration>  
Conclusion

We can use this code when we are creating registration pages like this

registration pages

Thanks for reading. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs