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.
