none
Llenar LISTBOX a partir de un DROPDOWNLIST ASP.NET MVC RRS feed

  • Pregunta

  • Buenas amigos.

    Tengo un DropDownList que se llena con los datos que tengo en una tabla de mi base de datos, llamada Productos, la cual contiene las marcas de esos productos. La idea es que al seleccionar una de esas marcas pueda llenarme mediante un boton una ListBox con los productos de esa marca que seleccione, pero quiero saber que debo colocar en mi vista para visualizar mis ListBox, que debo colocar en mi controlador y si debo crear alguna clase, quizas puedan ayudarme con este primer punto.

    Adicional me gustaria que una vez cargadas esas marcas en esa ListBox pueda pasar un elemento (o varios) a otra ListBox y guardar esa información en mi base de datos.

    Agradezco mucho la ayuda que me puedan brindar.

    viernes, 30 de marzo de 2018 0:46

Todas las respuestas

  • Puede hacerlo sincrónicamente o asicnrónicamente (AJAX).  Una respuesta aquí no es para dar un tutorial de AJAX, así que lo mejor es que, si no conoce AJAX, se familiarice con él antes de proceder.  Menciono esto porque lo más popular sería asincrónicamente vía AJAX.

    El asunto es sencillo.  Normalmente el controlador tendrá una acción que busca los productos basados en el ID de la marca seleccionada.  El resultado devuelto sería datos únicamente, normalmente en formato JSON.  Muchas veces el controlador al que me refiero sería un controlador de WEB API y no uno de MVC normal, pero es un hecho que cualquiera de los dos sirve sin problema.

    En la vista tendría usted el botón de buscar (tal como dice quererlo).  Ese botón correría JS que obtendría la información y llenaría el listbox.

    Vista:

    <!--Este select lo crearía con @Html.DropDownFor() o similar.-->
    <select name="marca" id="ddMarcas">
        <option value="1">Marca 1</option>
        ...
    </select>
    
    <button type="button" id="btnBuscarProds">Buscar Productos</button>
    
    <select id="lstProductos" size="5"></select>

    JavaScript de la vista:

    //Este JS usa jQuery.
    $(function() {
        var boton = $('#btnBuscarProds');
        button.click(function() {
            var marca = $('#ddMarcas').val();
            var idMarca = parseInt(marca);
            if (isNaN(idMarca))
            {
                alert('Seleccione una marca antes de continuar.');
                return;
            }
            $.get(
                '/<nombre de controlador>/ProductosDeMarca/' + idMarca,
                null,
                function(data) {
                    //Datos recibidos.
                    var listaProds = $('#lstProductos');
                    //Borramos los datos que contiene la lista de productos actualmente.
                    listaProds.empty();
                    //Creamos nuevos.
                    //Hay que saber cómo luce "data".
                    console.log('data:  %o', data); //Abra la consola del navegador.  Podrá ver data como un objeto.
                    $.each(data.Productos, function(index, prod) {
                        var option = $('<option></option>');
                        option.attr('value', prod.Id);
                        option.text(prod.Nombre);
                        listaProds.append(option);
                    });
                }
            );
        });
    });

    En el controller:

    public ActionResult ProductosDeMarca(int idMarca)
    {
        //Consultar a la base de datos por los productos.
        //Necesitamos, al final, una colección de alguna clase con al menos nombre e ID de cada producto.
        List<Producto> productos = capaDatos.BuscarProductosDeMarca(idMarca);
        //Armamos un resultado usando un objeto de tipo anónimo.
        object r = new {
            Resultado = 0, //Señaliza que la operación fue exitosa; use un valor distinto de cero para señalizar lo contrario.
            Productos = productos
        };
        //Convertimos a JSON
        return Json(r, JsonRequestBehavior.AllowGet);
    }

    Y eso es, en escencia.


    Jose R. MCP
    Code Samples

    viernes, 30 de marzo de 2018 5:47
  • hola

    lo que planteas es cargar dos controles dependientes, en el articulo explico como podrias lograrlo

    [ASP.NET MVC] Carga DropDownList dependientes

    por supuesto en este caso habra un post al action para recargar el siguiente control

    >>Adicional me gustaria que una vez cargadas esas marcas en esa ListBox pueda pasar un elemento (o varios) a otra ListBox y guardar esa información en mi base de datos.

    que base de datos? usas entity framework ?

    recomendaria leas algo sobre model binding porque me da la sensacion que no hay inventigado siguiera un poco sobre como hacer post a un action

     Introduction To ASP.NET MVC Model Binding

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 3 de abril de 2018 6:30