0

estoy trabajando en un proyecto MVC ASP.Net y necesito saber como puedo realizar una vista con 2 dropdownlist, en la que una dependa de otra, por ejemplo.

Estado y Pueblos. Que dependiendo de el estado que elija entonces varíen los pueblos, en tiempo real sin tener que hacerle refresh a la pagina.

Agradecería su aporte.

1
  • Deberias de mostrarnos que has intentado para poder ayudarte.
    – Einer
    Commented el 10 jul. 2017 a las 13:57

1 respuesta 1

1

Se puede realizar con una llamada asincronica(ajax). si por ejemplo tienes el cbxEstados y cbxPueblos Debes capturar el evento del cbxEstados, el evento change para llenar de información el combo cbxPueblos, claro esta que debes enviarle el valor seleccionado del combo para que el segundo sea dinámico. Para entenderlo mejor el siguiente código.

$(function () {
        $("#cbxEstados").change(function () {
            var selectedItem = $(this).val();
            var ddlStates = $("#cbxPueblos");
            $.ajax({
                cache: false,
                type: "POST",
                dataType: "json",
                url: "@(Url.RouteUrl("GetPueblos"))",
                data: { 'cbxEstados':  selectedItem },
                success: function (data) {
                    ddlStates.html('');
                    $.each(data, function (id, option) {
                        ddlStates.append($('<option></option>').val(option.Value).html(option.Text));
                    });
                    $("#cbxPueblos").val(data2);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                }
            });
        });
   });

El metodo GetPueblos debe estar declarado en tu controlador dependiendo como definas tu comboBox; es decir si lo defines como un modelo como una lista de objetos ComboBox por ejemplo, el metodo tendrá que devolver una lista.

 [HttpPost]
    public async Task<ActionResult> GetPueblos(int cbxEstados) 
    {

        List<ModelComboBox> result = new List<ModelComboBox>();
        result.add(new ModelComboBox{Value ="1", Text ="PUEBLO1"});
        result.add(new ModelComboBox{Value ="2", Text ="PUEBLO2"});
        result.add(new ModelComboBox{Value ="3", Text ="PUEBLO3"});

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Y la clase ModelComboBox seria la siguiente

public class ModelComboBox
    {
        public string Value { get; set; }
        public string Text { get; set; }
   }

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.