如何获取动态表中的当前行索引？ C#/ASP.NET MVC

Question

我有一个表格来显示动态列表中的对象元素，因此表格应该能够按照用户认为合适的方式增长和缩小。我如何才能获得特定的行索引？

我基本上有一个购物车，上面有价格、数量、名称等。最后是一个删除按钮，单击该按钮应删除当前行。所以我需要能够将当前列表元素与其各自的删除按钮相关联。

下面是我的桌子：

<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>

有没有办法给删除按钮 'btn-dark' 一个动态 id，随着表格的增长/缩小而增加/减少？

Answer 1

如果不改变你的 foreach 循环，我会做这样的事情：

<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>

然后您将使用 JQuery 在单击按钮时检索 data-delete-id 参数值并从表中删除该项目。

Answer 2

看起来您的动态列表已被传递到视图中，那么为什么不在您传递它之前创建唯一 ID？

然后你可以像下面这样绑定它，并在控制器中调用一个传递 ID 的操作（或修改为使用 AJAX 或调用 JS 函数）

<td><a class="btn-dark" href="@Url.Action("Action", "Controller", new { id = @itemList.Id})">Delete </a>
 </td>

然后，您可以将该唯一 ID 绑定到删除按钮并使用它做您想做的事情。

Answer 3

假设 Model 是 List 你可以这样做：

@for (int i = 0; i < Model.Count; i++){
    var itemList = Model[i];
    ....
    <button id="Delete@(i)" class="btn-dark">Delete</button>
    ....
}

生成：

<button id="Delete1" class="btn-dark">Delete</button>
<button id="Delete2" class="btn-dark">Delete</button>
<button id="Delete3" class="btn-dark">Delete</button>
...

另一个选项在性能方面效率较低，但需要较少的代码，它使用IndexOf() 来获取元素的索引。如果Model 是IEnumerable<T>，则需要先将其转换为列表。

Answer 4

您可以简单地使用 jquery 的最接近函数从表中删除该行。

$(".customTable").on('click', '.delete', function (event) {
   $(this).closest(' tr').remove();
});

对于上述代码，您的删除按钮应包含删除类。

<button class="btn-dark delete">Delete</button>