'mvc view table row number counter

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>
asp.net-mvcmodel-view-controllerrazorview


Solution 1:[1]

Define a counter rowNo and write

@{ int rowNo = 0; }

@foreach (var item in Model) {       
<tr style="background: @classtr;" >
    <td>
        @(rowNo += 1)
    </td>

Solution 2:[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>

Solution 3:[3]

None of the above worked for me - I did this:

@{int RowNo = 0;}
@foreach (var item in Model) {
<tr>
    <td>@{RowNo++;} @RowNo</td>

Solution 4:[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>

Solution 5:[5]

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>

Solution 6:[6]

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>

Solution 7:[7]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mehdi Dehghani
Solution 2 Murali Murugesan
Solution 3 niico
Solution 4 Giannis Paraskevopoulos
Solution 5 farsam
Solution 6 Richard Elento
Solution 7 Kiril Dobrev

Related Questions