0

Como puedo enviar los datos de la fila que selecciono para crear un pdf ya que al presionar el boton para generar el pdf solo me toma los datos de la primera fila. Estoy usando MVC en c# en donde obtengo los datos de la base de datos en una tabla en la vista y estos son listados si están vigentes hay no tengo problemas en como mostrar mi problema es cómo puedo enviar al formulario que tengo más abajo que es el que envía los datos al controlador el cual captura los datos para generar el pdf, esto lo hago mediante un script

@using Model
@using Sys.Remuneracion.Models
@model List<DiasAusencia>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
var permisos = (PermisoView)ViewData["permisosUsuario"];
}



@section css{
<link href="~/Css/Ingreso.css" rel="stylesheet" />
}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Mantenedor de Comprobantes</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="@Url.Content("~/Home")">Inicio</a></li>
                    <li class="breadcrumb-item active">Comprobantes</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-12">

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Listado de Comprobantes</h3>



                    </div>

                    <!-- /.card-header -->
                    <form class="formAddImportacion" method="post">
                        <div class="card-body">
                            //tabla que se llena con los datos 
                            <table id="datatable" class="table table-bordered table- 
                             hover" style="width:100%">

                                <thead>

                                    <tr>
                                        <th>#</th>
                                        <th>Empleado</th>
                                        <th>Rut</th>
                                        <th>Permiso</th>
                                        <th>Días</th>
                                        <th>Fecha inicio</th>
                                        <th>Fecha termino</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td id="idPermiso">@item.IdDiasAusencia</td>
                                            <td id="nombre">@($"{item.Contrato.Empleado.Nombre} 
                                            {item.Contrato.Empleado.Ap_Paterno}")</td>
                                            <td id="rutEmpleado">@item.Contrato.Empleado.Rut</td>
                                            <td id="tipoPermiso">@item.TipoPermisoLaboral.Nombre</td>
                                            <td id="dias">@item.Dias</td>
                                            <td id="fechaInicio">@item.FechaInicio.ToString("dd-MM-yyyy")</td>
                                            <td id="fechaFin">@item.FechaTermino.ToString("dd-MM-yyyy")</td>
                                            <td>
                                                <button style="margin:auto" class="c-btn c-btn--primary" type="button" onclick="generarPDF();" title="PDF">
                                                    <i class="fas fa-file-pdf"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    }
                                </tbody>

                            </table>

                        </div>
                    </form>
                    //Formulario que se envia al controlador con los datos de la tabla
                    <form class="pdfForm" method="post" action="~/ComprobanteVacaciones/GenerarPDF" target="_blank">

                        <input type="hidden" id="idComprobante" name="idPermiso" value="" />
                        <input type="hidden" id="nombreEmpleado" name="nombre" value="" />
                        <input type="hidden" id="rut" name="rut" value="" />
                        <input type="hidden" id="tipoPermisoVac" name="tipoPermiso" value="" />
                        <input type="hidden" id="diasPermiso" name="dias" value="" />
                        <input type="hidden" id="fechasInicial" name="fechaInicio" value="" />
                        <input type="hidden" id="fechasFinal" name="fechaFinal" value="" />

                    </form>
                </div>

            </div>

        </div>
    </div>
</section>

</div>

este es el script que toma los datos de la tabla y los asigna en el formulario que se envia al controlador

@section scripts{

    <script>
    function generarPDF() {
        const idPermiso = document.getElementById("idPermiso").innerHTML;
        document.getElementById("idComprobante").value = idPermiso;

        const rut = document.getElementById("rutEmpleado").innerHTML;
        document.getElementById("rut").value = rut;

        const nombre = document.getElementById("nombre").innerHTML;
        document.getElementById("nombreEmpleado").value = nombre;

        const tipo = document.getElementById("tipoPermiso").innerHTML;
        document.getElementById("tipoPermisoVac").value = tipo;

        const Permiso = document.getElementById("dias").innerHTML;
        document.getElementById("diasPermiso").value = Permiso;

        const inicial = document.getElementById("fechaInicio").innerHTML;
        document.getElementById("fechasInicial").value = inicial;

        const final = document.getElementById("fechaFin").innerHTML;
        document.getElementById("fechasFinal").value = final;

        $(".pdfForm").submit();
    }

</script>


}

2 respuestas 2

0

El problema es que no estas mostrando como estas recibiendo los datos en el controlador, para ver que error podría tener, porque en esencia debería funcionar, pero por lo que publicaste veo dos posibles problemas:

  1. Si no están llegando los datos al controlador, puede ser porque los parámetros que recibe en el método del controlador tienen nombre diferente a los name="" que tiene en el formulario.

  2. Si por el contrario, los datos llegan, pero solo los de la primera fila, es por que cada campo de la tabla tiene el mismo ID para cada fila, es decir, fila 1 tiene idPermiso, fila 2 también y etc, entonces la función de javascript toma un solo el primer ID que encuentre.

Para el segundo problema una solución podría ser que crees dentro del foreach de C#, una variable de tipo contador que vaya aumentando en cada fila y este contador esté concatenado al ID de cada elemento. Este mismo contador debe estar dentro del onclick() para que la función JS sepa cual ID debe tomar, ejemplo:

Esto va en la vista:

  @{ 
     var contador = 1;
   }

  @foreach (var item in Model)
  {
    <table>
      <tr>
        <td id="idPermiso_@contador">1646413</td>
        <td id="nombre_@contador">pedrito</td>
        <td id="fechaInicio_@contador">12-12-2022</td>
        <td id="fechaFin_@contador">30-12-2022</td>
        <td><button type="button" onclick="generarPDF(@contador)"></button></td>
      </tr>
    </table>

    contador++;
  }

Los ID dentro de la tabla quedarían algo así (obviamente no visibles):

# empleado
idPermiso_1 nombre_1
idPermiso_2 nombre_2
idPermiso_3 nombre_3
idPermiso_4 nombre_4

Y en el script simplemente recibe el contador y así mismo lo concatenas a los id que va a capturar:

  <script>
    function generarPDF(contador) {
    const idPermiso = document.getElementById(`idPermiso_${contador}`).innerHTML;
    document.getElementById("idComprobante").value = idPermiso;

    const nombre = document.getElementById(`nombre__${contador}`).innerHTML;
    document.getElementById("nombreEmpleado").value = nombre;

    $(".pdfForm").submit();
    }
  </script>

Para los ID dentro de los getElementById utilicé backticks (``), me parece mas cómodo que alternar entre comillas dobles y simples, pero queda a gusto de cada uno.

0

Revisa la ruta del atributo action de tú formulario, agrega un punto de parada del lado del controlador, dicha acción debe ser de tipo HttpPost.

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.