Question

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

现在我可以在左侧和右侧分别显示内容。但我需要显示数据库中的记录。为此，我使用foreach循环。所以我需要显示的是左侧的第1条记录和右侧的第2条记录以及左侧的第3条记录，依此类推。我怎样才能像这样循环。

我被困在这里。我需要帮助..

我正在使用此代码，但所有内容都显示为我之前所说的。

   <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>

Answer 1

而不是

@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

Answer 2

使用此模式，您可以根据需要创建任意数量的列。如果您正在使用html表，则还需要测试当总集合大小不能被columns整除时是否需要空白单元格。

@{
    int columns = 3;
}

@for (int i = 0; i < Model.Count; i++)
{
    var currentModel = Model[i];

    int col = i % columns;

    if (col == 0)
    {
        // left
    }
    else if (col == 1)
    {
        // middle
    }
    else  // col == 2
    {
        // right
    }
}

如何在MVC Razor View中循环显示我的表格以显示内容？

2 个答案: