1

En una vista tengo 4 combos. Los 3 primeros los lleno sin problemas con datos de tablas de una BD. Pero el 4° necesito llenarlo con información de otra tabla, la cual debo filtrar dependiendo lo seleccionado en los 3 combos anteriores.

Ejemplo:

Combo 1: Tipos de servicio. Combo 2: Sucursales. Combo 3: Fecha. Combo 4: todos los registros de la tabla horarios que tengan tipo de servicio, sucursal y fecha iguales a los seleccionados en los combos anteriores.

Encontré varios ejemplos pero en todos ellos se explica como llenar un combo a partir de otro. En mi caso debo llenarlo a partir de otros 3.

Cómo puedo hacer esto? Es requisito utilizar javascrippt?

EDITO:

Logré hacerlo de esta forma:

Vista:

<script type="text/javascript">
        $(document).ready(function () {
            $("#Servicios").change(function () {
                $("#Horarios").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("ObtenerHorarios")',
                    dataType: 'json',
                    data: { servicio: $("#Servicios").val(), sucursal: $("#Sucursales").val() },

                    success: function (turnos) {
                        $.each(turnos, function (i, turno) {
                        $("#Horarios").append('<option value="' + turno.Id + '">' +
                                turno.Horario + '</option>');
                        });
                    },

                    error: function (ex) {
                        alert('Error al obtener los horarios disponibles' + ex);
                    }
                });
                return false;
            })
        });
    </script>

Controller:

public JsonResult ObtenerHorarios(int servicio, int sucursal)
    {
        return Json(
            new SelectList(
                // Aquí obtengo la lista de items y la filtro según los parámetros pasados
                // desde la vista a través de ajax
                items: _turServicio.ObtenerTurnosDisponibles()
                           .Where(t => t.IdServicio == servicio && t.IdSucursal == sucursal)
                           .Select(t => new SelectListItem { Text = t.Horario, Value = t.Id.ToString() }),
                dataValueField: "Value",
                dataTextField: "Text"
            )
        );
    }

Pero me queda un pequeño detalle por resolver: todo el proceso está funcionando porque dependendiendo las opciones elegidas en los combos de arriba, me muestra la cantidad de opciones correspondientes en el combo destino, pero el problema es que no salen con el nombre de la propiedad sino que salen como "undefinied".

Alguna sugerencia?

EDITO NUEVAMENTE - RESUELTO!

En la función js en lugar de poner turno.Id y turno.Horario, tengo que colocar turno.Value y turno.Text, porque esos son los identificadores de valores y textos de la lista que le paso a la vista en formato json desde el controller.

1
  • Hay varios ejemplos de preguntas pidiendo cómo llenar un combo a partir de otro. El código para rellenar un combo a partir de 1 o de 3 otros combos debería ser más o menos igual. ¿Por qué no te funciona?
    – Alvaro Montoro
    Commented el 17 may. 2017 a las 13:34

1 respuesta 1

1

Según yo, solo lo puedes lograr con javascript. Básicamente se trata de adquirir el valor de tus dropdowns y pasárselos a tu método en el controlador.

Aquí una solución con jquery y una llamada ajax.

El controlador

    public ActionResult Index()
    {
        var flavorItems = new List<SelectListItem>() {
            new SelectListItem() { Value = "1", Text = "Chocolate" },
            new SelectListItem() { Value = "2", Text = "Double Chocolate" },
            new SelectListItem() { Value = "3", Text = "Chocolate Chip" },
            new SelectListItem() { Value = "4", Text = "Peanut Butter & Chocolate" },
        };

        ViewBag.FlavorItems = flavorItems;

        return View();
    }

    public ActionResult Update_DropDownList(int a, int b, int c)
    {
        // Use your parameters values to create your new list
        return Json(new[] {
            new { Id = 1, Name = "Vanilla" },
            new { Id = 2, Name = "Strawberry" },
            new { Id = 3, Name = "Mint" },
        }, JsonRequestBehavior.AllowGet);
    }

La vista (con el javascript)

<p>@Html.DropDownList("SelectedFlavorId1", ViewBag.FlavorItems as List<SelectListItem>, htmlAttributes: new { @class = "form-control ddl" })</p>
<p>@Html.DropDownList("SelectedFlavorId2", ViewBag.FlavorItems as List<SelectListItem>, htmlAttributes: new { @class = "form-control ddl" })</p>
<p>@Html.DropDownList("SelectedFlavorId3", ViewBag.FlavorItems as List<SelectListItem>, htmlAttributes: new { @class = "form-control ddl" })</p>
<p>@Html.DropDownList("SelectedFlavorId4", new List<SelectListItem>(), htmlAttributes: new { @class = "form-control" })</p>

@section Scripts {
<script>
    $(".ddl").on('change', function () {
        var a = $("#SelectedFlavorId1").val();
        var b = $("#SelectedFlavorId2").val();
        var c = $("#SelectedFlavorId3").val();
        $.getJSON('/home/Update_DropDownList', {a: a, b: b, c: c }, function (result) {
            var ddl = $('#SelectedFlavorId4');
            ddl.empty();
            $(result).each(function () {
                $(document.createElement('option'))
                    .attr('value', this.Id)
                    .text(this.Name)
                    .appendTo(ddl);
            });
        });
    });
</script>
}
1
  • 1
    Gracias por el ejemplo, es muy útil pero no llegue a probarlo porque encontré otro con el cual tengo casi resuelto el problema, pero me queda un pequeño detalle por resolver. Edito la pregunta para exponer este último problema.
    – Willy616
    Commented el 18 may. 2017 a las 12:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.