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.
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> 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> 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 EventArgs) Handles Me.Load
If Not IsPostBack Then
Bind_ddlCountry()
End If
End Sub
Protected Sub ddlcountry_SelectedIndexChanged(ByVal sender As Object, ByVal
eAsEventArgs)Handles ddlcountry.SelectedIndexChanged
Bind_ddlState()
End Sub
Protected Sub ddlstate_SelectedIndexChanged(ByVal sender As Object, ByVal
eAsEventArgs)Handles ddlstate.SelectedIndexChanged
Bind_ddlCity()
End Sub
End Class
|
Now run the application and test it.
Figure2
Now select a country, then its automatically shows the states name of that country in next DropDownList. For example we select Pakistan.
Figure3
Now select a State, then its automatically shows the cities name of that state in next DropDownList. For example we select Punjab.
Figure4