Combos en cascada para ASP.NET MVC

October 6, 2016
2 min read

He trabajado en ASP.NET MVC por un largo tiempo, así que hoy decidí aportar con una pequeña pero elegante solución a un problema común. Los combos en cascada.

###Veamos cómo funciona… La implementación de este combobox funciona tanto en un formulario vacío como en uno en modo de edición.

En un formulario nuevo, este funciona así…

En uno en modo edición, podemos cargar las listas con los valores correspondientes para las selecciones y cuando realicemos cambios este seguirá funcionando…

###Ahora veamos cómo implementarlo Dividiremos nuestro combo en 3 partes en las que debemos trabajar.

Nuestra vista, aquí lo que haremos es agregarlo un poco de información en forma de atributos (data-*) a nuestra etiqueta select de tal forma que pueda decirnos lo que necesitamos para cargar el combo que depende de él.

data-cascade-combo, donde especifico el id del control subordinado (el que debe cargarse en consecuencia de elegir una opción en este select).
data-cascade-combo-source, la url que proveerá el listado de opciones.
data-cascade-combo-param-name, el nombre con el que se enviara el valor seleccionado en el combo para traer las opciones.

Ahora para que este combo funcione, necesitamos un script(.js) que agregue este comportamiento. Lo que hacemos es manejar el evento change de cualquier elemento que encaje con nuestro selector, que exista en el documento, esto permite que funcione incluso en HTML cargado por ajax.

El ultimo componente que debemos revisar, es el controlador que suplirá los valores, en este punto cabe resaltar que devolvemos una respuesta en JSON basado en la clase SelectListItem que me parece una forma generalizada y estándar de exponer valores que representan opciones en un combo y que de hecho es una clase fácil de proyectar como pueden ver en el código.

https://gist.github.com/jesulink2514/ddc8f9ebe30b814489174b903dcb522e

Espero les sea de ayuda, pueden revisar el código fuente completo en Github.