如何在视图中显示基于月份的列表数据

Question

我有一个视图页面，用户可以在其中选择一年，并根据用户选择的年份显示每个月的记录列表。 像下面这样

但现在它显示如下

下面是我的代码

索引.cshtml

 <div >
            @{
                var year = DateTime.Now.Year;

                var years = DateTime.Now.Year - 5;
                for (var i = year; i > years; i--)
                {
                    var j = @i - 1;
                    <div class="col-md-1 ">
                        @Html.ActionLink(i.ToString(), "Index", new { i = i })
                    </div>
                }
            }
        </div>
    </div>
    @if (Model.Yearclick != 0)
    {
        <h2>@Model.Year</h2>
    }
    else
    {
        <h2>@year</h2>
    }
</div>
<div>
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Date</th>
            <th>Action</th>
        </tr>
            @foreach (var groupMonth in Model.Records.GroupBy(recordLists => new { recordLists.date.Value.Year, recordLists.date.Value.Month }))
            {
                <h3 class="Header"> @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(groupMonth.Key.Month)</h3>
                foreach (var Record in groupMonth)
                {
                    <tr>
                        @Html.Partial("_ListPage", Record)
                    </tr>
                }
            }
    </table>
</div>

部分视图：

@model MacData.Models.Record

@{
ViewBag.Title = "View Records";
}
<td>
    @Model.l_name
</td>
<td>
    @Model.l_date
</td>
<td>
    @Html.ActionLink("Update", "Update") |
    @Html.ActionLink("Delete", "Delete")
</td>

如何获取每个月的记录列表？

Answer 1

HTML 表格只能包含表格行、表格标题和少​​数其他内容， h3或其他类似元素不包括在内。 因此，当您将h3作为table的直接子级时，它会以一种奇怪的方式呈现。

每个月也应该是表格中的一行：

@foreach (var groupMonth in Model.Records.GroupBy(...))
{
    <tr>
        <td colspan="3">
            <div class="Header">
                Month name here
            </div>
        </td>
    </tr>


    foreach (var Record in groupMonth)
    ...
}

请注意带有 colspan 的单个表格单元格 - 它将一行中的三个单元格合并为一个单元格。