ASP.NET 6 Razor视图表格序号列计数器实现求助

你的代码问题在于在foreach循环内部嵌套了for循环，这会导致每一行都生成多个<td>单元格（数量等于总记录数-1），完全不符合逐行显示1、2、3...的需求。下面是两种简单可行的解决方案：

方法一：使用外部递增变量 #

在foreach循环外初始化一个计数器变量，每次循环时输出并自增：

@model Taller.Model.Entities.Remito
@{ 
    int rowCounter = 1; // 初始化计数器
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body style="height: 297mm; width: 210mm; margin-left: auto; margin-right: auto">

    <!-- Tabla -->
    <div class="table">
        <table style="width: 100%">
            <tr>
                <th style="text-align: left">N°</th>
                <th>Detalle</th>
                <th style="text-align: left">Cantidad</th>
                <th style="text-align: left">Alto</th>
                <th style="text-align: left">Ancho</th>
            </tr>
            <tbody>
                @foreach (var item in Model.RemitoDetalle)
                {
                    <tr>
                        <td>@rowCounter</td> <!-- 输出当前计数器 -->
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Descripcion)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Cantidad)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Alto)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Ancho)</td>
                    </tr>
                    rowCounter++; // 计数器自增
                }
            </tbody>
        </table>
    </div>
</body>
</html>

方法二：使用LINQ的Select带索引 #

利用Select方法同时获取集合元素和它的索引，索引从0开始，所以显示时加1即可：

@model Taller.Model.Entities.Remito
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body style="height: 297mm; width: 210mm; margin-left: auto; margin-right: auto">

    <!-- Tabla -->
    <div class="table">
        <table style="width: 100%">
            <tr>
                <th style="text-align: left">N°</th>
                <th>Detalle</th>
                <th style="text-align: left">Cantidad</th>
                <th style="text-align: left">Alto</th>
                <th style="text-align: left">Ancho</th>
            </tr>
            <tbody>
                @foreach (var (item, index) in Model.RemitoDetalle.Select((item, idx) => (item, idx)))
                {
                    <tr>
                        <td>@(index + 1)</td> <!-- 索引+1得到递增序号 -->
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Descripcion)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Cantidad)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Alto)</td>
                        <td>@Html.DisplayFor(modelItem => item.PresupuestoDetalle.Ancho)</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</body>
</html>

两种方法都能实现N°列逐行显示1、2、3...的效果，选你觉得更顺手的即可。

内容的提问来源于stack exchange，提问作者Kike gonzalez