mvc view table row number counter - asp.net-mvc

Question

I have a table than shown one record of my model. for example list of category.
i want to create manually row number for this table.
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#foreach (var item in Model)
{
<tr>
<td>
**I want to Show Row Number Here**
</td>
<td>
#Html.ActionLink(item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.Id }, null)
</td>
</tr>
}
</table>

Answer 1

Define a counter rowNo and write
#{ int rowNo = 0; }
#foreach (var item in Model) {
<tr style="background: #classtr;" >
<td>
#(rowNo += 1)
</td>

Answer 2

Define a counter rowNo and write
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#{int rowNo;}
#foreach (var item in Model)
{
<tr>
<td>
#rowNo++;
</td>
<td>
#Html.ActionLink(item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.Id }, null)
</td>
</tr>
}
</table>

Answer 3

None of the above worked for me - I did this:
#{int RowNo = 0;}
#foreach (var item in Model) {
<tr>
<td>#{RowNo++;} #RowNo</td>

Answer 4

You may use the Select overload:
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#foreach (var item in Model.Select((item,index)=>new{item,index})
{
<tr>
<td>
#item.index
</td>
<td>
#Html.ActionLink(item.item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.item.Id }, null)
</td>
</tr>
}
</table>

Answer 5

I've found the next option for my ASP.Net MVC project. All above options didn't work for my project.
#foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 }))
{
<tr>
<td>
#item.Index
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerComments)
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerRating)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Data.Id })
</td>
</tr>
}

Answer 6

I think this code will solve the problem
let rows = document.querySelectorAll('tr');
rows.forEach((row) => {
let z = document.createElement("td");
z.textContent = `(row #${row.rowIndex})`;
row.appendChild(z);
});
<table>
<thead>
<tr><th>Item</th> <th>Price</th></tr>
</thead>
<tbody>
<tr><td>Bananas</td> <td>$2</td></tr>
<tr><td>Oranges</td> <td>$8</td></tr>
<tr><td>Top Sirloin</td> <td>$20</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td> <td>$30</td></tr>
</tfoot>
</table>

Answer 7

Easiest approach is to use CSS to have the row numbers in your tables in the index of you MVC View.
.css-serial {
counter-reset: serial-number;
/* Set the serial number counter to 0 */
}
.css-serial td:first-child:before {
counter-increment: serial-number+1;
/* Increment the serial number counter */
content: counter(serial-number);
/* Display the counter */
}
table{
font-family: Arial;
border:solid;
border-width:1px;
border-color:#dedede;
border-radius:5px;
}
th{
background-color:#efefef;
}
td{
padding:3px;
margin:3px;
}
<table class="css-serial">
<tr>
<th>Row #</th>
<! –– Row Number goes here automatically with CSS style ––>
<th>Name</th>
</tr>
<tr>
<td></td>
<td>John</td>
</tr>
<tr>
<td></td>
<td>Richard</td>
</tr>
<tr>
<td></td>
<td>Joe</td>
</tr>
<tr>
<td></td>
<td>Rogan</td>
</tr>
<tr>
<td></td>
<td>Lebron</td>
</tr>
<tr>
<td></td>
<td>Marcus</td>
</tr>
<tr>
<td></td>
<td>Jane</td>
</tr>
<tr>
<td></td>
<td>Maria</td>
</tr>
</table>