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

请帮助我用完了想法，我还尝试了归档that was asked before

Answer 1

使用Bootstrap Responsive网格，没有必要手动构建表并遍历行。 Bootstrap将自动为您包装列。 Bootstrap在使用12列的网格系统上工作，如果在一行中放置超过12列，则每组额外列将作为一个单元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>

这是Bootply

上的示例

Answer 2

使用for屏蔽并根据<tr>的值打印</tr>或i。如果它是第一个索引（i等于0）或者它是第四个，第七个，......（3n + 1）个索引（i % 3等于0），那么在<tr>之前打印<td> {1}}。如果它是最后一个索引（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>
    }
}

在MVC cshtml中每行显示三列

2 个答案: