如何在ASP.NET MVC中用C#按日期父节点分组表格行？

核心思路 #

先把数据按DateTime日期字段（取日期部分，忽略时间）分组，再遍历每个分组：先渲染该日期对应的父行，接着遍历分组内的所有数据渲染子行，实现同日期的子行统一归属到一个父行下方。

具体实现代码 #

步骤1：对数据进行分组 #

在视图内通过LINQ的GroupBy方法完成分组：

@{
    // 按日期分组，确保只取日期部分，避免时间干扰分组结果
    var groupedBookings = Model.ListBookingdtl.GroupBy(b => b.DateTime.Date);
}

步骤2：遍历分组渲染表格 #

替换原有的单层foreach循环，改为嵌套遍历分组：

@foreach (var dateGroup in groupedBookings)
{
    <!-- 渲染当前日期的父行 -->
    <tr class="parentRow">
        <td>
            <a href="javascript:void(0);" class="icon add clsParentAddBtn"><img src="../images/add.svg"></a>
            <a href="javascript:void(0);" class="icon clsParentDeleteBtn"><img src="../images/delete.svg"></a>
        </td>
        <td>
            <div class="form-group">
                <div class="input-group date" id="bs_datepicker_component_container_@dateGroup.Key.ToString("yyyyMMdd")">
                    <div class="form-line">
                        @Html.TextBox("BookingDate", dateGroup.Key.ToString("yyyy-MM-dd"), new { @class = "form-control", @type = "date" })
                        @Html.ValidationMessageFor(model => model.Bookingdate, null, new { @class = "error" })
                    </div>
                </div>
            </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <!-- 遍历当前日期下的所有数据，渲染子行 -->
    @foreach (var CustbookingDet in dateGroup)
    {
        <tr class="childRow">
            <td></td>
            <td></td>
            <td>
                <a href="javascript:void(0);" class="icon add clsChildAddBtn"><img src="../images/add.svg"></a>
                <a href="javascript:void(0);" class="icon clsChildDeleteBtn"><img src="../images/delete.svg"></a>
            </td>
            <td>
                <div class="form-group">
                    <div class="icons">
                        @Html.DropDownListFor(m => CustbookingDet.FunctionIDs, new SelectList(Model.DropdownFunctions, "Value", "Text", CustbookingDet.FunctionIDs), "-- Select function --", new { @class = "form-control show-tick" })
                        @Html.ValidationMessageFor(model => model.FunctionIDs, null, new { @class = "error" })
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <div class="icons">
                        @Html.DropDownListFor(m => CustbookingDet.ServiceId, new SelectList(Model.DropdownServices, "Value", "Text", CustbookingDet.ServiceId), "-- Select Services --", new { @class = "form-control show-tick" })
                        @Html.ValidationMessageFor(model => model.ServiceIds, null, new { @class = "error" })
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <div class="icons">
                        @Html.DropDownListFor(m => CustbookingDet.VendorId, new SelectList(Model.DropdownAssign, "Value", "Text", CustbookingDet.VendorId), "-- Select AssignTo --", new { @class = "form-control show-tick" })
                        @Html.ValidationMessageFor(model => model.Assignperson, null, new { @class = "error" })
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <div class="form-line">
                        @Html.TextBoxFor(m => CustbookingDet.Rate, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Rate, null, new { @class = "error" })
                    </div>
                </div>
            </td>
        </tr>
    }
}

关键细节说明 #

• 移除了原代码中重复的固定ID（如tr_1、date），改用日期字符串生成唯一ID，避免DOM元素ID冲突导致的JS或样式问题
• 分组时使用DateTime.Date确保只按日期维度分组，不会因时间差异拆分同日期的数据
• 父行的日期输入框绑定分组的日期键，保证同一日期分组的父行日期统一

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