En este post mostrare como crear 3 DropDownList para mostrar Paises, estados y ciudades. Cuando usted seleccione un pais automaticamente mostrara los nombres de estados de esa ciudad en el siguiente DropDownList. Luego cuando selecciones un estado, el dropdownlist de ciudades mostrara las ciudades relacionadas a ese estado.
Primero creamos una BD de ejemplo
create database ABC
ahora en esta base ejecutamos estas consultas para crear las tablas Pais, estados y ciudades, y luego las poblamos con datos:
Create Table Country
(
CountryId Int Primary Key,
County Varchar(30)
)
Create Table countryState
(
StateId Int Primary Key,
CountryId Int Foreign Key References Country(CountryId),
State Varchar(30)
)
Create Table stateCity
(
CityId Int,
StateId Int Foreign Key References countryState(StateId),
City Varchar(30)
)
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')
Ahora comprobamos si lleno correctamente:
en la tabla
Country
en la tabla
CountryState
En la tabla
StateCity
Ahora agregamos 3 DropDownList al proyecto de la siguiente forma:
Ahora creamos un proyecto web, arriba del div agregamos un scripttmanager y dentro del div vamos a insertar 3 updatepanel(los update panel realizan peticiones asíncronas al servidor y refrescan su contenido sin tener que hacer un PostBack de la página entera, solo de esta parte) y dentro de cada uno agregamos 3 dropdownlist para listar los paises, estados y ciudades mas o menos se vera asi:
ahora a cada UpdatePanel en su propiedad Triggers lo enlazamos con el Dropdownlist:
en cada dropdownlist las propiedades autopostback y appendDataBoundItems las ponen en True. mas o menos el body de la pagina se vera asi:
ahora en el codigo de la pagina 3 procedimientos que llenaran los dropdown en funcion al 1. lo primero que haremos sera copiar este codigo
private SqlConnection conn = new SqlConnection("Data source=XSaint; database=ABC; Integrated Security=true");
public void Bind_Pais()
{
conn.Open();
SqlCommand cmd = new SqlCommand("select County,CountryId from Country", conn);
SqlDataReader dr = cmd.ExecuteReader();
DropDownList1.DataSource = dr;
DropDownList1.Items.Clear();
DropDownList1.Items.Add("--Por favor seleccione Pais--");
DropDownList1.DataTextField = "County";
DropDownList1.DataValueField = "CountryId";
DropDownList1.DataBind();
conn.Close();
}
public void Bind_Estado()
{
conn.Open();
SqlCommand cmd = new SqlCommand("select State,StateID from countryState where CountryId='" + DropDownList1.SelectedValue + "'", conn);
SqlDataReader dr = cmd.ExecuteReader();
DropDownList2.DataSource = dr;
DropDownList2.Items.Clear();
DropDownList2.Items.Add("--Por favor seleccione Estado--");
DropDownList2.DataTextField = "State";
DropDownList2.DataValueField = "StateID";
DropDownList2.DataBind();
conn.Close();
}
public void Bind_Ciudad()
{
conn.Open();
SqlCommand cmd = new SqlCommand("select * from stateCity where StateId ='" + DropDownList2.SelectedValue + "'", conn);
SqlDataReader dr = cmd.ExecuteReader();
DropDownList3.DataSource = dr;
DropDownList3.Items.Clear();
DropDownList3.Items.Add("--Please Select city--");
DropDownList3.DataTextField = "City";
DropDownList3.DataValueField = "CityID";
DropDownList3.DataBind();
conn.Close();
}en el load de la pagina escribimos este codigo:
if (!IsPostBack)
{
Bind_ddlCountry();
}en el evento SelectedIndexChanged del primer DropDownList enlazamos con el evento que cargara el 2 dropdownlist
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Bind_Estado();
}lo mismo haremos en el evento SelectedIndexChanged del segundo DropDownList para mostrar las ciudades pertenecientes al estado elegido:
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
Bind_Ciudad();
}y deberia salirles asi:
