Working with Multiple Drop down list using Asp.Net

       

              Hi ,  Friends in this article i am going to explain how to handle multiple drop down list in a registration/signup form.

                                                            
                                           In most of the registration form you can find a common thing, there will be 3 drop down list asking you to choose your country, state and city like below...

                The specialty of these drop down list is when you select a country from the 1^st drop down list, it should show all the states of the corresponding country in the 2^nd drop down list, and if you select a state from the 2^nd drop down list, in the 3^rd drop down list it should show all the City names of the corresponding state dynamically.

           

                 Let us take an example for better understanding...

Figure1:-

  Figure2:-

                              Just have look at the above screen shots. In Fig1 when i am selecting country as india, in 2^nd drop down list it is showing all the states of india. In Fig2 when i am selecting state as odisha it is showing all the cities of odisha.

               Lets learn step by step how to design it.

                1. 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

 

   

Enter some data with in it like:-    

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

And enter some data like below...

Now design the 3^rd Table like this:-

And enter some sample data like this

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

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

>>  1^st 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):-

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDDL.aspx.cs" Inherits="DynamicDataBindingWithDropDownList.DynamicDDL" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div align="center">

    <table>

            <tr>

                <th width="18%">Country</th>

                <th width="3%">:</th>

                <td>

                    <asp:DropDownList ID="ddlCountry" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" >

                        <asp:ListItem>--Select--</asp:ListItem>

                        <asp:ListItem>India</asp:ListItem>

                        <asp:ListItem>USA</asp:ListItem>

                        <asp:ListItem>China</asp:ListItem>

                        <asp:ListItem>Japan</asp:ListItem>

                    </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <th>State</th>

                <th>:</th>

                <td>

                  <asp:DropDownList ID="ddlState" runat="server" Width="185px" Height="30px" AutoPostBack="true" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" />

                </td>

            </tr>

            <tr>

                <th>City</th>

                <th>:</th>

                <td>

                    <asp:DropDownList ID="ddlCity" runat="server" Width="185px" Height="30px" ></asp:DropDownList>

                </td>

            </tr>

                </table>

    </div>

    </form>

</body>

</html>

Code View:-

(DynamicDDL.aspx.cs)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

namespace DynamicDataBindingWithDropDownList

{

    public partial class DynamicDDL : System.Web.UI.Page

    {

        SqlConnection con = null;

        SqlCommand cmd = null;

        SqlDataReader dr = null;

        string strSqlCmd = string.Empty;

        protected void Page_Load(object sender, EventArgs e)

        {

             con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);

        }

        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)

        {

         

            strSqlCmd = "select * from tbl_state where countryid=" + ddlCountry.SelectedIndex;

            SqlCommand cmd = new SqlCommand(strSqlCmd,con);

            if(con.State!=ConnectionState.Open)

            {

                con.Open();

            }

            dr = cmd.ExecuteReader();

            ddlState.DataSource = dr;

            ddlState.DataTextField = "state";

            ddlState.DataValueField = "id";

            ddlState.DataBind();

            ddlState.Items.Insert(0, new ListItem("-Select-", "0"));

            if (con.State != ConnectionState.Closed)

                con.Close();

        }

        protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)

        {

           

            strSqlCmd = "select * from tbl_city where stateid=" + ddlState.SelectedValue;

            SqlCommand cmd = new SqlCommand(strSqlCmd, con);

            if (con.State != ConnectionState.Open)

            {

                con.Open();

            }

            dr = cmd.ExecuteReader();

            ddlCity.DataSource = dr;

            ddlCity.DataTextField = "city";

            ddlCity.DataBind();

            ddlCity.Items.Insert(0, new ListItem("-Select-", "0"));

            if (con.State != ConnectionState.Closed)

                con.Close();

        }

    }

}

Web.config:-

<configuration>

  <connectionStrings >

    <add name="MyConStr" connectionString="server=DEBASIS;database=CSharpCorner;trusted_connection=true"/>

  </connectionStrings>

    <system.web>

      <compilation debug="true" targetFramework="4.5.1" />

      <httpRuntime targetFramework="4.5.1" />

    </system.web>

</configuration>

Conclusion:-

  

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

 

                                                          Thanks for Reading....

                                      Please feel free to give your Valuable suggestion!!!