尝试使用 Razor Core6 使用模数条件编写 HTML

Question

我正在尝试获取一些代码来从项目列表中创建行。我以前做过，但由于某种原因，它没有正确添加结束标签。

    <code>
    @if (Model != null)
{
    var start = 0;
    foreach (var item in Model)
    {

        if (start == 0)
        {

            @:<div class="row"><div class="col-lg-4">
            start++;
        }
        else if (Model.Count == start)
        {
            @:</div>

        }
        else if (start % 3 == 1 && start > 1)
        {

            @:</div>
            start++;

        }
        else
        {
            var price = string.Format("{0:0.00}", item.MenuItemPrice);
                <div class="card">
                    <img class="card-img-top" src="~/SiteImages/MenuHome.png" style="width:128px" />
                    <div class="card-body">
                        <div class="card-title">
                            @item.MenuItemName
                            <hr />
                        </div>
                        <p class="card-text>">
                            @item.MenuItemDesc - @price
                        </p>
                        <button class="btn btn-primary" id="fpPlatter">View</button>
                    </div>
                </div>
                @:</div>
            start++;
            
        }

    }
}
</code>

它确实写入了该行，但它不会关闭 col-lg-4。它应该写一行，一个col-lg-4，然后根据模数添加3个项目并在最后关闭它们。添加列表时，我可能忽略了一些事情。任何意见表示赞赏。我可以添加屏幕截图。

Answer 1

您并未使用当前逻辑处理所有项目。例如，在第一次迭代中创建了开头 div，但未写入该项目。您在 else 中的 html 可能需要无条件地完成，其余的可选 html 需要处理与项目 html 相关的 foreach 循环的主体，以便它降落在正确的位置。

Answer 2

试试这个...

<code>
    @if (Model != null)
    {
        var currentCard = 0;
        foreach (var item in Model.Products)
        {
            currentCard++;
            if (currentCard % 3 == 1)
            {
                @:<div class="row">
            }
            <div class="col-lg-4">
                <div class="card">
                    @*
                    <div class="card-header">
                        <img class="card-img-top" src="~/SiteImages/MenuHome.png" style="width:128px" />
                    </div>
                    *@
                    <div class="card-body">
                        <div class="card-title">
                            @item.MenuItemName
                            <hr />
                        </div>
                        <p class="card-text>">
                            @item.MenuItemDesc - @string.Format("{0:0.00}", item.MenuItemPrice)
                        </p>
                        <button class="btn btn-primary" id="fpPlatter">View</button>
                    </div>
                </div>
            </div>
            if (currentCard % 3 == 0 || currentCard == Model.Products.Count)
            {
                @:</div>
            }
        }
    }
</code>

您需要将 Model.Products 更改为您需要的模型...这只是我在玩。

Answer 3

您的条件逻辑有问题。但是，与其更正它，不如放弃它并使用 Bootstrap 的网格系统为您布置行。

在 foreach 循环之外，打开一行 div
在你的循环中，输出一张卡片 包含在 div 中，尺寸使用网格系统

<div class="col-md-4"> <div class="card"> ... </div> </div>
退出循环后，关闭行 div

这是Bootstrap's own documentation中推荐的方法。它实施起来更简单，并且需要更少的工作 server-side 来生成您的 HTML.

尝试使用 Razor Core6 使用模数条件编写 HTML

Trying to write HTML using a Modulus conditional using Razor Core6

c#

razor