Tutorial : Hacer Combos Dependientes tipo Departamento –Ciudad

Tutorial : Hacer Combos Dependientes tipo
Departamento –Ciudad en ASP. Net
Hola amigos, les traigo una manera muy muy sencilla hacer combos o listas
desplegables dependientes tipo departamento – ciudad utilizando una
herramienta muy práctica de Asp- Ajax llamada updatepanel, no debemos ser
unos expertos en Ajax solo seguir estos pasos así que sin más preámbulos
empecemos.
He trabajado con la última versión de visual estudio para web pueden
descargar la versión gratuita desde acá
http://www.microsoft.com/visualstudio/esn/downloads#d-express-web
Bueno entonces comencemos:
Antes de todo necesitamos una base de datos
create database prueba;
use prueba;
create table departamento
(cod_departamento int primary key identity(1,100) ,
nombre varchar(80) not null,
)
create table ciudad
(
cod_ciudad int primary key identity(1,100) ,
nombre varchar(50) not null ,
cod_departamento int foreign key references departamento(cod_departamento)not
null,
)
Y los procedimientos
create procedure cons_departamento
as
select cod_departamento, nombre from departamento;
create procedure cons_ciudades
@cod_departamento int
as
select cod_ciudad, nombre from ciudad where cod_departamento= @cod_departamento;
y claro unos datos de prueba
//departamentos
insert into departamento
insert into departamento
values ('AMAZONAS')
values ('ANTIOQUIA')
//ciudades para amazonas
insert into ciudad values ('EL ENCANTO', 1)
insert into ciudad values ('LA CHORRERA', 1)
//ciudades para antioquia
insert into ciudad values('ABRIAQUÍ',101)
insert into ciudad values('ALEJANDRÍA',101)
Primero crearemos una solución en blanco y agregaremos 3 proyectos uno
llamado Lógica será una biblioteca de clases, otro llamado Conexión también
biblioteca de clases y otro llamado Presentación este es un sitio web
Luego agregaremos las referencias
En lógica se agregara referencia al proyecto conexión
Y en presentación se agregaran referencias a conexión y a lógica
Ahora agregaremos clases a nuestros proyectos Lógica y Conexión
Estas se llamaran lógica y conexión respectivamente y se verá así
Dentro de la clase conexión nos conectaremos con la base de datos en SQL
server así
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Text;
System.Data.SqlClient;
System.Data;
namespace Conexion
{
public class conexion
{
private SqlConnection conex = new SqlConnection(@"Data
Source=.\SQLEXPRESS;Initial Catalog=subasededatos;Integrated Security=True");
private bool conectar()
{
try
{
conex.Open();
return true;
}
catch
{
conex.Close();
return false;
}
}
public bool comando(string comando)
{
bool ret = false;
try
{
if (conectar())
{
SqlCommand cmd = new SqlCommand(comando, conex);
cmd.ExecuteNonQuery();
ret = true;
}
}
catch { }
conex.Close();
return ret;
}
public DataTable consulta(string comando)
{
DataTable ret = new DataTable();
try
{
if (conectar())
{
SqlDataAdapter da = new SqlDataAdapter(comando, conex);
da.Fill(ret);
}
}
catch { }
conex.Close();
return ret;
}
}
}
Y en la clase lógica llamaremos dos pequeños procedimientos almacenados
que se encargaran de cargar las ciudades y departamentos.
Es importante agregar la directiva using
trabajar
System.Data;
en la clase para poder
Y en la clase pondremos
public DataTable departamentos()
{
Conexion.conexion cone = new Conexion.conexion();
DataTable dt = cone.consulta("exec cons_departamento");
return dt;
}
public DataTable ciudades(int cod_departamento )
{
Conexion.conexion cone = new Conexion.conexion();
DataTable dt = cone.consulta("exec cons_ciudades
'"+cod_departamento+"'");
return dt;
}
Y bueno finalmente la página web que puede ser el default o una que ustedes
agreguen, pueden usar css, js y todo lo que quieran.
En la página web haremos lo siguiente
Vamos al cuadro de herramientas y buscamos Extensiones AJAX Y
arrastramos un ScriptManager y un UpdatePanel
Y lo acomodan según sus necesidades en mi caso se ve así en el diseñador
por las css pero ustedes acomódenlo como quieran
en mi caso se verá así al final
Bien en el código tendremos esto un combo “departamento” del cual dependerá
el combo “ciudades”
<div class="styled-select">
<asp:DropDownList ID="departamento" AutoPostBack="true" runat="server"
Height="25px" style="margin-left: 0px; margin-top: 0px;" Width="220px"
OnSelectedIndexChanged="departamento_SelectedIndexChanged" >
</asp:DropDownList>
</div>
// Acá es importante destacar dos cosas uno es necesario que este activado el
AutoPostBack="true" y es importante que este el evento
OnSelectedIndexChanged="departamento_SelectedIndexChanged" > este indicara al
aplicativo que hacer cuando cambie la selección en el combo este se obtiene
dando doble click al combo en el diseñador de visual una vez //
Y acá tenemos el update panel y adentro el combo “ciudades” //el updatepanel
permitirá que solo se recargue esa parte de la página, pueden meter todos los
controles que necesiten recargar esta herramienta es muy útil para traer datos
desde la BD de manera asincrónica //
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<div class="styled-select2">
<asp:DropDownList ID="ciudad" runat="server" Height="27px"
style="margin-left: 0px" Width="220px">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="departamento"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
//Aca hay dos cosas muy importantes :
<ContentTemplate> este permite introducir los controles en el updatepanel , los
combos, textbox, etc.
La otra cosa es <Triggers> este nos indicara cuando va accionarse el
updatepanel en este caso en el evento de cambio del combo “departamentos”
Si quieren mas información sobre los updatepanel y todo lo que pueden hacer
con ellos miren este link http://msdn.microsoft.com/eses/library/system.web.ui.updatepanel(v=vs.100).aspx//
Continuemos….
Hasta ahora tenemos base de datos, solución, métodos que llaman
procedimientos de la BD y una interfaz ahora vamos a hacer que funcione.
En el evento load de la página que lo pueden encontrar dando doble click sobre
cualquier parte vacía del diseñador pondremos este código
//importante
Ponemos las directivas en la pagina
using System.Data.SqlClient;
using System.Data;
//
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// carga de los departamentos disponibles en la base de datos
DataTable dt6 = new DataTable();
dt6 = elem.departamentos();
departamento.DataSource = dt6;
departamento.DataTextField = "nombre".ToString();
departamento.DataValueField = "cod_departamento".ToString();
departamento.DataBind();
}
Esto hará que se carguen los departamentos desde cero Solo si es la primera
vez que se carga la página de lo contrario se mantendrá la selección
Y ahora debemos programar lo que ocurrirá cuando seleccionen algo ene l
combo, para entrar al evento podemos hacer doble click sobre el combo
“departamentos” en el diseñador y automáticamente nos llevara al código y una
vez allí pondremos esto
protected void departamento_SelectedIndexChanged(object sender, EventArgs e)
{
int codigo = Convert.ToInt32(this.departamento.SelectedValue);
// carga de las ciudades disponibles en la base de datos, segun su
departamento
DataTable dt7 = new DataTable();
ciudad.Items.Clear();
dt7 = elem.ciudades(codigo);
ciudad.DataSource = dt7;
ciudad.DataTextField = "nombre".ToString();
ciudad.DataValueField = "cod_ciudad".ToString();
ciudad.DataBind();
}
Cuando lo ejecuten ya podrán ver cómo funciona
Gracias espero que les haya servido.
Samanta Cantero.
@zamdd en twitter
Este y más tutoriales : http://titaniumsoluciones.hol.es/