您好,我需要帮助将内容并排放置。
现在我可以在左侧和右侧分别显示内容。但我需要显示数据库中的记录。为此,我正在使用 foreach 循环。所以我需要显示的是左侧的第一条记录,右侧的第二条记录和左侧的第三条记录,依此类推。我怎样才能像这样循环。
我卡在这里了。我需要帮助..
我正在使用这段代码,但所有内容都如我之前所说的那样显示。
<body>
@foreach (var item in Model)
{
<!-- Main Table(You can define padding accordingly) -->
<table width="80%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="50%">
<!-- Table on left side -->
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<span class="Title">APP</span>
<br/>
<div class="listRowA" onmouseover="this.className='listRowAHover'" onmouseout="this.className='listRowA'">
<div class="listPageCol" onclick="location.href='../Home/ControlPanel'">
<span class="listlCol1">
<br />
@item.ID
</span>
<span class="listCol2"><img src="../Content/Images/20_thumb.jpg" width="281" height="200" border="0" alt="image" /></span>
</div>
</div>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- END -->
</td>
<td width="50%">
<!-- Table on right side -->
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td>
<div class="listRowA" onmouseover="this.className='listRowAHover'" onmouseout="this.className='listRowA'">
<span class="listCol2"><img src="../Content/Images/20_thumb.jpg" width="281" height="200" border="0" alt="image" /></span></div>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- END -->
</td>
</table>
<!-- END OF MAIN TABLE -->
}
</body>
最佳答案
代替
@foreach (var item in Model)
使用
@for (var i=0; i < Model.Count; i+=2)
{
}
并访问模型的属性,例如
@Model[i].ID
为了确定哪个应该向右哪个应该向左,您可以使用
@Model[i].ID for left
和
@if(i+1 < Model.Count)
{
Model[i+1].ID for right
}
只需确保 i+1
永远不会超过 Model.Count
关于html - 如何循环遍历我的表以在 MVC Razor View 中并排显示内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18748783/