asp.net - PartialView 中的水平表格 HTML

Question

我正在使用 Asp.Net Core MVC 开发 Web 应用程序项目，其中我有一个显示水平表的视图。我正在使用部分视图来实现这一点，但我一直坚持如何表示固定的五行，如下所示：

1. 天
2. 日期
3. 合适的
4. 不当
5. 无交互

每行将动态打印值。

这是我的视图，它按预期通过了所有内容。

<form method="get" asp-action="details">
    <table class="table order-list">
        <thead>

            @for (int i = 0; i < Model.SessionList.Count; i++)
            {
        <partial name="_ChartDetailsPartial" for="@Model.SessionList[i]"

                 />}

        </thead>
    </table>
    </form>

这是我的部分视图，我想在那里显示和安排所有内容。

@model TestApplication.Models.ViewModels.SessionViewModel

@{
    ViewData["Title"] = "_ChartDetailsPartial";
}

<input type="hidden" asp-for="Id" />

<tr>
    <th>Day</th>
    @for (int i = 0; i < 16; i++)
    {
        <td>@Html.DisplayFor(m => m.Day)</td>
    }
</tr>
<tr>
    <th width="200">Date</th>
    @for (int i = 0; i < 16; i++)
    {
        <td>@Html.DisplayFor(m => m.Date)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline limegreen">Appropriate Data</th>
    @for (int i = 0; i < 16; i++)
    {
<td>@Html.DisplayFor(m => m.Appropriate)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline red">InAppropriate Data</th>
    @for (int i = 0; i < 16; i++)
    {
        <td>@Html.DisplayFor(m => m.NotAppropriate)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline darkgray">No Interaction Data</th>
    @for (int i = 0; i < 16; i++)
    {
<td>@Html.DisplayFor(m => m.NoInteraction)</td>
    }
</tr>

我想要实现的类似于下图：

标签： asp.netasp.net-mvcasp.net-core.net-corepartial-views

Answer 1

这是一个工作演示，如下所示：

模型：

public class TestViewModel
{
    public List<SessionViewModel> SessionList { get; set; }
}
public class SessionViewModel
{
    public int Id { get; set; }
    public int Day { get; set; }
    public int Date { get; set; }
    public int Appropriate { get; set; }
    public int NotAppropriate { get; set; }
    public int NoInteraction { get; set; }
}

看法：

@model TestViewModel
<form method="get" asp-action="details">
    <table class="table order-list">
        <thead>
            <tr>
                <th>&nbsp;</th>
                @for (int i = 1; i <= Model.SessionList.Count(); i++)
                {
                    <th>@i</th>
                }
            </tr>
        </thead>
        <tbody>
            <partial name="_ChartDetailsPartial" for="@Model.SessionList" />
        </tbody>
    </table>
</form>

部分视图：

@model List<SessionViewModel>
<tr>
    <th>Day</th>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <input type="hidden" asp-for="@Model[i].Id" />
        <td>@Html.DisplayFor(m => m[i].Day)</td>
    }
</tr>
<tr>
    <th width="200">Date</th>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <td>@Html.DisplayFor(m => m[i].Date)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline limegreen">Appropriate Data</th>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <td>@Html.DisplayFor(m => m[i].Appropriate)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline red">InAppropriate Data</th>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <td>@Html.DisplayFor(m => m[i].NotAppropriate)</td>
    }
</tr>
<tr>
    <th style="text-decoration: underline darkgray">No Interaction Data</th>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <td>@Html.DisplayFor(m => m[i].NoInteraction)</td>
    }
</tr>

结果：