Страница бритвы foreach для заполнения сетки - PullRequest
Новая
       14

Страница бритвы foreach для заполнения сетки

1 голос
/ 23 июня 2019

Мне нужно перебрать массив объектов, чтобы они отображались на странице три в строке, как показано ниже. 

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

Что было бы хорошим способом сделать это?

1 Ответ

1 голос
/ 24 июня 2019

сгруппируйте элементы по индексу и перечислите группы, чтобы получить нужную строку 

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