剃刀页面foreach填充网格

Question

我需要遍历对象数组，以便它们在每行三页的页面上显示，如下所示。

   <div class="row">

       <div class="col">
           item
        </div>

        <div class="col">
           item2
        </div>

        <div class="col">
            item3
        </div>
    </div>
    <div class="row">

           <div class="col">
               item4
            </div>

            <div class="col">
               item5
            </div>
            <div class="col">

            </div>

     </div>

通常我会如下所示进行一个foreach循环，但是我需要将每三个条目分隔成一行。

@foreach (var item in Model.ItemList)
{
       <div class="col">
            item.Info
        </div>
}

什么是这样做的好方法？

Answer 1

按索引对项目进行分组，并枚举分组以获得所需的行

@foreach (var row in Model.ItemList
    .Select((item,index) => new { item, index })
    .GroupBy(_ => _.index / 3, _ => _.item)
) {
    <div class="row">
    @foreach(var item in row) {
      <div class="col">
        item.Info
      </div>
    }
    <!-- empty columns -->
    @for(var i = 0; i < row.Count() % 3; i++) {
      <div class="col">
        &nbsp;
      </div>
    }
    </div>
}