Asp.net Mvc How To Populate A Collection To A 4 Column Table?

I have a collection which I passed from my MVC controller to my view. In my view, I want to list the image and its description in a 4 column table. I did not use a grid. So, If I

Solution 1:

I gess the most elegant way to do it is use linq to group all your products by 4 and then generate your table:

1 row for each group and 1 column for each product:

<tableclass="table-responsive"><tbody>
        @foreach (var productGroup in Model.Select((e, i) => new { Product = e, Grouping = (i / 4) }).GroupBy(e => e.Grouping))
        {
            <tr>
                @foreach (var product in productGroup.Select(x => x.Product))
                {
                    <td><imgsrc=@product.Thumbnailstyle="width: 100px; height: 100px" /><divclass="col-md-6 col-xs-6 small">
                            @product.Title<br>
                            @product.Description<br>
                            @product.Audience<br>
                            @product.Company<br><label>Published : </label> @product.PubDate<br><label>Download : JPEG | PDF</label></div></td>
                }
            </tr>
        }
    </tbody></table>

Note Grouping = (i / 4) line. That's where you can change how many products you will have in a row.