Display three columns per row in MVC cshtml

Question

What I have currently is the below which works fine but now it shows my records in a long list, what i want to do is show three(3) records per row. I tried putting a for loop over the tags but it doesnt work it just displays duplicate of each record three(3) time.

   @foreach (var ClientItem in Model.Clients)
                    {
                      <tr>
                        <td>
                            <div id="dataListItem" >
                                @Html.Hidden("ClientID", ClientItem.ClientID)
                                @Html.Label(ClientItem.ClientName)
                                <input type='checkbox' name="ClientItemCheckBox" id="ClientItemCheckBox" style="color: #428bca;" />
                            </div>
                        </td>
                     </tr>
                    }

please help I've ran out of ideas, I've also tried archive that was asked before

Answer 1

Using Bootstrap Responsive grids, it is not necessary to manually build a table and loop through the rows. Bootstrap will automatically wrap columns for you. Bootstrap works on a grid system using 12 columns, and if more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
    <div id="dataListItem" class="col-md-4">
        @Html.Hidden("ClientID", ClientItem.ClientID)
        @Html.Label(ClientItem.ClientName)
        <input type='checkbox' name="ClientItemCheckBox" 
                    id="ClientItemCheckBox" style="color: #428bca;" />
    </div>
</div>

here is a sample on Bootply

Answer 2

Use for block and print <tr> or </tr> based on the value of i. If it's the first index (i equals 0) or it's the fourth, seventh, ... (3n+1)th index (i % 3 equals 0), then print <tr> before <td>. If it's the last index (i equals Model.Clients.Count - 1) or it's the third, sixth, ... (3n)th index (i % 3 equals 2), then print </tr> after </td>. The below code should give what you want.

@for (int i = 0; i < Model.Clients.Count; i++)
{
    if (i == 0 || i % 3 == 0)
    {
        <tr>
    }
    <td>
        <div id="dataListItem" >
            @Html.Hidden("ClientID", Model.Clients[i].ClientID)
            @Html.Label(Model.Clients[i].ClientName)
            <input type='checkbox' name="ClientItemCheckBox" id="ClientItemCheckBox" style="color: #428bca;" />
        </div>
    </td>
    if (i % 3 == 2 || i == Model.Clients.Count - 1)
    {
        </tr>
    }
}