Grupowanie elementów w kontenery z daną ilością

0

Siemanko, mam taki problem - jest sobie lista która ma X elementów, iteruję po niej w widoku:

<div class="container">
  @foreach (var item in list)
  {
    <div class="item">@item.Name</div>
  }
</div>

Przykładowy result:

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
</div>

Teraz chciałbym, żeby w divie container były divy group, w których będą po 4 itemy, np:

<div class="container">
  <div class="group">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
  </div>
  <div class="group">
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
  </div>
</div>

Mam już warunki kiedy ma robić pierwszy, a kiedy drugi:

<div class="container">
  @foreach (var item in list)
  {
    if (warunek1)
    {
      <div class="group">
    }
    
    <div class="item">@item.Name</div>
    
    if (warunek2)
    {
      </div>
    }
  }
</div>

ale w tym przypadku wrzuca po 1 itemie do grupy więc pewnie z automatu ten div jest zamykany. Próbowałem z @: i MarkupString i traktuje to jako stringi, nie tworzy elementów.
Jest jakiś sposób na to?
Próbuję to ogarnąć w .Net 6 Blazor Server

0

A coasz w warunku 1 i dwa 2?

0

Nie pamiętam teraz na poczekaniu ale tam wstawiłem coś typu warunek1 = index === 0, warunek 2 index++ === 3 i potem zerowałem jak się zgadzał

1

W LINQ nie masz metody, która zwróci ci okno danych (w niektórych językach nazywa się taką metodę .Window() ) po której możesz się przejść. Możesz poszukać jakiegoś pakietu, który takie coś dostarcza (z szybkiego szukania wygląda jakby ten miał taką funkcję - morelinq), lub napisać sobie jakąś jej uproszczoną/bieda wersję.

Np tak, robię Select gdzie jako lambdę mam index oraz element i tworzę nowy obiekt, który będzie miał nowe pola jako index/4, oraz stary element a następnie grupuję po tak wyliczonym indeksie.

@foreach (var group in 
        Model.Select((i, elem) => new { Idx = i / 4, Elem = elem }).GroupBy(x => x.Idx, x => x.Elem))
    {
        <div class="container-inner">
            @foreach (var item in group)
            {
                <div class="item">
                    @item
                </div>
            }
        </div>
    }

Kwestia tak, że musisz mieć te elementy już odpowiednio poukładane w liście więc jak twoje warunki są jakieś mocniej skomplikowane może to być problemem. No i trochę niepotrzebny ten dodatkowy narzut związany z Select i GroupBy, ale jeśli nie masz tam nie wiadomo ilu elementów to nie powinno to być problemem.

1

@PawelLukasik

Ewentualnie po prostu list.Chunk(4) ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1