在x行的foreach内部拆分表

时间:2016-01-19 09:11:12

标签: javascript css asp.net-mvc razor

在我的表格中,我有9行,我在剃刀视图中使用foreach循环渲染。

<table>
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
  </tr>
  @{ foreach(var item in Model.SomeProperties){
  <tr>
    <td>@item.a</td>
    <td>@item.b</td>
    <td>@item.c</td>
  </tr>
  } }
</table>

如何在第五行拆分它以呈现为

a    f
b    g
c    h
d    x
e

而不是

a
b
c
..
x

2 个答案:

答案 0 :(得分:1)

如何对表格进行分组的最佳方法是使用linq GroupBy

<table>
   @{
     foreach(var itemGroup in Model.SomeProperties
               .Select((e, i) => new { Item = e, Grouping = (i / 2) })
               .GroupBy(e => e.Grouping))
     {
        <tr>
           @foreach (var item in itemGroup.Select(x => x.Item))
           {
             <td>@item.value</td>   
           }      
        </tr>
     }
   }
</table>

但是您的所有item都应该拥有相同的value属性来访问您的价值。

现在使用此技术,您可以轻松地使用Grouping = (i / 2)行进行操作,以定义行中的值。

答案 1 :(得分:0)

尝试这样的事情:

<table>
    @{
        var count = 0;
        foreach(var item in Model.SomeProperties){
            if(count%5 == 0)
            {
                @Html.Raw("<tr><td><table>")
            }
            <tr>
                <td>@item.a</td>
                <td>@item.b</td>
                <td>@item.c</td>            
            </tr>
            if(count%5 == 4)
            {
                @Html.Raw("</td></tr></table>")
            }
            count++;
        }
    }
</table>

每次达到5行时,它将在主表中生成一个新列。