Here is my scenario:

I have a table that displays the Name, Age, and Details content on each row. When a user selects the Details button, it should trigger a modal and show additional content specific to that Person in the table.

Issue at hand:

I am using Razor syntax and dynamically generating the rows within the table.

Question: How can I get the row index value for that specific row when selecting the Details button

Additional Notes:

I did some research online, but couldn't find anything that helped me in my scenario.


<div class="col-md-12">
    <table class="table table-striped">
        @foreach (var viewModel in Model)
                <td><button onclick="PersonViewModel(this)" type="button" class="btn btn-success" data-toggle="modal" data-target="#details-modal"><span class="fa fa-external-link-square"></span> Details</button></td>


function PersonViewModel(x) {
    $('body').on('click', 'a.showMore', function(event) {
        var rowIndex = $(this).closest('tr').index();
        alert("Row index is: " + rowIndex);

Related posts

Recent Viewed