Как отобразить данные списка по месяцам в представлении

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 - которая объединяет три ячейки подряд в одну ячейку.