局部视图中的水平 table HTML
Horizontal table HTML in PartialView
我正在使用 Asp.Net 核心 MVC 开发 Web 应用程序项目,其中我有一个显示水平 table 的视图。我正在使用部分视图来实现这一点,但我仍然坚持如何表示固定的五行,如下所示:
- 天
- 日期
- 合适
- 不合适
- 无互动
每行将动态打印值。
这是我的视图,它按预期传递了所有内容。
<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>
我想要达到的效果类似于下图:
你可以这样做,
<form method="get" asp-action="details">
<table class="table order-list">
<thead>
<tr>
<th> </th>
@for (int i = 1; i < 16; i++)
{
<th>@i</th>
}
</tr>
</thead>
<tbody>
<partial name="_ChartDetailsPartial" for="@Model.SessionList"/>
</tbody>
</table>
</form>
局部视图
@model List<TestApplication.Models.ViewModels.SessionViewModel>
@{
ViewData["Title"] = "_ChartDetailsPartial";
}
@for (int i = 0; i < Model; i++)
{
var session = Model[i];
<tr>
<td>Day</td>
@for (int i = 1; i < 16; i++)
{
<td>
<input type="hidden" asp-for="Id" />
@Html.DisplayFor(m => m.Day)
</td>
}
</tr>
<tr>
<td width="200">Date</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.Date)</td>
}
</tr>
<tr>
<td style="text-decoration: underline limegreen">Appropriate Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.Appropriate)</td>
}
</tr>
<tr>
<td style="text-decoration: underline red">InAppropriate Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.NotAppropriate)</td>
}
</tr>
<tr>
<td style="text-decoration: underline darkgray">No Interaction Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.NoInteraction)</td>
}
</tr>
}
这是一个像下面这样的工作演示:
型号:
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> </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>
结果:
我正在使用 Asp.Net 核心 MVC 开发 Web 应用程序项目,其中我有一个显示水平 table 的视图。我正在使用部分视图来实现这一点,但我仍然坚持如何表示固定的五行,如下所示:
- 天
- 日期
- 合适
- 不合适
- 无互动
每行将动态打印值。
这是我的视图,它按预期传递了所有内容。
<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>
我想要达到的效果类似于下图:
你可以这样做,
<form method="get" asp-action="details">
<table class="table order-list">
<thead>
<tr>
<th> </th>
@for (int i = 1; i < 16; i++)
{
<th>@i</th>
}
</tr>
</thead>
<tbody>
<partial name="_ChartDetailsPartial" for="@Model.SessionList"/>
</tbody>
</table>
</form>
局部视图
@model List<TestApplication.Models.ViewModels.SessionViewModel>
@{
ViewData["Title"] = "_ChartDetailsPartial";
}
@for (int i = 0; i < Model; i++)
{
var session = Model[i];
<tr>
<td>Day</td>
@for (int i = 1; i < 16; i++)
{
<td>
<input type="hidden" asp-for="Id" />
@Html.DisplayFor(m => m.Day)
</td>
}
</tr>
<tr>
<td width="200">Date</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.Date)</td>
}
</tr>
<tr>
<td style="text-decoration: underline limegreen">Appropriate Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.Appropriate)</td>
}
</tr>
<tr>
<td style="text-decoration: underline red">InAppropriate Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.NotAppropriate)</td>
}
</tr>
<tr>
<td style="text-decoration: underline darkgray">No Interaction Data</td>
@for (int i = 1; i < 16; i++)
{
<td>@Html.DisplayFor(m => m.NoInteraction)</td>
}
</tr>
}
这是一个像下面这样的工作演示:
型号:
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> </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>
结果: