Hola a todos:
A ver si alguien me puede echar una mano, porque parece que esté escribiendo MacBeth en alemán sin usar traductor automático.
Estoy creando una página con ASP.NET Core, en la que tengo que crear una tabla con datos que se pueden editar. La idea es que las celdas de la tabla, casi todas, son editables, y al final de la línea, hay un botón para enviar la información a mi Controller, que coge esos datos de la línea y los actualiza en la BBDD.
Mi modelo de datos es algo parecido a esto:
Código:
class Empresa {
List<Empleado> lista;
}
class Empleado {
string Id;
string nombre;
string apellidos;
int edad;
bool activo;
}
Bueno, pues en mi vista, he podido crear la tabla. Simplificando las cosas quedaría algo así:
Código:
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTable">
<thead>
<tr>
<th>
<label>Nombre</label>
</th>
(...)
</tr>
</thead>
<tbody>
@if ((Model != null) && (Model.lista != null))
{
@for (int i = 0; i < Model.lista.Count(); i++)
{
<tr>
<td style="display:none"><input readonly="readonly" asp-for="@Model.lista[i].Id"> </td>
<td style="vertical-align: middle; text-align: center">@Model.lista[i].Id</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" asp-for="@Model.lista[i].nombre">
</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" asp-for="@Model.lista[i].apellidos">
</td>
<td style="vertical-align: middle; text-align: center">
<input class="form-control" readonly="readonly" asp-for="@Model.lista[i].edad">
</td>
<td style="vertical-align: middle; text-align: center">
<input type="checkbox" class="form-control" asp-for="@Model.lista[i].activo">
</td>
<td style="vertical-align: middle; text-align: center">
<a class="btn btn-primary form-control w-25 p-1 submit" href="#" data-action="Update">@ViewBag.localize["ButtonUpdate"]</a>
</td>
</tr>
}
}
</tbody>
</table>
</div>
Y más adelante, defino el siguiente script en JS para el botón:
Código:
<!-- Script para botón de líneas de tabla -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$(".submit").on("click", function (event) {
console.log("Prueba 1");
event.preventDefault();
var url = '@Url.Action("Update", "Employee")';
var row = $(this).parents("tr").first();
var data = row.find("input, select, textarea").serialize();
window.location.href = url + '?' + data;
});
});
</script>
No sé si me estoy complicando mucho, pero como no puedo meter un formulario dentro de una tabla, y los intentos por enviar los datos de la línea usando Model.lista[\i] en el botón me han devuelto los valores sin editar, pues he leído que lo suyo es usar JS, y obtener los datos de los inputs directamente.
Esto me funciona, y me genera la llamada con lo que necesito... pero tiene una pega. Cuando la llamada debería ser algo tipo:
Código:
http://miweb/Employee?Id='1'&nombre='Dolores'&apellidos='Fuertes DeBarriga'&edad=30&activo=true
lo que obtengo es:
Código:
http://miweb/Employee?lista[i].Id='1'&lista[i].nombre='Dolores'&lista[i].apellidos='Fuertes DeBarriga'&lista[i].edad=30&lista[i].activo=true
Esto se lo achaco a que asp-for me cambia el name del elemento por el mismo que el nombre de la variable. He leído que se puede forzar el nombre, y eso creo que lo arreglaría, pero es una mala práctica.
La otra opción es arreglar el "serialize" del javascript, pero para mi JS es como hablar en catalán (puedo entender lo que se dice, pero ni papa de hablarlo), y no sé qué opciones habría para evitar la primera parte del nombre, de coger sólo lo que haya después del punto del nombre, o borrar "lista[\i]." (con un extra de caracteres raros que no sé reproducir) de toda la cadena.
Como sé que aquí hay gente que pilota de diseño web mil veces más que yo, a ver si me podéis echar una manita, por favor. Gracias.
Marcadores