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" %>
  3. <!DOCTYPE html>
  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;
  8. using System.Data;
  9. using System.Data.SqlClient;
  10. using System.Configuration;
  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;
  20. string strSqlCmd = string.Empty;
  22. protected void Page_Load(object sender, EventArgs e)
  23. {
  24. con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);
  25. }
  27. protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
  28. {
  30. strSqlCmd = "select * from tbl_state where countryid=" + ddlCountry.SelectedIndex;
  31. SqlCommand cmd = new SqlCommand(strSqlCmd,con);
  33. if(con.State!=ConnectionState.Open)
  34. {
  35. con.Open();
  36. }
  37. dr = cmd.ExecuteReader();
  39. ddlState.DataSource = dr;
  40. ddlState.DataTextField = "state";
  41. ddlState.DataValueField = "id";
  42. ddlState.DataBind();
  43. ddlState.Items.Insert(0, new ListItem("-Select-", "0"));
  45. if (con.State != ConnectionState.Closed)
  46. con.Close();
  47. }
  49. protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
  50. {
  52. strSqlCmd = "select * from tbl_city where stateid=" + ddlState.SelectedValue;
  53. SqlCommand cmd = new SqlCommand(strSqlCmd, con);
  55. if (con.State != ConnectionState.Open)
  56. {
  57. con.Open();
  58. }
  59. dr = cmd.ExecuteReader();
  61. ddlCity.DataSource = dr;
  62. ddlCity.DataTextField = "city";
  63. ddlCity.DataBind();
  64. ddlCity.Items.Insert(0, new ListItem("-Select-", "0"));
  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>
  10. </configuration>
Conclusion

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

registration pages

Thanks for reading.