使用 Razor 在 ForEach 循环内的列中排列 MVC 复选框

Question

我有一个在 MVC 视图模型之外填充的对象集合（通用列表），并且需要为列表中的每个项目显示一个复选框。

这很好用：

@foreach (Admin_Permission perm in ViewBag.PermissionList)
        {                
            @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  @perm.PermissionDesc
            <br>            
        }

每行显示一个复选框...大约有 50 个，因此浪费了很多空间，因为每个人的描述只有大约 10 个字符左右。

在过去，我会使用 CheckBoxList 并将列设置为 5……但 MVC 似乎缺少该功能……所以我需要想办法在这里做同样的事情。我玩过使用 for 循环和计数列并在我们通过对象计数时添加等，但它似乎不需要。在 razor 不喜欢关闭 TD 并在 if 语句中开始新的标记时，总是会出现错误。

所以...百万美元的问题是，我们到底如何在 MVC 中正确地做到这一点？在我看来，我一定错过了什么。这是一个愚蠢的问题，我必须忽略一些简单的事情。有人吗？

Answer 1

简单的方法是将您的复选框包装在一个元素中（通常是div），将元素浮动到左边并给它一个最大宽度。这样它们就会在列中流动。

.check-container {
  float: left;
  width: 33%;
}

<div class="check-container">
  <input type="checkbox" id="check1">
  <label for="check1">Checkbox 1</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check2">
  <label for="check2">Checkbox 2</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check3">
  <label for="check3">Checkbox 3</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check4">
  <label for="check4">Checkbox 4</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check5">
  <label for="check5">Checkbox 5</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check6">
  <label for="check6">Checkbox 6</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check7">
  <label for="check7">Checkbox 7</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check8">
  <label for="check8">Checkbox 8</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check9">
  <label for="check9">Checkbox 9</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check10">
  <label for="check10">Checkbox 10</label>
</div>

所以你的 Razor 语法是这样的：

@foreach (Admin_Permission perm in ViewBag.PermissionList)
{       
    <div class="check-container">         
        @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  
        <label>@perm.PermissionDesc</label>
    </div>
}

Answer 2

使用bootstrap 这很容易实现，只需将您的复选框放在col-md-3 col-sm-3 col-xs-3 中即可获得 4 列，例如：

@foreach (Admin_Permission perm in ViewBag.PermissionList)
        {     
<div class="col-md-3 col-sm-3 col-xs-3">           
            @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  @perm.PermissionDesc
           </div>        
        }

Answer 3

首先将您的数据投影到正确的结构中。

最好在控制器中使用模型来完成，但也可以在视图中完成。

@{ 
  // linq projection for creatin a 5 items per row table
  // permissions are projected into a new object where the row number and cell nummer are calculated
  // then groupby is used to group elements per row
  var table=ViewBag.PermissionList
        .Select( (v,i)=>new { row=i/5, col=i^5,value=v} )
        .GroupBy( g=> g.row);
 }

@foreach(var row in table)
{
    <tr>
    foreach(var col in row){
        <td>
        @Html.CheckBox(col.value.PermissionKey, new {Value=col.value.PermissionID})  @col.value.PermissionDesc
        </td>
    }

    // todo: fill empty cells when the last row does not contian 5 elements.        
    </tr>
}

注意：没有测试剃须刀代码，可能包含语法问题