Al hacer click en el botón
agregar carrito (llamo a una función de javascript
que me agregaría el idLibro que esta en el input type="hidden"
al array
de la función de javascript
) después pasaría ese array de javascript
al controlador
para hacer algo (pero eso seria otro tema).
el input
lo tengo así:
<input type="hidden" name="inputText" id="inputText" value="@item.IdLibro" />
El problema que tengo es que cuando hago click en el botón agregar a carrito en cualquier fila de mi tabla, siempre me agrega el mismo idLibro a el array
de javascript
. Por ejemplo:
tengo una tabla
con 5 filas, en c/u de las filas tengo el botón
agregar carrito y los datos del registro. Entonces si en la fila 1 hago click en agregar a carrito, en el array
me guarda el idLibro 25, pero si hago click en agregar a carrito en la fila 4 también me vuelve a cargar el idLibro 25.
Aca el .cshtml
@model List<Librery_MVC.Models.Libro>
<p id="pText">hola</p>
<div class="table-responsive">
<table class="table table-striped table-primary mt-5 table-bordered" id="myTable">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Nombre</th>
<th>Autor</th>
<th>Categoria</th>
<th>Descripcion</th>
<th>Precio</th>
<th>Imagen</th>
</tr>
</thead>
<tbody>
@if (Model.Count() == 0)
{
<tr>
<td colspan="6" style="color:red">
No Match any document
</td>
</tr>
}
else
{
foreach (Libro item in Model)
{
autor = sa.getAutor(item.IdAutor);
editorial = es.GetEditorial(item.IdEditorial);
category = cs.getCategoria(item.IdCategoria);
<tr>
<th>
<input type="hidden" name="inputText" id="inputText" value="@item.IdLibro" />
@Html.ActionLink("Mostrar", "MostrarLibro", "Usser", new { idLibro = item.IdLibro }, new { @class = "btn btn-info" })
<button onclick="pushData();" class="btn btn-info">Agregar a carrito</button>
</th>
<th>@item.IdLibro</th>
<th class="col-md-2">@item.Nombre</th>
<th>@autor.Nombre</th>
<th>@category.Nombre</th>
<th class="col-md-3"><textarea rows="4" cols="40" readonly>@item.Descripcion</textarea></th>
<th>@item.Precio</th>
<th><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
</tr>
}
}
</tbody>
</table>
</div>
Y aca la función de javascript
<script type="text/javascript">
//creo el array
var myArr = [];
function pushData() {
//obtengo valores del input hidden "inputText"
var inputText = document.getElementById('inputText').value;
//añado los elementos al array
myArr.push(inputText);
var pval = "";
for (i = 0; i < myArr.length; i++) {
pval = pval + myArr[i] + "<br/>";
}
//muestro el array
document.getElementById('pText').innerHTML = pval;
}
</script>