Fatal编程技术网
  • html/
  • Html 如何在MVC Razor视图中循环表以并排显示内容？

Html 如何在MVC Razor视图中循环表以并排显示内容？

html css asp.net-mvc razor

Html 如何在MVC Razor视图中循环表以并排显示内容？,html,css,asp.net-mvc,razor,asp.net-mvc-views,Html,Css,Asp.net Mvc,Razor,Asp.net Mvc Views,嗨，我想在把内容并排帮助 现在我可以在左侧和右侧分别显示内容。但我需要显示数据库中的记录。为此，我使用foreach循环。所以我需要在左侧显示第一条记录，在右侧显示第二条记录，在左侧显示第三条记录，依此类推。我怎么能这样循环呢 我在这里受困了，我需要帮助 我正在使用这段代码，但是所有的内容都显示出来了 <body> @foreach (var item in Model) { <!-- Main Table(You can define pad

嗨，我想在把内容并排帮助

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

@foreach (var item in Model)
使用

为了确定哪个应该向右，哪个应该向左，您可以使用

@Model[i].ID for left
及

@if（i+1
只需确保
i+1
永远不会超过
模型。使用此模式，您可以创建任意数量的列。如果您使用的是html表，那么还需要测试当集合总大小不能被
列整除时是否需要空白单元格


@{
    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列=3；
}
@for（int i=0；i
使用
而不是
foreach
循环使用
for
带索引的循环，并对索引进行模（%2）计算以确定奇数或偶数（左或右）.Hi您能检查我对comet答案的评论吗？我发现运算符“/”不能应用于“System.Collections.Generic.List”和“int error”类型的操作数。嗨，当我尝试使用for循环时，我无法键入model.count的count。它在intellisense中不显示。如果我键入i
Count
在
IEnumerable
上不可用，您应该使用视图顶部的
@using System.Linq
来启用我现在得到的信息无法隐式转换为bool error。我也不能使用复杂类型，即@model Market.Models.History。所以我删除了这个并添加了linq。嗨，comet现在可以工作了。你救了我一天。但我有一个小错误。在第一行，我在左边得到第一条记录，在右边得到第二条记录。但在第二行，它是从第二条记录编号开始的，而不是从第三条记录开始的。我的意思是第一排-12和第二排-23。但我想在第二排3 4。我知道我在for循环中犯了一些错误。你能帮我吗？是的，我明白你的意思。请看我的最新答案。我改变了循环。现在，您的
i
将从0,2,4,6开始，通过执行
i+1
您将得到左0、右1、左2、右3等等。您好，谢谢您的回复。当我使用comet的解决方案时，我知道我的表中应该有偶数条记录，否则我将得到索引超出范围的异常。所以我会试试你的，看看这是否也适用于奇数。嗨，当我尝试实现你的解决方案时，我不知道我犯了什么错误，但我无法在我的视图中声明你的第一行的int，我得到的列在当前上下文错误中不存在。@Raj你需要将其包装在
@{int columns=3；}
在我的例子中，我没有声明列，我只给出int col=I%2；其中我有4列，1和3，2和4重复。

@Model[i].ID for left 



@if(i+1 < Model.Count)
{
  Model[i+1].ID for right
}



@{
    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
    }
}