Uitlijnen boostrap cards

[tj.jackel]

Beste Tweakers,

Voor het weergegeven van informatie maken we gebruik van cards uit bootstrap. Deze cards worden nu gesized op basis van de informatie in de card. Omdat dit er wat slordig uitziet zou ik graag gebruik maken van de div class="card-deck". Dit zorgt ervoo dat alle kaarten op 1 rij hetzelfde formaat hebben.
https://getbootstrap.com/docs/4.0/components/card/

Omdat het aantal cards variabel is wordt gebruik gemaakt van een foreach loop.

Ik dacht deze for each loop te vervangen voor een for(var i=0; i<Models.Count(); i++) loop.
Hierachter wil ik dan de volgende code plaatsen:

if(i%3 == 0)
{
<div class="card-deck">
}
if(i%3 == 0)
{
</div>
}

De totale structuur wordt dan:

for(var i=0; i<Models.Count(); i++){

if(i%3 == 0)
{
<div class="card-deck">
}

//CARD CODE

if(i%3 == 0)
{
</div>
}
}

De code werkt totdat ik de <div class="card-deck"> in de if statement plaats. Dan geeft de Visualstudio 2022 editor een foutmelding dat het aantal } niet klopt.

Het doel is dat de kaarten per drie uitgelijnd naast elkaar geplaatst worden.

Hoe kan ik dit werkend krijgen? Of ben ik op het verkeerde spoor met de card-deck klasse

[ Voor 4% gewijzigd door tj.jackel op 12-07-2022 20:12 ]

[alwinuzz]

tj.jackel schreef op dinsdag 12 juli 2022 @ 20:11:


De code werkt totdat ik de <div class="card-deck"> in de if statement plaats. Dan geeft de Visualstudio 2022 editor een foutmelding dat het aantal } niet klopt.

Dit heeft op zich niets met de specifieke bootstrap classes te maken. Maar meer met hoe je de code en html tags 'mengt'.

Wat is de precieze tekst van de foutmelding? Als je daarop googlet wat vind je dan ? Evt googlen op tekst foutmelding + bestands extensie.

Ik heb wel een idee maar probeer het je zelf te laten ontdekken

Ps goede duidelijke voorbeeld code! Tip plaats deze in code tags

[ Voor 9% gewijzigd door alwinuzz op 12-07-2022 23:14 ]

[Anoniem: 80910]

Geen idee welke taal je gebruikt, maar zoek eens op echo of print in de handleiding

[tj.jackel]

Bedankt voor de reacties. Hierbij de code uit de view:

C#:

@for (var i=0; i<Model.Count(); i++)
    {
            var item = Model.ElementAt(i);
            @if(i%3 == 0)
            {
                <div class="card-deck">
            }

                <div class="card">
                <div class="card-body">
HIER ZIT MEER HTML CODE EN INFORMATIE UIT DE var ITEM.
                </div>
                </div>

 @if(i%3 == 0)
            {
                </div>
            }
    }

Voor het overzicht heb ik de card body even weggelaten.

Als ik de <div class="card-deck"> code met de bijbehorende </div> weglaat gaan de foutcodes weg.
De foutmelding die ik krijg is:
Severity Code Description Project File Line Suppression State
Error (active) RZ1006 The for block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.

[alwinuzz]

@tj.jackel

Als je daarop googlet wat vind je dan ? Evt googlen op tekst foutmelding + bestands extensie.

Als ik Google op "The for block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup."
Krijg ik een stack overflow post "why does razor not like this" met daarin goede uitleg en oplossingen. In zowel de answers én in de comments onder de vraag. Daarmee gaat het vast lukken

Zo niet geef dan aub aan: wat heb je gevonden op internet? Wat heb je vervolgens zelf geprobeerd (op die stack overflow staan meerdere oplossingen), incl nieuwe code, en wat gebeurde er dan, bijv welke andere foutmelding.

[eheijnen]

En nog een opdracht:
Wat gebeurt er als Model.Count() = 13 ?

[DJMaze]

eheijnen schreef op donderdag 14 juli 2022 @ 12:20:
En nog een opdracht:
Wat gebeurt er als Model.Count() = 13 ?

Dan is de HTML stuk, maar dat lost de browser op en dan merkt/ziet hij de fout niet

[eheijnen]

Je werkt met blokken van 3 ( i % 3 == 0 )
Uit hoeveel elementen bestaat het eerste blok ?

Verderop in de code herhaal je dezelfde modulo berekening weer.
Als dat een enkele keer is zal het weinig uit maken. Maar kan beter...
https://nl.wikipedia.org/wiki/Memoization

Voor de blokken kun je ook werken met een Teller die je ....... en weer .... als de gewenste grootte is bereikt.

[xFeverr]

tj.jackel schreef op woensdag 13 juli 2022 @ 21:19:

C#:

@for (var i=0; i<Model.Count(); i++)
    {
            var item = Model.ElementAt(i);
            @if(i%3 == 0)
            {
                <div class="card-deck">
            }

                <div class="card">
                <div class="card-body">
HIER ZIT MEER HTML CODE EN INFORMATIE UIT DE var ITEM.
                </div>
                </div>

 @if(i%3 == 0)
            {
                </div>
            }
    }

Razor vind het niet zo leuk dat je een div op lijn 6 opent maar niet afsluit in dezelfde scope (van je if statement). Is dat hetgeen waar je hier tegenaan loopt?

[Woy]

Ik vermoed inderdaad razor syntax die het niet leuk vind dat de afsluitende tag mist. Kijk eens naar de <text> tag

[Kenhas]

Veel kans dat ik me beetje belachelijk met mijn code maar de experts kunnen mij dan wel in de juist richting sturen

code:

<div class="row">
@foreach(var item in Model)
  {
    <div class="col-4">
      <div class="card">
        <div class="card-body">
               <p>@item.informatie</p>
        </div>
      </div>
    </div>
  }
</div>

[xFeverr]

Ik denk dat de beste oplossing is om het model wat je naar je view stuurt aan te passen. Doe dat verdelen tussen de verschillende 'card-deck' items lekker al voordat je naar je view gaat. Dan heb je in je view gewoon een kant en klaar model om mee te werken.

Zoiets dus: (uit de losse pols)

code:

@foreach (var cardDeck in Model.CardDecks) 
{
    <div class="card-deck">

        @foreach (var card in cardDeck.Cards) 
        {
            <div class="card">
                <div class="card-body">
                    HIER ZIT MEER HTML CODE EN INFORMATIE UIT DE var card.
                </div>
            </div>
        }

    </div>
}

Dit moet wel voldoende informatie zijn om een idee te geven naar een potentiele oplossing.