Aprende a utilizar la lista desplegable en cascada.

En artículo de hoy le voy a enseñar hacer una lista desplegable en cascada,utilizando Jquery y como notación JSON.

En este proyecto no vamos a utilizar base de datos simplemente para que tenga una idea de cómo se hace vamos a utilizar valores de fijos , más adelante hacer otro proyecto utilizando base de datos.

!Vamos a trabajar!

Paso 1 : Vamos a crear un proyecto 

Vamos a crear un proyecto  y luego vamos a seleccionar el tipo de proyecto en este caso es MVC.

Paso 2 : Vamos a crear un controlador.

Procedemos a dar click donde dice Controller, luego te saldra una ventana como la que se visualiza en la imagen.

Le colocaremos al controlador ListaController y luego le damos a agregar.

Paso 3 :  vamos a crear un método

ahora vamos a crear un método llamada ListaProvincias, que va almacenar una lista de países. seria algo como se visualiza en la imagen

metemos la lista completa en un ViewBag, como se visualizan en la imagen de arriba.

Paso 4: Vamos a crear una vista para poder visualizar el listado.

 

seleccionamos la pantalla Empty ya que no tenemos un modelo definido le damos agregar y listo.

Paso 5 : Visualizar la vista

Ahora en la vista vamos agregar la siguiente línea de código.  

ahora solo nos queda correr, resultado debería quedarle como se visualiza en la imagen

Si has llegado hasta ahí entonce , ahora vamos agregar otro dropdown para mostrar los municipios de la provincia seleccionada.

Primero vamos crear otro método para obtener los municipio este método tiene que retornar un json, como se visualiza en la imagen

Paso 6 : Vamos agregar a  la vista el dropdown

Vamos agregar a  la vista el dropdown de los municipios, así como se muestra en la imagen

y junto a los dos dropdown, quedaria asi.

Paso : 7 Ahora nos queda agregar los  script de jquery 

Ahora nos queda agregar los  script de jquery para poder consumir los métodos, el codigo quedaria de la siguiente manera

ahora corremos la aplicaciones y seleccionamos una provincias

Seleccionamos una provincias luego se mostrar los municipios de esas provincia seleccionada.

y eso es todo amigos , espero que le haiga gustado el tutorial , nos vemos en el próximo tutorial.

Add a Comment

Your email address will not be published. Required fields are marked *