如何在ASP.NET MVC Core视图的EF Core数据表格中添加行号

嗨，我来帮你实现表格行号的需求，这里有两种简单可行的方法，你可以根据自己的场景选择：

方法一：在视图中直接维护行号计数器 #

这种方法最快捷，不需要修改控制器或模型，只在视图里加一个变量跟踪行号即可：

@model IEnumerable<Project.Provider>
@{
    // 初始化行号为1
    int rowIndex = 1;
}
<table>
    <thead>
        <tr>
            <th>行号</th>
            <th>ProviderId</th>
            <th>名称</th>
            <th>出生日期</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <!-- 显示当前行号 -->
                <td>@rowIndex</td>
                <td>@Html.DisplayFor(modelItem => item.ProviderId)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.DateOfBirth)</td>
            </tr>
            <!-- 行号自增 -->
            @{ rowIndex++; }
        }
    </tbody>
</table>

注意：我看到你原视图里重复了DateOfBirth列，建议去掉其中一个，避免显示重复内容。

方法二：通过ViewModel在控制器中添加行号 #

如果更倾向于遵循MVC的职责分离原则，可以创建一个ViewModel来封装行号和Provider属性，把行号逻辑放在控制器中处理：

1. 创建ViewModel #

新建一个ProviderViewModel类：

public class ProviderViewModel
{
    public int RowNumber { get; set; }
    public int ProviderId { get; set; }
    public string Name { get; set; }
    public int DateOfBirth { get; set; } // 这里和你的模型类型保持一致，不过建议改成DateTime类型更合理哦
}

2. 修改控制器代码 #

使用LINQ的Select方法结合索引，生成带行号的ViewModel列表：

public async Task<IActionResult> Index()
{
    var providers = await _context.Provider.ToListAsync();
    // 索引从0开始，所以加1得到从1开始的行号
    var providerViewModels = providers.Select((provider, index) => new ProviderViewModel
    {
        RowNumber = index + 1,
        ProviderId = provider.ProviderId,
        Name = provider.Name,
        DateOfBirth = provider.DateOfBirth
    }).ToList();
    
    return View(providerViewModels);
}

3. 修改视图代码 #

将视图模型改为IEnumerable<Project.ProviderViewModel>，直接显示行号：

@model IEnumerable<Project.ProviderViewModel>
<table>
    <thead>
        <tr>
            <th>行号</th>
            <th>ProviderId</th>
            <th>名称</th>
            <th>出生日期</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.RowNumber)</td>
                <td>@Html.DisplayFor(modelItem => item.ProviderId)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.DateOfBirth)</td>
            </tr>
        }
    </tbody>
</table>

两种方法都能实现你想要的效果：

1|100 | Foo | 10/10/1990|
2|101 | Bar | 10/10/1990|

内容的提问来源于stack exchange，提问作者Ali Imran