在MVC cshtml中每行显示三列

Question

我目前所拥有的是下面的工作正常,但现在它在一个长列表中显示我的记录,我想要做的是每行显示三(3)条记录.我尝试在标签上放置一个for循环但它不起作用它只显示每个记录三(3)次的重复.

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

请帮助我用完了想法,我也尝试过之前提出过的档案

Answer 1

使用Bootstrap Responsive网格,无需手动构建表并循环遍历行.Bootstrap将自动为您包装列.Bootstrap在使用12列的网格系统上工作,如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上.

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

这是Bootply上的一个示例

Answer 2

使用for块和打印<tr>或</tr>基于值i.如果它是第一个索引(i等于0)或它的第四,第七,...(3N + 1)个指数(i % 3等于0),然后打印<tr>之前<td>.如果它是最后一个索引(i等于Model.Clients.Count - 1)或它是第三个,第六个,......(3n)索引(i % 3等于2),则打印</tr>后</td>.以下代码应该给出你想要的.

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