Question

我正在尝试在引导网格的每一行上显示4种产品。

除了一行代码（View）之外，此代码正在@i = i-1;中按预期运行。

@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个块上进行迭代即可：

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

Answer 2

使用此代码在引导网格的每一行上显示4种产品

   @{
  int index = 0;
 }
 @foreach (var item in @Model)
 {
   if (index % 4 == 0)
   {
      @:  <div class="row">
   }

   <div class="col-md-3">

     <h2>@item.ItemName</h2>
            <br />
            <button style="border:none; padding:0;" OnClick="window.location.href='@Url.Action("Details", "Products", new { id = item.ItemID })'"><img src="@item.imageUrl",  width="100" height="75" /></button><br /><br />
            <p>
                Price: @item.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 = item.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>

   if (index % 4 == 0)
   {
      @:     </div>
   }        

   index++;
}

C＃语言命令的Razor语法

2 个答案: