How to get the current row index in a dynamic table? C# / ASP.NET MVC

Question

I have a table displaying object elements from a dynamic list, hence the table should be able to grow and shrink in size, as the user sees fit. How would i be able to get the specific row index?

I basically have a shopping cart, with price, quantity, name and so forth. And lastly, a delete button, that when clicked should delete the current row. So i need to be able to associate the current list element with its respective delete button.

Below is my table:

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

Would there be a way to give the delete button, 'btn-dark' , a dynamic id that increments/decrements as the table grows/shrinks?

Haich · Accepted Answer · 2020-06-30 09:38:33Z

1

Without changing your foreach loop I would have done something like this:

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

Then you'd use JQuery to retrieve the data-delete-id parameter value on click of the button and remove the item from the table.

answered Jun 30, 2020 at 9:38

Haich

2793 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SeventhWarhawk Over a year ago

Thank you. This solution is perfect for what i need.

Dodgystats · Accepted Answer · 2020-06-30 09:16:02Z

1

Looks like your dynamic list is been passed into the view so why not have the Unique ID created before you pass it in?

You can then bind it something like below and call a action in the controller passing the ID(or modify to use AJAX or call JS function)

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

You can then bind that unique ID to the delete button and do what you want with it.

answered Jun 30, 2020 at 9:16

Dodgystats

556 bronze badges

Comments

Daniel Manta · Accepted Answer · 2020-06-30 09:35:20Z

1

Assuming Model is a List you can do:

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

Generates:

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

Another option less efficient in terms of performance but requiring less code it's using IndexOf() to get the index of an element. If Model is IEnumerable<T> you need to cast it as a List first.

edited Jun 30, 2020 at 9:35

answered Jun 30, 2020 at 9:12

Daniel Manta

6,76317 gold badges43 silver badges49 bronze badges

Comments

Hamza Ali · Accepted Answer · 2020-06-30 09:58:28Z

1

You can simply remove the row from the table using closest function of jquery.

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

For the above code your delete button should contain the delete class.

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

answered Jun 30, 2020 at 9:58

Hamza Ali

3905 silver badges22 bronze badges

1 Comment

SeventhWarhawk Over a year ago

Quick, easy fix. But unfortunately these changes wont reflect in the list itself, so when the page is refreshed, the table will re-populate itself

Collectives™ on Stack Overflow

How to get the current row index in a dynamic table? C# / ASP.NET MVC

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related