在 MVC cshtml 中每行显示三列

本文关键字：三列 显示 MVC cshtml | 更新日期: 2023-09-27 18:32:09

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

请帮忙 我已经没有想法了，我也尝试过之前问过的存档

在 MVC cshtml 中每行显示三列

使用引导响应式网格，无需手动构建表并循环访问行。 引导程序将自动为您换行列。 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上的示例

使用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>
    }
}
相关文章：