Post
Ask Question

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. 


Similar Articles