Razor Syntax for a C# language command

Question

I'm trying to display 4 products on each row in bootstrap grid.

This code is running as expected in a View except one line of code ( @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>
}

Can someone please guide?

Thanks.

Answer 1

Just simply make your iteration over blocks of 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>
    }
} 

** Note that if you want to put 4 elements in a Bootstrap row, you should use col-md-3 not 4!

Answer 2

use this code for display 4 products on each row in bootstrap grid

   @{
  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++;
}