使用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

简单的方法是将复选框包装在一个元素(通常是a 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>
}