Index.cshtml表格按group分组排序并集中展示同组name的实现问题

实现步骤 #

1. 视图顶部新增数据分组逻辑 #

在你原有视图的@{ ViewData["Title"] = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; }代码块下方，新增数据分组处理代码，先对数据按group字段排序、同组内按name字段排序，再按group字段完成分组：

@{
    var groupedVolumes = Model
        .OrderBy(v => v.group)
        .ThenBy(v => v.name)
        .GroupBy(v => v.group)
        .ToList();
}

2. 替换原有tbody遍历逻辑 #

把原有代码中<tbody>标签内的遍历逻辑替换为如下代码，实现group单元格合并、同组行样式控制效果：

<tbody>
    @foreach (var group in groupedVolumes)
    {
        var groupItems = group.ToList();
        for (int i = 0; i < groupItems.Count; i++)
        {
            var item = groupItems[i];
            // 同组非最后一行添加取消下边框的样式类
            var rowClass = i < groupItems.Count - 1 ? "no-border-bottom" : "";
            <tr class="@rowClass">
                @if (i == 0)
                {
                    <!-- 分组第一条数据渲染group单元格，行跨度等于当前分组总条目数 -->
                    <td rowspan="@groupItems.Count">
                        @Html.DisplayFor(_ => group.Key)
                    </td>
                }
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.id">Delete</a>
                </td>
            </tr>
        }
    }
</tbody>

3. 添加边框控制样式 #

在视图任意位置添加如下CSS代码即可实现同组无分隔线、不同组之间显示分隔线的效果，也可以将该样式放到站点公共样式文件中全局生效：

<style>
    .table tr.no-border-bottom td {
        border-bottom: none !important;
    }
</style>

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