none
Llenar Dropdownlist Anidados RRS feed

  • Pregunta

  • Muy buenas a todos los amigos del foro, bueno tengo un inconveniente, estoy utilizadno MVC 2, tengo una vista en la cual tengo 2 dropdownlist, el primero lo lleno correctamente, pero mi verdadero dolor de cabeza es llenar el segundo dropdownlist, segun el valor seleccionado en el primer dropdownlist, algo asi como dropdownlist anidados, si tiene alguna sugenrencia.

     

    De antemano muchas gracias.

    domingo, 5 de febrero de 2012 2:41

Respuestas

  • Buenas!

    Dos + una opciones:

    1. Cuando selecciones un elemento de la primera dropdownlist, haces un POST a una acción del controlador que devuelva la misma vista pero con mas datos en la propiedad Model para que la vista pueda rellenar la segunda dropdownlist. Esta solución es muy fácil, pero tiene el incoveniente de realizar un refresco entero de la página cuando el usuario selecciona un elemento de la combo.
    2. Realizar lo mismo que (1) salvo que el controlador ahora devuelve una vista parcial que es incluída via AJAX en un div. De este modo al seleccionar un elemento de la primera dropdownlist se envia los datos al controlador, que devuelve la vista parcial con el código necesario para incluir la segunda dropdownlist (que aparecería en este punto). Este mecanismo es muy sencillo y eficaz. No hay refresco entero y el único "efecto visual" es que la segunda combo no aparece hasta que la primera se selecciona (aunque esto puede "evitarse" generando una combo idéntica vacía en la vista inicial).
    3. Realizar lo mismo que (2) salvo que el controlador, en lugar de devolver el HTML de la vista parcial, devuelve un objeto (usualmente json) con los datos de la segunda combo. Cuando el usuario selecciona un elemento de la primera dropdownlist se hace una petición al controlador, quien devuelve el json con las opciones de la segunda dropdownlist. Via javascript recoges este json, lo parseas y creas en runtime los <option> y los colocas dentro de la segunda dropdownlist. Es el método más "complejo" pero el que más ancho de red ahorra.

    Hace tiempo escribí en mi blog un artículo que implementa "desde cero" el punto (3): http://geeks.ms/blogs/etomas/archive/2009/06/30/asp-net-mvc-y-ajax-f-225-cil-no-facil-237-simo-ii.aspx

    El artículo tiene su tiempo y es de MVC1. En MVC2 es casi idéntico salvo que hay un lugar donde hay un código como este:

    return new JsonResult() { Data = paises };
    

    Para que en MVC2 funcione debe modificarse para que sea:

    return Json(paises, JsonRequestBehavior.AllowGet);

    El resto debería funcionarte tal cual (o al menos eso creo :p).

    Por supuesto siempre puedes buscarte un plugin de jQuery que haga esto que hay más de uno... :)


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
    • Marcado como respuesta Eder Costa viernes, 26 de octubre de 2012 13:39
    lunes, 6 de febrero de 2012 8:11