Cascadeo de DropDownList con MVC

Saludos amigos, nuevamente hoy les traigo un tema muy sencillo en realidad, aunque espero en verdad en que a mas de uno le sea de utilidad, y es como cascadear los DropDownList en Razor usando MVC.

Realmente esto es muy fácil de hacer y lo voy a demostrar a continuación.

Lo que vamos a hacer es crear un DropDownList con la información de Empresas y cascadearemos este con otro DropDownList con información de las Sucursales pertenecientes a la empresa que hayamos seleccionado.

Los requisitos que para esto es tener la base de datos que hemos estado utilizando para los ejemplos, si no lo han seguido conmigo pueden descargar el script inicial aquí ya que tienen la base de datos, actualícenla con las tablas de empresa y Sucursales con el script que pueden descargar de aquí.

Ya que lo hemos ejecutado y por lo tanto actualizado nuestra base de datos, haremos lo siguiente, entraremos al archivo de modelo que ya hemos creado con anterioridad, y si no tienen el archivo de modelo pueden crear el modelo a partir de la base de datos, si no saben como hacer esto en la entrada anterior a esta explico paso a paso como hacerlo.

Bueno ya que tenemos nuestra base de datos con alguna información que para probar deben de generar, vamos a escribir el código del Controller.

Vamos a agregar la siguiente función:

   1:  public ActionResult TrabajandoConComboBox() 

   2:              return PartialView();

   3:          }

Note que yo estoy usando una vista parcial, pero funciona también con una vista normal. ya que tenemos esta función vamos a dar clic derecho sobre la función y vamos a generar la vista en la cual agregaremos la funcionalidad de los DropDownList, ya que generamos la vista vamos a regresar a esta misma función para agregar la carga inicial de nuestro primer DropDownList, aquí haremos la extracción de las empresas y la pondremos en la ViewBag de nuestra vista, la función debe de quedar de la siguiente manera:

   1:  public ActionResult TrabajandoConComboBox() 

   2:  {

   3:     Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();

   4:     var _Empresas = Context.Empresas.Select(x => new  SelectListItem{  Text = x.Nombre, Value = x.Nombre}).ToList();

   5:     ViewBag.Empresas = _Empresas;

   6:     return PartialView();

   7:  }

como podemos percatarnos estamos haciendo la extracción de la información de las empresas y con ello creamos una lista del objeto SelectListItem el cual se agregaran como las opciones de nuestro primer DropDownList el cual contendrá las empresas.

Ahora vamos a agregar esta primera funcionalidad a nuestra vista, antes de iniciar con la vista note en el código anterior que se agrega al ViewBag una variable llamada Empresas la cual es la que contiene las opciones de nuestro DropDownList, bueno, pasamos a nuestra vista y agregaremos la siguiente línea de código:

   1:  <p>

   2:     <a>Empresas: </a>

   3:      @Html.DropDownList("Empresas","")

   4:  </p>

y si quieren pueden ejecutarlo, esto les dará como resultado un DropDownList con la información de la empresas que hayan dado de alta en su base de datos.

Ya que hemos visto que funciona, vamos a lo mas interesante, vamos a obtener las sucursales que le pertenecen a la empresa que seleccionamos. vamos a regresar a nuestro controlador y agregaremos la siguiente función:

   1:  public JsonResult ObtieneSucursales(string Empresa) 

   2:  {

   3:    Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();

   4:    var _Sucursales = Context.Sucursales

   5:                     .Where(x=> x.Empresas.Nombre==Empresa)

   6:                     .Select(x => new { Id = x.Id, Nombre = x.Nombre });

   7:    return Json(_Sucursales, JsonRequestBehavior.AllowGet);

   8:  }

esta función note que devuelve los valores en JSON debido a que la actualización la realizaremos mediante javascript en un Select de HTML. aquí vemos como filtramos las sucursales de acuerdo a la empresa que se recibió como parámetro.

ahora vamos a regresar a la vista y agregamos el siguiente código debajo de el DropDownList:

   1:  <p>

   2:    <a>Sucursales: </a>

   3:    <select id="Sucursales" />

   4:  </p>

y en la parte superior agregue el siguiente script:

   1:  <script>

   2:      $(document).ready(function () {

   3:   

   4:          $("#Empresas").change(function () {

   5:              $.ajax({

   6:                  type: 'POST',

   7:                  url: '/Home/ObtieneSucursales?Empresa=' + $("#Empresas").val(),

   8:                  dataType: 'json',

   9:                  success: function (data) {

  10:                      var options = '<option value=""/>';

  11:                      for (var i = 0; i < data.length; i++) {

  12:                          options += '<option value="' + data[i].Id + '">' + data[i].Nombre + '</option>';

  13:                      }

  14:                      $("#Sucursales").html(options);

  15:                  },

  16:                  error: function (xhr, ajaxOptions, error) {

  17:                      alert(xhr.status);

  18:                      alert('Error: ' + xhr.responseText);

  19:                  }

  20:              });

  21:          });

  22:      });

  23:  </script>

y listo aquí ejecuten su proyecto y al momento de que seleccione un registro en el DropDownList de empresas inmediatamente se realizara la carga de opciones en el DropDownList de Sucursales.

Pues bueno amigos espero que este pequeñisimo tutorial sea de utilidad para ustedes.