Combos dependientes utilizando Ajax con Visual Studio 2015

Cuando nos pusimos a la cabeza en el desarrollo de software en el Instituto donde trabajo, usábamos herramientas muy innovadoras para este fin, estrenamos la versión 2005 de Visual Studio para el desarrollo web.

Los años han pasado y me he vuelto más de aplicaciones para procesos dejando de lado el “front-end” .

La verdad no me he puesto a leer acerca de la conveniencia y actualidad de usar Ajax hoy día, sin embargo lo retomé en la versión 2015 de Visual Studio.

Nuestro oráculo – la internet – me llevó a un artículo escrito por Loveless “único en su especie”, lo he modificado para fines prácticos.

En nuestro instituto un combo dependiente clásico es el de entidad-municipio, mismo que describo aquí – ¡ ojo, no tiene acceso a base de datos !.

Hago un nuevo sitio web.

Agregué un formulario aspx, y ponemos dos DropDownLists y como contenedor un UpdatePanel, relacionado con ScriptManager, y para ver si funciona un par de cajas de texto.

Al hacer este código sentí un poco de nostalgia en el evento Load de la página preguntamos si no es PostBack, para que solamente cargue la primera vez los combos de esa manera.

protected void Page_Load(object sender, EventArgs e)
{

if (!(IsPostBack)){

Ddl_entidad.Items.Add(“Aguascalientes”);
Ddl_entidad.Items.Add(“Baja California”);
Ddl_entidad.Items.Add(“Baja California Sur”);
Ddl_entidad.Items.Add(“Campeche”);
Ddl_municipio.Items.Add(“Asientos”);
Ddl_municipio.Items.Add(“Calvillo”);
Ddl_municipio.Items.Add(“Cosío”);
Ddl_municipio.Items.Add(“Jesus María”);

}

}

Vamos ahora a mover las propiedades del UpdatePanel, entrando en Triggers, pulsando el botón (…).

Adicionamos un nuevo miembro que es AsyncPostBack, y elegimos el control DropDownList padre (Ddl_entidad) y como evento el SelectedIndexChanged, damos clic en <<Aceptar>>.

Lo que queda por hacer es programar es el evento SelectedIndexChanged del combo padre para actualizar el hijo.

protected void Ddl_entidad_SelectedIndexChanged(object sender, EventArgs e)
{

Ddl_municipio.Items.Clear();
int opcion = Ddl_entidad.SelectedIndex + 1;
switch (opcion) {
case 1:

Ddl_municipio.Items.Add(“Asientos”);
Ddl_municipio.Items.Add(“Calvillo”);
Ddl_municipio.Items.Add(“Cosío”);
Ddl_municipio.Items.Add(“Jesus María”);
break;

case 2:

Ddl_municipio.Items.Add(“Mexicalí”);
Ddl_municipio.Items.Add(“Ensenada”);
Ddl_municipio.Items.Add(“Tijuana”);
break;

case 3:

Ddl_municipio.Items.Add(“La Paz”);
Ddl_municipio.Items.Add(“Cabo San Lucas”);
Ddl_municipio.Items.Add(“Comondú”);
break;

default:

Ddl_municipio.Items.Add(“Campeche”);
Ddl_municipio.Items.Add(“Calkiní”);
Ddl_municipio.Items.Add(“Escarcega”);
break;

}

}

Ha! un aspecto bien importante, al combo padre Ddl_entidad, hay que ponerle True en la propiedad AutoPostBack. Solo se actualiza la parte de los combos, es decir una sección parcial de la página.

Adicionaré una liga a mi canal de YouTube para que vean el comportamiento en vivo.

 

Saludos.

Atte.

Profesor Miguel Araujo.

Webgrafía.

Loveless, único en su especie
El blog de un programador que se mata de risa de los comentarios que le hagan

https://lovelessisma.wordpress.com/2010/09/29/selects-combos-sqlserver-ajaxne/

 

Deja un comentario