none
mvc llenar tabla apartir de un click RRS feed

  • Pregunta

  • Buenas tardes, soy nuevo en esto de MVC, y tenga una duda (Estoy programando en VS 2012, c#, RAZOR):

    Tengo una pantalla la cual carga una lista de botones, que estos botones son LISTA que vienen de una BD, lo que quiero hacer es que al hacer clic a un botón, me llene una tabla que tengo en la misma pantalla, esta tabla va a contener los registros que se vayan seleccionando con los botones.

    Me confundo, por que le agregue a mi botón que llame una acción, pero ps esto carga toda la pagina y no se como hacer para no perder todo lo que tengo cargado y solo llenar mi tabla.

    Este es mi código en la parte donde esta la tabla y donde cargo los botones:

            <div class="rTable">
                <div class="rTableHead">
                    <div class="rTableRow">
                        <div class="rTableCell">
                            <div style="width: 600px">
                                @foreach (var Producto in Model.ListaProductos)
                                {
                                    <div class="AlinearLeft">
                                        <button type="button" class="buttonCaptura" onclick="location.href='@Url.Action("AgregaProductoCuenta", new { Id = Producto.NIdProducto })'">
                                            @Producto.VNombre
                                        </button>
                                    </div>
                                }
                            </div>
                        </div>
    
                        <div class="rTableCell FontTop" id="CapturaProductos">                        
                            @Html.Label("Detalle de la Venta:", new { @class = "FontFormatLabel FontSizeBig FontCenter" })
    
                            <table class="bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            Cant.
                                        </th>
    
                                        <th>
                                            Nombre del Producto
                                        </th>
    
                                        <th>
                                            Precio
                                        </th>
    
                                        <th>
                                            Mod. Cantidad
                                        </th>
    
                                        <th>
                                            Borrar
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var ProductoCapturado in Model.ListaProductosCapturados)
                                    {
                                        <tr>
                                            <td>
                                                @Html.DisplayFor(model => ProductoCapturado.NCantidad)
                                            </td>
    
                                            <td>
                                                @Html.DisplayFor(model => ProductoCapturado.VNombre)
                                            </td>
    
                                            <td>
                                                @Html.DisplayFor(model => ProductoCapturado.NPrecio)
                                            </td>
    
                                            <td>
                                                <button type="button" style="width:18px;">
                                                    <img src="~/Images/Editar.png" />
                                                </button>
                                                
                                            </td>
    
                                            <td>
                                                <button type="button" style="width:18px;">
                                                    <img src="~/Images/borrar.jpg" />
                                                </button>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
    
    
    
                        </div>
                    </div>
                </div>
            </div>

    En mi modelo de datos tengo una variable llamada ListaProductosCapturados esta es de tipo List<Model>, que es donde yo pienso que tengo que agregar los productos que se seleccionan y asi poder llenar mi tabla.

    Gracias y espero haber sido claro y me puedan ayudar.

    Saludos.



    Hugo Gil

    martes, 19 de abril de 2016 15:16

Respuestas

  • Hola Hugo, para hacer eso tenés que crear un formulario Ajax (si tu intención es que no se recargue toda la página) especificando el UpdateTargetId del div donde quieras cargar la tabla después de presionar el botón.

    En el click del botón, podés hacer que se llene el formulario con la variable que corresponda para que se haga un post a una acción de tu controlador que devuelva una vista parcial. Esa vista parcial se cargará en el div que hayas especificado.

    Aquí un ejemplo de StackOverflow.

    Creo entender de tu código que estás queriendo hacer algo así como un carro de la compra, donde haciendo clic arriba vas añadiendo cosas al carrito. Si querés seguir con esa disposición, convendría que guardes el carrito en una variable de sesión y en cada botón vayas añadiendo productos a esa variable.

    Salu2

    • Marcado como respuesta Hugo Gil martes, 19 de abril de 2016 16:48
    martes, 19 de abril de 2016 15:24
  • >>¿todo lo que quiera que se cargue de manera independiente en una vista, es  necesario hacerla con vistas parciales?

    si es necesario

    la vista partial debera inyectarse de forma dinamica por ajax en el contenedor (por lo general un div) puede usar jquery con $.ajax o @Ajax.BeginForm()

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Hugo Gil martes, 19 de abril de 2016 16:48
    martes, 19 de abril de 2016 16:35

Todas las respuestas

  • Hola Hugo, para hacer eso tenés que crear un formulario Ajax (si tu intención es que no se recargue toda la página) especificando el UpdateTargetId del div donde quieras cargar la tabla después de presionar el botón.

    En el click del botón, podés hacer que se llene el formulario con la variable que corresponda para que se haga un post a una acción de tu controlador que devuelva una vista parcial. Esa vista parcial se cargará en el div que hayas especificado.

    Aquí un ejemplo de StackOverflow.

    Creo entender de tu código que estás queriendo hacer algo así como un carro de la compra, donde haciendo clic arriba vas añadiendo cosas al carrito. Si querés seguir con esa disposición, convendría que guardes el carrito en una variable de sesión y en cada botón vayas añadiendo productos a esa variable.

    Salu2

    • Marcado como respuesta Hugo Gil martes, 19 de abril de 2016 16:48
    martes, 19 de abril de 2016 15:24
  • hola

    >>le agregue a mi botón que llame una acción, pero ps esto carga toda la pagina y no se como hacer para no perder todo lo que tengo cargado y solo llenar mi tabla.

    no definas en la misma vista la lista de botones y la tabla

    vas a tener que crear dos vistas distintas, una que lista los botones y otra partialview que renderiza la tabla

    entonces podrias usar el @Ajax.BeginForm() para invocar al action que devolvera la tabla y la ubicara en el <div> que definas

    Using Ajax.BeginForm() with ASP.NET MVC

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 19 de abril de 2016 15:34
  • Que tal gracias por la respuesta a Matías Kusack y Leandro,  entonces por lo que entiendo, ¿todo lo que quiera que se cargue de manera independiente en una vista, es  necesario hacerla con vistas parciales?

    Hugo Gil

    martes, 19 de abril de 2016 15:57
  • >>¿todo lo que quiera que se cargue de manera independiente en una vista, es  necesario hacerla con vistas parciales?

    si es necesario

    la vista partial debera inyectarse de forma dinamica por ajax en el contenedor (por lo general un div) puede usar jquery con $.ajax o @Ajax.BeginForm()

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Hugo Gil martes, 19 de abril de 2016 16:48
    martes, 19 de abril de 2016 16:35