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

Question

我有一个视图页面，用户可以选择一年，根据用户选择的年份我想显示每个月的记录列表。像下面的东西

但是现在它显示如下

以下是我的代码

Index.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的表格单元格 - 将一行中的三个单元格合并为一个单元格。