如何遍历我的表格以在 MVC Razor 视图中并排显示内容？答案

【问题标题】：How can I loop through my table to display contents side by side in MVC Razor View?如何遍历我的表格以在 MVC Razor 视图中并排显示内容？
【发布时间】：2013-09-11 18:37:13
【问题描述】：

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

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

【问题讨论】：

使用带有索引的for 循环代替foreach 循环并对索引进行模(%2) 计算以确定奇数或偶数（左或右）。
嗨，你能检查我对彗星答案的评论吗？我得到运算符'/'不能应用于'System.Collections.Generic.List'和'类型的操作数int 错误..

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

【解决方案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

【讨论】：

嗨，当我尝试使用 for 循环时，我无法输入 model.count 的计数。它没有在智能感知中显示。如果我输入 i' 和 'int .. 我在做什么错误?
Count 在 IEnumerable 上不可用，您应该在视图顶部使用 @using System.Linq 来启用它
嗨，现在我无法隐式转换为布尔错误。我也无法使用复杂类型，即@model Market.Models.History。所以我删除了这个并使用 linq 添加。
嗨，彗星现在开始工作了。你拯救了我的一天。但我有一个小错误。在第一行中，我在左侧获得第一条记录，在右侧获得第二条记录。但在第二行中，它从第二条记录号而不是第三条记录开始。我的意思是第一行 - 1 2 和第二行 - 2 3。但我想在第二行 3 4。我知道我在 for 循环中犯了一些错误。你能帮我吗？
是的，我明白你的意思。请参阅我更新的答案。我已经改变了循环。现在，您的 i 将从 0、2、4、6 开始，通过执行 i+1，您将在左侧获得 0，在右侧获得 1，在左侧获得 2，在右侧获得 3，依此类推。

【解决方案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
    }
}

【讨论】：

您好，感谢您的回复。当我使用彗星的解决方案时，我知道我的表中应该有偶数条记录，否则我会得到索引超出范围异常。所以我会试试你的，看看这是否也适用于奇数。
嗨，当我尝试实施您的解决方案时，我不知道我在做什么错误，但我无法在我的视图中声明您的第一行的 int 并且我得到的列不存在于当前上下文错误中.
@Raj 你需要把它包装在@{ int columns = 3; }
在我的情况下，我没有声明列，我只是给了 int col = i % 2;我有 4 列，1 和 3，2 和 4 重复。