正在嘗試自己練習MVC的View,目前遇到以下困難,目前我的Option希望這個陣列在用for迴圈長表格時,不知道該怎麼去實作(第一個tbody),
是否只能設計成部分檢視呢?
@{
var rows = new[]{
new{
Title="Title1:",
Description="Description1",
Option=new[]{
new {Item="Yes",Check="Y"},
new {Item="No",Check="N"}
}
},
new
{
Title = "Title2",
Description = "Description2",
Option = new[]{
new {Item="Item1",Check ="NA"},
new {Item="Item2",Check="NA"}
}
}
};
}
<div>
<table style='border:1px black solid;' border='1'>
<thead>
<tr height='20px'>
<td colspan='2'></td>
</tr>
</thead>
<!--第一個tbody是嘗試將資料跟外觀拆開,所以上面定一個資料,這邊則用for迴圈去長表格-->
<tbody>
@for (var i = 0; i < rows.Length; i++)
{
var row = rows[i];
<tr>
<td colspan='2' class='report-content' style='font-weight:bold;'>
@(row.Title)
</td>
</tr>
<tr>
<td>
@(row.Description)
</td>
<!--如何在此加入row.Option.Item呢?-->
<td style='font-weight:bold;'>
</td>
</tr>
}
</tbody>
<!--第二個tbody是將資料跟外觀全部寫再一起-->
<tbody>
<tr>
<td colspan='2' style='font-weight:bold;'>
Title1
</td>
</tr>
<tr>
<td>
Description1
</td>
<td style='font-weight:bold;'>
<input type='checkbox' checked='checked' disabled='disabled'>Yes<br />
<input type='checkbox' disabled='disabled'>No
</td>
</tr>
<tr>
<td colspan='2' style='font-weight:bold;'>
Title2
</td>
</tr>
<tr>
<td style='font-weight:bold;'>
Description2
</td>
<td>
Item1<br />
Item2
</td>
</tr>
</tbody>
<tfoot>
<tr height='0'>
<td width='50%' style='border:none'></td>
<td width='50%' style='border:none'></td>
</tr>
</tfoot>
</table>
</div>
預期表格長相
@{
var rows = new[]{
new{
Title="Title1:",
Description="Description1",
Option=new[]{
new {Item="Yes",Check="Y"},
new {Item="No",Check="N"}
}
},
new
{
Title = "Title2",
Description = "Description2",
Option = new[]{
new {Item="Item1",Check ="NA"},
new {Item="Item2",Check="NA"}
}
}
};
}
<div>
<table style='border:1px black solid;' border='1'>
<thead>
<tr height='20px'>
<td colspan='2'></td>
</tr>
</thead>
<!--第一個tbody是嘗試將資料跟外觀拆開,所以上面定一個資料,這邊則用for迴圈去長表格-->
<tbody>
@for (var i = 0; i < rows.Length; i++)
{
var row = rows[i];
<tr>
<td colspan='2' class='report-content' style='font-weight:bold;'>
@(row.Title)
</td>
</tr>
<tr>
<td>
@(row.Description)
</td>
<!--如何在此加入row.Option.Item呢?-->
<td style='font-weight:bold;'>
@foreach (var data in row.Option)
{
if (data.Check == "Y" || data.Check == "N")
{
<input type='checkbox' @Html.Raw(data.Check == "Y" ? "checked='checked'" : "") disabled='disabled'>@Html.Raw(data.Check == "Y" ? "Yes" : "No")<br />
}
else if (data.Check == "NA")
{
@Html.Raw($"{data.Item}<br>");
}
}
</td>
</tr>
}
</tbody>
<!--第二個tbody是將資料跟外觀全部寫再一起-->
<tbody>
<tr>
<td colspan='2' style='font-weight:bold;'>
Title1
</td>
</tr>
<tr>
<td>
Description1
</td>
<td style='font-weight:bold;'>
<input type='checkbox' checked='checked' disabled='disabled'>Yes<br />
<input type='checkbox' disabled='disabled'>No
</td>
</tr>
<tr>
<td colspan='2' style='font-weight:bold;'>
Title2
</td>
</tr>
<tr>
<td style='font-weight:bold;'>
Description2
</td>
<td>
Item1<br />
Item2
</td>
</tr>
</tbody>
<tfoot>
<tr height='0'>
<td width='50%' style='border:none'></td>
<td width='50%' style='border:none'></td>
</tr>
</tfoot>
</table>
</div>
結果