Question

我有一张桌子而不是显示我的模型的一条记录。例如，类别列表。我想手动为这个表创建行号。

<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

定义计数器rowNo并写入

@{ int rowNo = 0; }

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

Answer 2

定义计数器rowNo并写入

<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

您可以使用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 4

以上都不适合我 - 我这样做了：

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

Answer 5

我认为这段代码可以解决问题

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 6

我为我的ASP.Net MVC项目找到了下一个选项。以上所有选项均不适用于我的项目。

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

mvc查看表行号计数器

6 个答案: