ASP. NET Bind country, state and city with DropDownList using VB.NET

This article displays countries, states and cities with DropDownList in ASP.NET.
  • 4321
 

 This article shows how to create three DropDownList to display countries, states and cities. When you select a country then its automatically shows the states name of that country in next DropDownList. Then when you select a state, the cities DropDownList will fetch the related cities for that state.

Creating table for country, state and city.

Country Table

Create Table Country

(

CountryId Int Primary Key,

County Varchar(30)

)

Countrystate Table

Create Table countryState

(

StateId Int Primary Key,

CountryId Int Foreign Key References Country(CountryId),

State Varchar(30)

)

StateCity Table

Create Table stateCity

(

CityId Int,

StateId Int Foreign Key References countryState(StateId),

City Varchar(30)

)

Now insert values in the table.

Insert Into Country Values(101,'India')

Insert Into Country Values(102,'USA')

Insert Into Country Values(103,'Pakistan')

 

Insert Into countryState Values(1001,101,'U.P')

Insert Into countryState Values(1002,101,'Kerala')

Insert Into countryState Values(1003,101,'Kasmir')

Insert Into countryState Values(2001,102,'Colorado')

Insert Into countryState Values(2002,102,'Delaware')

Insert Into countryState Values(2003,102,'Georgia')

Insert Into countryState Values(3001,103,'Punjap')

Insert Into countryState Values(3002,103,'Baluchistan')

Insert Into countryState Values(3003,103,'Sind')

 

Insert Into stateCity Values(11,1001,'Kanpur')

Insert Into stateCity Values(12,1001,'Dg')

Insert Into stateCity Values(21,1002,'Pal')

Insert Into stateCity Values(22,1002,'Tri')

Insert Into stateCity Values(31,1003,'Jammu')

Insert Into stateCity Values(32,1003,'Manali')

Insert Into stateCity Values(41,2001,'Alabama')

Insert Into stateCity Values(42,2001,'Arizona')

Insert Into stateCity Values(51,2002,'Bellefonte')

Insert Into stateCity Values(52,2002,'Felton')

Insert Into stateCity Values(61,2003,'Rustavi')

Insert Into stateCity Values(62,2003,'Kobulati')

Insert Into stateCity Values(71,3001,'Lahore')

Insert Into stateCity Values(72,3001,'Faisalabad')

Insert Into stateCity Values(81,3002,'Quetta')

Insert Into stateCity Values(82,3002,'Nasirabad')

Insert Into stateCity Values(91,3003,'Krachi')

Insert Into stateCity Values(92,3003,'Mirpur khas')

Now select it.

select * from Country;

select * from  countryState;

select * from stateCity;

Now drag and drop three DropDownList to display countries, states and cities and three update panel control on the page.

ddl1 (1).gif
 

Figure1

.aspx code

<head runat="server">

   <title></title>

   <style type="text/css">

       .style1

        {

           color#000066;

        }

   </style>

</head>

<body>

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

  <asp:ScriptManager ID="ScriptManager1" runat="server">

   </asp:ScriptManager>

   <div>

       <asp:UpdatePanel ID="countrypanel" runat="server">

          <ContentTemplate >

              <span class="style1"><strong>Select Country:</strong></span>

             <asp:DropDownList ID="ddlcountry" AutoPostBack ="true" AppendDataBoundItems

="true" runat="server" Height="20px" Width="156px"   

onselectedindexchanged="ddlcountry_SelectedIndexChanged" BackColor="#3399FF"

                  ForeColor="#FF9999">

           </asp:DropDownList>

       </ContentTemplate>

 

     <Triggers>

      <asp:AsyncPostBackTrigger ControlID ="ddlcountry" />

     </Triggers>

  </asp:UpdatePanel>

       <br />

 

 <asp:UpdatePanel ID="statepanel" runat="server">    

    <ContentTemplate >

        <span class="style1"><strong>&nbsp;&nbsp;&nbsp;&nbsp; Select State:</strong></span>

      <asp:DropDownList ID="ddlstate" AutoPostBack ="true"

       AppendDataBoundItems ="true"  runat="server" Height="20px"

Width="155px"               onselectedindexchanged="ddlstate_SelectedIndexChanged"

            BackColor="#FF3399" ForeColor="Maroon">

      </asp:DropDownList>

    </ContentTemplate>

    <Triggers >

       <asp:AsyncPostBackTrigger ControlID ="ddlstate" />

       </Triggers>

    </asp:UpdatePanel>

       <br />

 

<asp:UpdatePanel ID="citypanel" runat="server">     

   <ContentTemplate >      

       <span class="style1"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Select City:</strong></span>      

     <asp:DropDownList ID="ddlcity" AutoPostBack ="true"

   AppendDataBoundItems ="true" runat="server" Height="20px" Width="155px"

           BackColor="#66FFFF" ForeColor="#006666">

     </asp:DropDownList>

  </ContentTemplate>

  <Triggers >

    <asp:AsyncPostBackTrigger ControlID ="ddlcity" />         </Triggers>

      

 </asp:UpdatePanel>

 </div>

   </form>

</body>

</html>

 

.VB code

 

Imports System.Data.SqlClient

Imports System.Data

 

Public Class WebForm1

   Inherits System.Web.UI.Page

   Private conn As New SqlConnection("Data source=.; uid=sa; pwd=Password$2; database=master")

 

   Public Sub Bind_ddlCountry()

        conn.Open()

       Dim cmd As New SqlCommand("select County,CountryId from Country", conn)

       Dim dr As SqlDataReader = cmd.ExecuteReader()

        ddlcountry.DataSource = dr

        ddlcountry.Items.Clear()

        ddlcountry.Items.Add("--Please Select country--")

        ddlcountry.DataTextField = "County"

        ddlcountry.DataValueField = "CountryId"

        ddlcountry.DataBind()

        conn.Close()

   End Sub

 

   Public Sub Bind_ddlState()

        conn.Open()

       Dim cmd As New SqlCommand("select State,StateID from countryState where
 CountryId='"
+ ddlcountry.SelectedValue &"'", conn)

       Dim dr As SqlDataReader = cmd.ExecuteReader()

        ddlstate.DataSource = dr

        ddlstate.Items.Clear()

        ddlstate.Items.Add("--Please Select state--")

        ddlstate.DataTextField = "State"

        ddlstate.DataValueField = "StateID"

        ddlstate.DataBind()

        conn.Close()

 

   End Sub

   Public Sub Bind_ddlCity()

        conn.Open()

       Dim cmd As New SqlCommand("select * from stateCity where StateId ='" +
ddlstate.SelectedValue &"'", conn)

       Dim dr As SqlDataReader = cmd.ExecuteReader()

        ddlcity.DataSource = dr

        ddlcity.Items.Clear()

        ddlcity.Items.Add("--Please Select city--")

        ddlcity.DataTextField = "City"

        ddlcity.DataValueField = "CityID"

        ddlcity.DataBind()

        conn.Close()

   End Sub

   Protected Sub Page_Load(ByVal senderAs Object,ByVal e As EventArgsHandles Me.Load

       If Not IsPostBack Then

            Bind_ddlCountry()

       End If

   End Sub

 

   Protected Sub ddlcountry_SelectedIndexChanged(ByVal sender As ObjectByVal 
eAsEventArgs)Handles ddlcountry.SelectedIndexChanged

        Bind_ddlState()

   End Sub

 

   Protected Sub ddlstate_SelectedIndexChanged(ByVal sender As ObjectByVal 
eAsEventArgs)Handles ddlstate.SelectedIndexChanged

        Bind_ddlCity()

   End Sub

End Class

 

 

Now run the application and test it.


 

ddl2 (1).gif
 

 

Figure2

 

Now select a country, then its automatically shows the states name of that country in next DropDownList. For example we select Pakistan.


 

ddl3 (1).gif
 

 

Figure3

 

Now select a State, then its automatically shows the cities name of that state in next DropDownList. For example we select Punjab.


 

ddl4.gif
 

 

Figure4


  

 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.