显示多列复选框列表答案

【问题标题】：Displaying a multi-column checkbox list显示多列复选框列表
【发布时间】：2011-07-07 20:51:50
【问题描述】：

我目前正在显示我的复选框列表，如下所示：

foreach (var employee in Model.Employees) {        
    @Html.CheckBox(employee.Name);<br />   
}

如果您想要一长列复选框，这很好，但我的列表越来越长，所以我想将它显示在 2 或 3 列中。

有没有简单的方法来做到这一点？我知道我可以创建一个表，然后为一列的员工的前半部分放入一个for 循环，然后为另一列中的另一半员工放入另一个for 循环。但这似乎太原始了，必须有一种更简单、更清洁的方法。

【问题讨论】：

我看不出使用 2 或 3 列会如何使列表更短。您仍然会水平获得许多复选框。如果将它们分组没有逻辑意义，那么将它们分组到列中也会降低用户的直观性。
有一种更简单的方法可以做到这一点：stackoverflow.com/a/7448678/626533

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

【解决方案1】：

我将使用 2 或 3 个包含您的复选框的 html 列表，每个列表紧跟在标记中的下一个列表之后，并使用 css 将每个列表浮动到左侧。

如果复选框超过 10 个，此示例会将复选框分为 2 个列表：

CSS：

.multi-list 
{
    float: left;
    padding-right: 50px;
}

.clear
{
    clear: both;
}

带有 Razor 的 HTML 标记：

@{
    if (Model != null)
    {
        int itemCount = 0;        
        <ul class="multi-list">
            @foreach (var item in Model) {
                itemCount++;
                <li>
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.Active)
                </li>
                if (Model.Count() > 10 && itemCount == (int)(Model.Count() / 2))
                {
                    @Html.Raw("</ul><ul class=\"multi-list\">");
                }
            }
        </ul>
        <div class="clear"></div>
    }
}

【讨论】：