在 MVC cshtml 中每行显示三列答案

【问题标题】：Display three columns per row in MVC cshtml在 MVC cshtml 中每行显示三列
【发布时间】：2014-11-26 13:21:48
【问题描述】：

我目前拥有的是下面的，它工作正常，但现在它在一个长列表中显示我的记录，我想要做的是每行显示三 (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

【问题讨论】：

使用计数器保存客户的索引，并在第三项之后添加新行tr
如果您使用的是 Bootstrap 3.x（新 MVC 项目中的默认设置），您可以简单地使用 CSS 类来控制您的列输出，甚至根本不用费心循环。如果您希望我通过示例扩展答案，请发表回复评论。
是的，我正在使用 Bootstrap，请扩展您的答案。 @AndrewCounts 谢谢。不像那些只是投反对票而不解释我哪里出错的人。

标签： c# asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 razor

【解决方案1】：

使用 Bootstrap 响应式网格，无需手动构建表格并循环遍历行。 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上的示例

【讨论】：

哇，这很简单直接，从现在开始我会走这条路thanx man。我在这里收到的最简单有效的答案。顺便说一句，它可以工作。
很高兴为您提供帮助。这些网格有各种高级选项，例如在不同尺寸的设备上处理溢出。我使用col-md-4 发布的示例将在小型（平板电脑）或超小型（手机）设备上显示一列。调整浏览器窗口大小以查看效果。
从现在开始我一定会调查他们...thanx再次。
您当然应该尽量保持每行最多定义 12 列吗？使用这种方法，您可以为每行定义 1000 列。

【解决方案2】：

使用for 块并根据i 的值打印<tr> 或</tr>。如果它是第一个索引（i 等于 0）或者它是第四个、第七个、...（3n+1）个索引（i % 3 等于 0），则在<td> 之前打印<tr>。如果它是最后一个索引（i 等于 Model.Clients.Count - 1）或者它是第三、第六、...（3n）个索引（i % 3 等于 2），则在 </td> 之后打印 </tr>。下面的代码应该给出你想要的。

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

【讨论】：