Question

I have a Razor view that has something like this in:

@foreach (var item in Model.Items)
{
    <div class="product">
        <a class="hide" href="#">
            <img src="#" alt="Hide" />
        </a><a href="#">
            <img src="#" width ="138" height="140" alt="product name" />
        </a>
        <h4 class="title">@Html.Raw(@item.Name)</h4>
        <span class="price">@item.Price.ToString("C")</span> 
    </div>
}

This is working well, and outputs the required html
However,
I need to wrap each “row” of with a
<div class="ClearFix"></div> – otherwise the layout gets messy after a few rows.

(In my case, a row is 5 product divs)

Is there any way of doing this?

Answer 1

@foreach (var row in Model.Items.Select((item, index) => new { index, item }))
{
    if (row.index % 5 == 0)
    {
        <div class="ClearFix"></div>
    }
    <div class="product">
        <a class="hide" href="#">
            <img src="#" alt="Hide" />
        </a>
        <a href="#">
            <img src="#" width ="138" height="140" alt="product name" />
        </a>
        <h4 class="title">@Html.Raw(@row.item.Name)</h4>
        <span class="price">@row.item.Price.ToString("C")</span> 
    </div>
}