CODEWITHSUNDEEP
asp.net-mvc-3razor
Alex
Alex

Reputation: 38519

MVC Razor View - Wrapping rows constructed with a foreach loop every n items

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?

Upvotes: 0

Views: 2158

Answers (3)

George
George

Reputation: 4413

If you truly need to wrap the contents in the clear fix div ... 

@{
   var grouping = new List<Item>();
   var itemsPerRow = 5;
   for (var i = 0; i < Model.Items.Count; i++)
   {
     var item = Model.Items[i];
     grouping.Add(item);
     if (i>0 && i%itemsPerRow == itemsPerRow-1)
     {
       <div class="clear-fix">
           @foreach (var thing in grouping)
           {
              Html.RenderPartial("_ItemPartial", thing);
            }
       </div>
       grouping.Clear();
     }         
    }
}

and then in _ItemPartial.cshtml:

@model Item
<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(@Model.Name)</h4>
    <span class="price">@Model.Price.ToString("C")</span> 
</div>

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

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

Upvotes: 1

Jeff
Jeff

Reputation: 36573

Shouldn't a simple int i and i % 5 == 0 and i > 5 do the trick?

Upvotes: 0

Related Questions