How can I send the data of the row that I select to create a pdf since when I press the button to generate the pdf it only takes the data of the first row. I am using MVC in c# where I get the data from the database in a table in the view and these are listed if they are valid there I have no problems with how to show my problem is how can I send the form that I have below which is the that sends the data to the controller which captures the data to generate the pdf, I do this through a 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>
this is the script that takes the data from the table and assigns it to the form that is sent to the controller
@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>
}
Check the route of the action attribute of your form, add a breakpoint on the controller side, said action must be of type HttpPost.
The problem is that you are not showing how you are receiving the data in the controller, to see what error it could have, because in essence it should work, but from what you published I see two possible problems:
If the data is not reaching the controller, it may be because the parameters it receives in the controller method have a different name than the name="" that it has in the form.
If, on the other hand, the data arrives, but only from the first row, it is because each field of the table has the same ID for each row, that is, row 1 has idPermiso, row 2 also and etc, then the function from javascript it takes only the first ID it finds.
For the second problem, a solution could be that you create within the C# foreach, a variable of type counter that increases in each row and this counter is concatenated to the ID of each element. This same counter must be inside the onclick() so that the JS function knows which ID to take, example:
This goes in the view:
The IDs inside the table would look something like this (obviously not visible):
And in the script you simply receive the counter and likewise concatenate it to the id that it is going to capture:
For the IDs inside the getElementById I used backticks (``), I find it more comfortable than alternating between double and single quotes, but it is up to each one.