none
Agregar una fila a una de manera dinámica en una vista parcial modal

    Pregunta

  • Buenas tardes, 

    Estoy desarrollando una aplicacion en la cual el usuario podrá crear deducciones, en una venta modal. Necesito que el usuario al dar click en el botón + Rango se agregue de forma automática una nueva fila, soy algo nuevo en el desarrollo web, no sé podría hacer.

    @model RecursosHumanos.Models.Tbl_Deducciones
    @{
        ViewBag.Title = "Crear Deduccion";
        ViewBag.Deducciones = "active";
    }
    
    <div class="modal-header">
        <h5 class="modal-title"> <strong>Crear Deducción</strong></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    
    
    <hr />
    
    @using (Html.BeginForm("CrearDeduccion"))
    {
        @Html.AntiForgeryToken()
    
        <div class="modal-body">
            <div class="form-horizontal">
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-sm-1">Deducción:</label>
                        <div class="col-sm-5">
                            <input type="text" name="DedDescripcion" class="form-control" required />
                        </div>
                    </div>
    
                    <div class="form-group">
                        <label class="control-label col-sm-1">Tipo Deducción:</label>
                        <div class="col-sm-5">
                            @Html.DropDownList("tipoDeducciones", null, htmlAttributes: new { @class = "form-control", required = "required" })
                        </div>
                    </div>
    
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="checkbox" name="configurar_rango" id="configurar_rango"> Configurar rango
                        </div>
                    </div>
                </div>           
    
                <div class="table-responsive pre-scrollable" id="tbl_Rango_Deduccion">
                    <table class="table-bordered table-xxs">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-center" width="40%">Rango</th>
                                <th rowspan="2" class="text-center" width="25%">Porcentaje %</th>
                                <th rowspan="2" class="text-center" width="25%">Valor</th>
                                <th rowspan="2" class="text-center" width="10%">Opciones</th>
                            </tr>
                            <tr>
                                <th class="text-center" width="20%">Valor Inicial</th>
                                <th class="text-center" width="20%">Valor Final</th>
                            </tr>
                        </thead>
    
                        <tbody>
                            <tr>
                                <td width="20%"><input type="text" class="form-control" placeholder="0.00"/></td>
                                <td width="20%"><input type="text" class="form-control" placeholder="0.00"/></td>
                                <td width="25%"><input type="text" class="form-control" placeholder="0%"/></td>
                                <td width="25%"><input type="text" class="form-control" placeholder="0.00"/></td>
                                <td width="10%"><a data-toggle="modal" data-target="#modal-deducciones2" href="@Url.Action("CrearDeduccion")"><i class="icon-plus-circle2 position-left"></i> Rango</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    
        <br />
        <hr />
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-primary">Crear</button>
        </div>
    }
    
    <script>
        $(document).ready(function () {
            $('#txtMostrar').hide();
            $('#tbl_Rango_Deduccion').hide();
    
            $("#configurar_rango").on("click", function () {
                if ($("#configurar_rango").attr("checked")) {
                    $('#txtMostrar').hide();
                } else {
                    $('#txtMostrar').show();
                }
    
                if ($('#configurar_rango').prop('checked')) {
                    $('#tbl_Rango_Deduccion').show();
                }else
                {
                    $('#tbl_Rango_Deduccion').hide();
                }
            });
        });
    </script>


    lunes, 14 de mayo de 2018 23:00

Todas las respuestas

  • Veo una cantidad excesiva de DIV's.  Bootstrap dice que el único elemento hijo que debería existir para DIV's de clase "row" son DIV's de clase "col-XX-XX".  Un DIV de clase "row" o "col-XX-XX" pueden ser form-group también, así que no hace falta crear DIV's adicionales.

    Luego, su problema:  Solamente corra JS para insertar una nueva fila en la tabla.  jQuery tiene el método .clone() que clona un elemento HTML.  Puede ubicar, por ejemplo, la primera o última fila del tbody de la tabla (que ubica por ID) y luego agrega el clon a la tabla.

    Todo esto, sin embargo, sería tan, tan pero tan fácil con Angular o AngularJS.  Sería bueno que lo aprendiera.


    Jose R. MCP
    Code Samples

    lunes, 14 de mayo de 2018 23:14
  • Hola, Jose

    Ya logre que me agregue una fila en la tabla, pero necesito que en los tipos input en el atributo name llevara el valor del indice del arreglo pero no se como hacer para que cada vez que agregue una fila me aumente el valor del arreglo. Por ejemplo, tengo la primera fila

    <tr id="row_Rango">
                            <td width="20%"><input type="text" name="[0].ValorInicial" class="form-control" placeholder="0.00" /></td>
                            <td width="20%"><input type="text" name="[0].ValorFinal" class="form-control" placeholder="0.00" /></td>
                            <td width="25%"><input type="text" name="[0].Porcentaje" class="form-control" placeholder="0%" /></td>
                            <td width="25%"><input type="text" name="[0].Valor" class="form-control" placeholder="0.00" /></td>
                            <td width="10%"> <a id="btnAgregarRango"><i class="icon-plus-circle2 position-left text-center"></i></a></td>
                        </tr>

    Lo que busco es que cada vez que se agregue una nueva fila el valor del arreglo aumente, lo he intentado pero no se como hacerlo con JS o Jquery.

    Aqui esta el codigo de la vista

    @model RecursosHumanos.Models.Tbl_Deducciones
    @{
        ViewBag.Title = "Crear Deduccion";
        ViewBag.Deducciones = "active";
    }
    
    <div class="modal-header">
        <h5 class="modal-title"> <strong>Crear Deducción</strong></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    
    
    <hr />
    
    @using (Html.BeginForm("CrearDeduccion"))
    {
        @Html.AntiForgeryToken()
    
        <div class="modal-body">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-1">Deducción:</label>
                    <div class="col-sm-5">
                        <input type="text" name="DedDescripcion" class="form-control" required />
                    </div>
                </div>
    
                <div class="form-group">
                    <label class="control-label col-sm-1">Tipo Deducción:</label>
                    <div class="col-sm-5">
                        @Html.DropDownList("tipoDeducciones", null, htmlAttributes: new { @class = "form-control", required = "required" })
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="checkbox" name="configurar_rango" id="configurar_rango"> Configurar rango
                    </div>
                </div>
    
                <div class="table-responsive pre-scrollable" id="tblRangoDeduccionesFijas">
                    <table class="table-bordered table-xxs">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-center" width="40%">Rango</th>
                                <th rowspan="2" class="text-center" width="25%">Porcentaje %</th>
                                <th rowspan="2" class="text-center" width="25%">Valor</th>
                                <th rowspan="2" class="text-center" width="10%">Opciones</th>
                            </tr>
                            <tr>
                                <th class="text-center" width="20%">Valor Inicial</th>
                                <th class="text-center" width="20%">Valor Final</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyAgregarRango">
                        <tr id="row_Rango">
                            <td width="20%"><input type="text" name="[0].ValorInicial" class="form-control" placeholder="0.00" /></td>
                            <td width="20%"><input type="text" name="[0].ValorFinal" class="form-control" placeholder="0.00" /></td>
                            <td width="25%"><input type="text" name="[0].Porcentaje" class="form-control" placeholder="0%" /></td>
                            <td width="25%"><input type="text" name="[0].Valor" class="form-control" placeholder="0.00" /></td>
                            <td width="10%"> <a id="btnAgregarRango"><i class="icon-plus-circle2 position-left text-center"></i></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    
        <br />
        <hr />
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-primary">Crear</button>
        </div>
    }
    
    <script>
        $(document).ready(function () {
            $('#txtMostrar').hide();
            $('#tblRangoDeduccionesFijas').hide();
    
            $("#configurar_rango").on("click", function () {
                if ($('#configurar_rango').prop('checked')) {
                    $('#tblRangoDeduccionesFijas').show();
                }else
                {
                    $('#tblRangoDeduccionesFijas').hide();
                }
            });
            $("#btnAgregarRango").click(function () {
                $("#row_Rango").clone(true).appendTo("#tbodyAgregarRango");
            });
        });
    </script>

    Gracias.

     


    martes, 15 de mayo de 2018 15:21
  • Utilice una variable global en JavaScript que lleve la cuenta.  Luego con jQuery ubica los controles y cambia los name, construyendo el name con este contador global.  Una simple concatenación de texto.


    Jose R. MCP
    Code Samples

    martes, 15 de mayo de 2018 19:34