c# - C# 语言命令的 Razor 语法

Question

我试图在 Bootstrap 网格中的每一行上显示 4 个产品。

除一行代码 (@i = i-1;) 外，此代码在 View 中按预期运行。

@for (int i = 0; i <= Model.Count() - 1; i++)
{
    <div class="row">
        @for (int j = 0; j < 4; j++)
        {
            if (i <= Model.Count() - 1)
            { 
            <div class="col-md-4">
                <h2>@Model[i].ItemName</h2>
                <br />
                <button style="border:none; padding:0;" OnClick="window.location.href='@Url.Action("Details", "Products", new { id = Model[i].ItemID })'"><img src="@Model[i].imageUrl",  width="100" height="75" /></button><br /><br />
                <p>
                    Price: @Model[i].ItemPrice
                    Availability:<span style="color:green; font-weight:bold;">Yes</span><br />
                </p>
                <p>
                    <button class="btn btn-default" OnClick="window.location.href='@Url.Action("Details", "Products", new { id = Model[i].ItemID })'">Learn more &raquo;</button>
                    <span style="margin-left:140px">@Html.ActionLink("Buy >>", "Index", "ShoppingCart", new { area = "" }, new { @class = "btn btn-primary btn-lg" })</span>
                </p>
            </div>

                i++;
            }
            else
            {
                return;
            }
        }
        @i = i-1;
    </div>
}

有人可以指导吗？

谢谢。

Answer 1

只需对 4 个 block 进行迭代即可:

@for (int i = 0; i < Model.Count() / 4; i++)
{
    if (i < (Model.Count() / 4) || (4 * i) < Model.Count())
    {
    <div class="row">
        @for (int j = 0; j < 4; j++)
        {

                <div class="col-md-3">
                    <h2>@Model[(i * 4) + j].ItemName</h2>
                    <br />
                    <button style="border:none; padding:0;" OnClick="window.location.href='@Url.Action("Details", "Products", new { id = Model[(i * 4) + j].ItemID })'"><img src="@Model[(i * 4) + j].imageUrl" , width="100" height="75" /></button><br /><br />
                    <p>
                        Price: @Model[(i * 4) + j].ItemPrice
                        Availability:<span style="color:green; font-weight:bold;">Yes</span><br />
                    </p>
                    <p>
                        <button class="btn btn-default" OnClick="window.location.href='@Url.Action("Details", "Products", new { id = Model[(i * 4) + j].ItemID })'">Learn more &raquo;</button>
                        <span style="margin-left:140px">@Html.ActionLink("Buy >>", "Index", "ShoppingCart", new { area = "" }, new { @class = "btn btn-primary btn-lg" })</span>
                    </p>
                </div>

        }

    </div>
    }
} 

** 请注意，如果您想在 Bootstrap 行中放置 4 个元素，您应该使用 col-md-3 而不是 4!