html - 如何使用 Razor 动态创建行

Question

我正在尝试使用 razor 动态创建行，但我不知道如何解决这个问题。我想要的是为模型中的每个 5:e 对象创建一个新行/div <div class="row pics_in_a_row">这样每行包含五个或更少的图像。

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

奖励问题:如何获取图像的高度和宽度并将其添加到 calc() css？

Answer 1

您应该在循环中添加类为 row pics_in_a_row 的 div

这应该为每 5 个元素创建一行(或者当剩余元素少于 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>