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

Question

我有一个在 MVC View 模型之外填充的对象集合(通用列表)，需要为列表中的每个项目显示一个复选框。

这很好用:

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

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

在过去，我会为此使用列设置为 5 的 CheckBoxList...但是 MVC 似乎缺少该功能...所以我需要找出一种方法来以某种方式在这里做同样的事情。我玩过使用 for 循环和计数列，并在我们通过对象计数时添加等，但它似乎并不需要。在 razor 不喜欢关闭 TD 并在 if 语句中启动新 TD 的标记的情况下，总是会出现错误。

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

Answer 1

简单的方法是将复选框包裹在一个元素中(通常是 div)，将元素 float 到左侧并为其指定最大宽度。这样它们就会按列流动。

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