In this article, we will know when we are choosing a selected country from DropDownList its related state appears in another dropdown and after selecting the state its related city list appears in other DropDownList, without refreshing the webpage. Here we need three-DropDownList , three label controls, Script Manager and Update Panel from the toolbox.
Table Creation
City table data
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="countrypanel" runat="server">
<ContentTemplate >
<asp:Label ID="Label1" runat="server" Text="Choose Country" BackColor="#FFFF99"
ForeColor="Red" Width="100px"></asp:Label>
<asp:DropDownList ID="ddlcountry" AutoPostBack ="true"
AppendDataBoundItems="true" runat="server" Height="20px" Width="156px"
onselectedindexchanged="ddlcountry_SelectedIndexChanged" Font-Bold="True"
ForeColor="#FF9900">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID ="ddlcountry" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="statepanel" runat="server">
<ContentTemplate >
<asp:Label ID="Label2" runat="server" Text="Choose State" BackColor="#FFFF66"
ForeColor="Red" Width="100px"></asp:Label>
<asp:DropDownList ID="ddlstate" AutoPostBack ="true"
AppendDataBoundItems ="true" runat="server" Height="20px"
Width="155px" onselectedindexchanged="ddlstate_SelectedIndexChanged" Font-Bold="True"
ForeColor="#993300">
</asp:DropDownList>
</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID ="ddlstate" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="citypanel" runat="server">
<ContentTemplate >
<asp:Label ID="Label3" runat="server" Text="Choose City" BackColor="#FFFF99"
ForeColor="Red" Width="100px"></asp:Label>
<asp:DropDownList ID="ddlcity" AutoPostBack ="true" AppendDataBoundItems ="true"
runat="server" Height="20px" Width="155px" Font-Bold="True" ForeColor="#CCCC00">
</asp:DropDownList>
</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID ="ddlcity" /></Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("ConnectionString").ToString()
Dim con As New SqlConnection(strConnString)
Dim str As String
Dim com As SqlCommand
Dim sqlda As SqlDataAdapter
Dim ds As DataSet
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) HandlesMe.Load
If Not IsPostBack Then
bindcountry()
End If
End Sub
Sub bindcountry()
con.Open()
str = "select CountryId,CountryName from Country"
com = New SqlCommand(str, con)
sqlda = New SqlDataAdapter(com)
ds = New DataSet
sqlda.Fill(ds, "Country")
ddlcountry.Items.Clear()
ddlcountry.Items.Add("--Select--")
ddlcountry.DataValueField = "CountryId"
ddlcountry.DataTextField = "CountryName"
ddlcountry.DataSource = ds
ddlcountry.DataMember = "Country"
ddlcountry.DataBind()
con.Close()
End Sub
Sub bindstate()
con.Open()
str = "select StateId,StateName from State where Country_Id='" & ddlcountry.SelectedValue & "'"
com = New SqlCommand(str, con)
sqlda = New SqlDataAdapter(com)
ds = New DataSet
sqlda.Fill(ds, "State")
ddlstate.Items.Clear()
ddlstate.Items.Add("--Select--")
ddlstate.DataValueField = "StateId"
ddlstate.DataTextField = "StateName"
ddlstate.DataSource = ds
ddlstate.DataMember = "State"
ddlstate.DataBind()
con.Close()
End Sub
Sub bindcity()
con.Open()
str = "select CityId,CityName from City where State_Id ='" & ddlstate.SelectedValue & "'"
com = New SqlCommand(str, con)
sqlda = New SqlDataAdapter(com)
ds = New DataSet
sqlda.Fill(ds, "City")
ddlcity.Items.Clear()
ddlcity.Items.Add("--Select--")
ddlcity.DataValueField = "CityId"
ddlcity.DataTextField = "CityName"
ddlcity.DataSource = ds
ddlcity.DataMember = "City"
ddlcity.DataBind()
con.Close()
End Sub
Protected Sub ddlcountry_SelectedIndexChanged(ByVal sender As Object, ByVal e AsSystem.EventArgs) Handles ddlcountry.SelectedIndexChanged
bindstate()
End Sub
Protected Sub ddlstate_SelectedIndexChanged(ByVal sender As Object, ByVal e AsSystem.EventArgs) Handles ddlstate.SelectedIndexChanged
bindcity()
End Sub
End Class
Output