J'ai un tableau affichant des éléments d'objet à partir d'une liste dynamique, donc le tableau devrait être capable de croître et de diminuer en taille, comme l'utilisateur l'entend. Comment pourrais-je obtenir l'index de ligne spécifique?
J'ai essentiellement un panier, avec le prix, la quantité, le nom, etc. Et enfin, un bouton de suppression qui, lorsqu'il est cliqué, doit supprimer la ligne actuelle. Je dois donc pouvoir associer l'élément de liste actuel à son bouton de suppression respectif.
Voici mon tableau:
<div class="customContainer">
<table class="customTable">
<thead class="customHead">
<tr class="customRow">
<th class="customHead2">Product</th>
<th class="customHead2">Quantity</th>
<th class="customHead2">Price</th>
<th class="customHead2">Total</th>
<th class="customHead2">Remove</th>
</tr>
</thead>
<tbody class="customBody">
@foreach (var itemList in Model)
{
<tr class="customRow">
<td class="customData">@itemList.Name</td>
<td class="customData">@itemList.Quantity</td>
<td class="customData">@itemList.Price</td>
<td class="customData">@itemList.Total</td>
<td class="customData"><button class="btn-dark">Delete</button></td>
</tr>
}
</tbody>
</table>
</div>
Y aurait-il un moyen donner au bouton de suppression, 'btn-dark', un identifiant dynamique qui s'incrémente / décrémente à mesure que le tableau grandit / rétrécit?
4 Réponses :
En supposant que Model est une Liste , vous pouvez faire:
<button id="Delete1" class="btn-dark">Delete</button> <button id="Delete2" class="btn-dark">Delete</button> <button id="Delete3" class="btn-dark">Delete</button> ...
Génère:
@for (int i = 0; i < Model.Count; i++){
var itemList = Model[i];
....
<button id="Delete@(i)" class="btn-dark">Delete</button>
....
}
On dirait que votre liste dynamique a été passée dans la vue, alors pourquoi ne pas créer l'ID unique avant de le transmettre?
Vous pouvez ensuite la lier à quelque chose comme ci-dessous et appeler une action dans le contrôleur en passant l'ID ( ou modifier pour utiliser AJAX ou appeler la fonction JS)
<td><a class="btn-dark" href="@Url.Action("Action", "Controller", new { id = @itemList.Id})">Delete </a>
</td>
Vous pouvez ensuite lier cet identifiant unique au bouton de suppression et en faire ce que vous voulez.
p>
Sans changer votre boucle foreach, j'aurais fait quelque chose comme ceci:
<div class="customContainer">
<table class="customTable">
<thead class="customHead">
<tr class="customRow">
<th class="customHead2">Product</th>
<th class="customHead2">Quantity</th>
<th class="customHead2">Price</th>
<th class="customHead2">Total</th>
<th class="customHead2">Remove</th>
</tr>
</thead>
<tbody class="customBody">
var model = Model.ToList();
@foreach (var itemList in model)
{
@{
var index = model.IndexOf(itemList);
}
<tr class="customRow">
<td class="customData">@itemList.Name</td>
<td class="customData">@itemList.Quantity</td>
<td class="customData">@itemList.Price</td>
<td class="customData">@itemList.Total</td>
<td class="customData"><button data-delete-id="@index" class="btn-dark">Delete</button></td>
</tr>
}
</tbody>
</table>
</div>
Ensuite, vous utiliseriez JQuery pour récupérer la valeur du paramètre data-delete-id en cliquant sur le bouton et supprimer l'élément du tableau.
Merci. Cette solution est parfaite pour ce dont j'ai besoin.
Vous pouvez simplement supprimer la ligne de la table en utilisant la fonction la plus proche de jquery.
<button class="btn-dark delete">Delete</button>
Pour le code ci-dessus, votre bouton de suppression doit contenir la classe de suppression.
$(".customTable").on('click', '.delete', function (event) {
$(this).closest(' tr').remove();
});
Solution simple et rapide. Mais malheureusement, ces changements ne seront pas reflétés dans la liste elle-même, donc lorsque la page est actualisée, le tableau se re-peuplera