html - 如何循环遍历我的表以在 MVC Razor View 中并排显示内容?

标签 html css asp.net-mvc razor asp.net-mvc-views

您好,我需要帮助将内容并排放置。

现在我可以在左侧和右侧分别显示内容。但我需要显示数据库中的记录。为此,我正在使用 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>&nbsp;</td>
   <td></td>
   <td>&nbsp;</td>
   </tr>
    <tr>
   <td>&nbsp;</td>
   <td> </td>
   <td>&nbsp;</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>&nbsp;</td>
  <td></td>
   <td>&nbsp;</td>
  </tr>
   <tr>
  <td>&nbsp;</td>
  <td> </td>
 <td>&nbsp;</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/

相关文章:

html - 嵌套的 div 和文本居中?

html - 手机无法点击链接

c# - 获取 ASP.NET MVC5 Identity 系统中的所有角色名称

c# - 如何在 MVC 中的另一个页面中显示 html 页面的一部分

javascript - 如何在单击按钮时更改 map 元素的高度?

javascript - 如何防止在头部从服务器加载我的真实图像时出现损坏的图像

c# - 在 DropDownListFor 上添加搜索功能

asp.net - 是否可以优化ASP.NET WebForms以使其执行速度与ASP.NET MVC一样快?

javascript - 中心元素,直到它遇到障碍

html - 新线路上的最后一个 td?