使用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语句中开始新的TD的市场时总是会出错。

所以...百万美元的问题是，我们如何在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>
}

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