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 prctica de Asp- Ajax llamada updatepanel, no debemos ser unos expertos en Ajax solo seguir estos pasos as que sin ms prembulos empecemos. He trabajado con la ltima versin de visual estudio para web pueden descargar la versin 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('ALEJANDRA',101)

Primero crearemos una solucin en blanco y agregaremos 3 proyectos uno llamado Lgica ser una biblioteca de clases, otro llamado Conexin tambin biblioteca de clases y otro llamado Presentacin este es un sitio web

Luego agregaremos las referencias

En lgica se agregara referencia al proyecto conexin

Y en presentacin se agregaran referencias a conexin y a lgica

Ahora agregaremos clases a nuestros proyectos Lgica y Conexin Estas se llamaran lgica y conexin respectivamente y se ver as

Dentro de la clase conexin 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 lgica llamaremos dos pequeos procedimientos almacenados que se encargaran de cargar las ciudades y departamentos. Es importante agregar la directiva using trabajar Y en la clase pondremos
public DataTable departamentos() { Conexion.conexion cone = new Conexion.conexion(); DataTable dt = cone.consulta("exec cons_departamento"); return dt; } System.Data;

en la clase para poder

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 pgina web que puede ser el default o una que ustedes agreguen, pueden usar css, js y todo lo que quieran. En la pgina web haremos lo siguiente Vamos al cuadro de herramientas y buscamos Extensiones AJAX Y arrastramos un ScriptManager y un UpdatePanel

Y lo acomodan segn sus necesidades en mi caso se ve as en el diseador por las css pero ustedes acomdenlo como quieran

en mi caso se ver as al final

Bien en el cdigo 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 seleccin en el combo este se obtiene dando doble click al combo en el diseador 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 pgina, pueden meter todos los controles que necesiten recargar esta herramienta es muy til para traer datos desde la BD de manera asincrnica //
<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 informacin 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, solucin, mtodos que llaman procedimientos de la BD y una interfaz ahora vamos a hacer que funcione. En el evento load de la pgina que lo pueden encontrar dando doble click sobre cualquier parte vaca del diseador pondremos este cdigo
//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 pgina de lo contrario se mantendr la seleccin

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 diseador y automticamente nos llevara al cdigo 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 podrn ver cmo funciona

Gracias espero que les haya servido. Samanta Cantero. @zamdd en twitter Este y ms tutoriales : http://titaniumsoluciones.hol.es/