Es común que cualquier formulario que utilicemos en un sitio web llene los combos de selectores de datos a partir de información llenada previamente.

Para este ejemplo, agradezco la ayuda de Camilo Ramirez, quien tiene vasta experiencia en MVC4.

Por ejemplo, al seleccionar un país en un combobox (o select o DropDownList, etcétera), lo esperable es que otro combobox llene las ciudades a partir del país seleccionado en el primer combobox.

En MVC4 tenemos dos formas de hacerlo; la forma sincronía es enviar el valor del primer combo a un controlador, que llene una segunda lista y se envíe a la vista dentro del modelo para desplegar los datos. El problema de esta forma, es que recargaremos la página completa, por lo que si no enviamos los datos ya llenados por el usuario, deberemos generar las rutinas para que los valores de todos los campos se llenen de modo automático.

La segunda forma es hacer que el valor sea envíado a una acción del controlador de manera asíncrona, y los valores sean devueltos utilizando AJAX. Veamos como se hace:

En la Vista, consideremos el siguiente bloque que genera un combo primera-lista a partir de la variable primeraLista:

@{
var primeraLista = new List<object> {new {nombre = "primero", id = 1}, new {nombre = "segundo", id = 2}, new {nombre = "tercero", id = 3}};
}

@Html.DropDownList("primera-lista", new SelectList(primeraLista, "id", "nombre"), new { @id = "primera-lista" })
<select id="segunda-lista"></select>




El siguiente código javascript se encarga de “escuchar” cuando el valor de la lista primera-lista sea cambiado, lo que hará que el valor sea enviado utilizando AJAX a una acción del controlador que alterará el código de la página web de manera asíncrona con los valores retornados:

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(document).on("ready", function() {
        $("#primera-lista").change(function() {
            idSelected = $(this).val();
            $.ajax({
                url: '@Url.Action("GetSecondValues")'+"?id=" + idSelected,
                type: "POST",
                success: function (data) {
                    var options = "";
                    $.each(data, function(index, value) {
                        options += '<option value="' + value.id + '">' + value.nombre + '</option>';
                    });
                    $("#segunda-lista").html(options);
                },
                error:function() {
                    alert("error...");
                }
            });
        });
    });
</script>

En el controlador generamos una acción con ActionResult que reciba como retorno un objeto JSON con la lista de elementos a cargar dependiendo del valor enviado desde el combo primera-lista. Notar que la lista se crea en este momento, por lo que podemos invocar un webservice o rutina a una base de datos para llenar esta lista:

 public ActionResult GetSecondValues(int id)
        {
            List<object> devolver;
            switch (id)
            {
                case 1:
                    devolver = new List<object>
                                   {
                                       new {nombre = "hola1.1", id = 1},
                                       new {nombre = "hola1.2", id = 2},
                                       new {nombre = "hola1.3", id = 3}
                                   };
                    break;
                case 2:
                    devolver = new List<object>
                                   {
                                       new {nombre = "hola2.1", id = 1},
                                       new {nombre = "hola2.2", id = 2},
                                       new {nombre = "hola3.3", id = 3}
                                   };
                    break;
                case 3:
                    devolver = new List<object>
                                   {
                                       new {nombre = "hola3.1", id = 1},
                                       new {nombre = "hola3.2", id = 2},
                                       new {nombre = "hola3.3", id = 3}
                                   };
                    break;
                default:
                    devolver = new List<object>
                                   {
                                       new {nombre = "default1", id = 1},
                                       new {nombre = "default2", id = 2},
                                       new {nombre = "default3", id = 3}
                                   };
                    break;
            }
            return Json(devolver);
        }

One thought on “Llenar de manera asíncrona un combobox (o DropDownList en Razor) en ASP.NET MVC4 a partir de otro combobox

  1. Saludos amigo, y gracias por la información de su articulo, pero me esta arrojando un error en el script que invoca ajax que dice así: “Se esperaba un objeto”, agradezco su ayuda. Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *