(MVC 3 Razor) - Easier way to loop through 3 column div

asp.net-mvc, asp.net-mvc-3, razor

Solution

Group traders in batch of 3 items, Try this:

@{

    var g = Model.Traders.GroupBy(r => Model.Traders.IndexOf(r) / 3).ToList();
}

@foreach (var parentItem in g)
{ 
    <div class="row">
        @foreach (var item in parentItem)
        { 
           <div class="four column"><div class="panel new"><h3 class="dotted"><strong>@item.Title</strong></h3><p>@item.Description</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div>


        }


    @for (int i = parentItem.Count(); i < 3; i++)
    { 
        <div class="four column"></div>
    }
    </div>
}

Regards.

Problem

At the moment I'm using the following code in my CSHTML: ``` @{int i = 0;} @foreach (var item in Model.Traders) { if ((i++ % 3) == 0) { if (i != 1) { @:</div> } @:<div class="row"> } @:<div class="four column"><div class="panel new"><h3 class="dotted"><strong>@item.Title</strong></h3><p>@item.Description</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div> } @if (i != 0) { @:</div> } ``` This outputs the following HTML: ``` <div class="row"> <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div> <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div> <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Title</strong></h3><p>Description</p><code>code</code></div></div> </div> <div class="row"> <div class="four column"><div class="panel new"><h3 class="dotted"><strong>Bobby</strong></h3><p>Bobby bobby bobby</p><code>&lt;div class=&quot;panel pick&quot;&gt;</code></div></div> <!-- Add missing divs if there's less than 3 (there always needs to be 3 divs inside a div row). In this case it's 2 that are missing --> <div class="four column"></div> <!-- my code does not render these --> <div class="four column"></div> <!-- my code does not render these --> </div> ``` My question is whether there's an easier way to achieve what I'm doing within my view and to ensure that it adds the missing divs if there's less than 3 in a row.

Original source