How to create rows dynamically with razor - html

Question

I'm trying to create rows dynamically with razor but I can't figure out how to wrap this around. What I want is for every 5:e object in my model I want to create a new row/div <div class="row pics_in_a_row"> so that each row contains five or less images.
<section class="slice">
<div class="wp-section">
<div class="container">
<div class="row pics_in_a_row">
#{
int i = 0;
foreach (dbphoto.Models.Image s in Model.images.OrderByDescending(x => x.idimage))
{
if (i % 5 == 0 && i != 0)
{
<br />
}
i++;
if (1 == 1)
{
<div class="flxbox" style="flex: calc(1024/713)">
<a href="#s.HighResolution" data-fancybox="gallery" data-caption="xyz, Stockholm">
<img src="#s.LowResolution" class="img-fluid rounded flximg" />
</a>
</div>
}
}
}
</div>
</div>
</div>
</section>
Bonus question: how can I get the height and width of the image and add it to the calc() css?

Answer 1

You should add the div with class row pics_in_a_row inside your loop
This should create a a row for every 5 items (or less for the last row when the remaining items are less than 5).
<div class="container">
#{
var numberOfColsNeeded = 5;
var totalCounter = Model.images.Count();
var itemCounter = 1;
}
#foreach (var item in Model.images)
{
if (itemCounter % numberOfColsNeeded == 1)
{
#:<div class="row pics_in_a_row">
}
<div class="flxbox" style="flex: calc(1024 / 713)">
<img src="#item.LowResolution" class="img-fluid rounded flximg" />
</div>
if ((itemCounter % numberOfColsNeeded == 0) || ((itemCounter) == totalCounter))
{
#:</div>
}
itemCounter++;
}
</div>