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 values ('AMAZONAS') insert into departamento 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 System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data.SqlClient; using 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 System.Data; en la clase para poder trabajar 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/