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

时间:2019-02-18 15:49:19

标签: c# asp.net-mvc razor

我有一个查看页面,用户可以在其中选择年份,并且根据用户选择的年份,我希望显示每个月的记录列表。像下面这样 enter image description here

但是现在它显示如下

enter image description here

下面是我的代码

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>

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

1 个答案:

答案 0 :(得分:0)

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