How to create rows dynamically with razor

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?

Shyju · Accepted Answer · 2018-02-04 17:34:12Z

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>

answered Feb 4, 2018 at 17:34

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Björk Over a year ago

Thanks, that seems to do it! :)

Collectives™ on Stack Overflow

How to create rows dynamically with razor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related