Arrange MVC Checkboxes in columns inside ForEach loop using Razor

Question

I have a collection (Generic List) of objects being populated outside the model of a MVC view, and need to show a checkbox for each item in the list.

This works fine for that:

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

That displays the checkboxes one per row... and there are about 50 of them, so it wastes a LOT of space, since each one's description is only about 10 characters or so.

In the past I would use a CheckBoxList with columns set to 5 for this... but that feature seems to be missing with MVC... so I need to figure out a way to do the same thing here somehow. I have played with using a for loop and counting columns and adding etc as we count thru the objects, but it does not seem to take. Always get errors where razor does not like the markeup for closing a TD and starting a new one inside a if statement.

So... the million dollar question is, how the heck do we do this properly in MVC? It seems to me I must be missing something. Its such a stupid problem to have that I must be overlooking something simple. Anyone?

Answer 1

The simple way is to wrap your checkboxes in an element (usually a div), float the element to the left and give it a maximum width. That way they will flow in columns.

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

So your Razor syntax is something like this:

@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

With bootstrap this is pretty easy to achieve, simply place your checkbox inside col-md-3 col-sm-3 col-xs-3 to get 4 columns for example:

@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

Project your data into the right structure first.

Best to do that in the controller using a model, but can be done in the view.

@{ 
  // 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>
}

note: did not test the razor code, contains probably syntax problems