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