Question

This is very simple, but I’m being rather stupid about it. I have a list of elements and I need to create a new row after the 4th element. So say I have a list “One, Two, Three, Four, Five, Six” … the resulting HTML table needs to look like this:

+-------------------------+
| One | Two | Three | Four|
+-------------------------+
| Five| Six |       |     |
+-------------------------+

If I were using Javascript it’d be very, very clean, something like this:

for (var i = 0; <= (Items.length - 1); i++) {
if ((i%5) === 0) {
   $("#myTable").append('<tr class="table-rows" />');
   $("#myTable .table-rows:last").append(Items[i]);
}
 else {
   $("#myTable .table-rows:last").append(Items[i]);
}

Well that code might not exactly work, but I’d use the modulo operator to determine when to create a new row then append the data.

You might say that I shouldn’t be using a table for this, and I would agree, but this is not the requirement I’m working under. You might also say that it’d be easier to build the table server side (I’m using ASP.NET MVC, so in a controller), but I have to do this in a view that’s inheriting List as its model.

I really want to break up the items into groups of 4 (again this is ugly code, and I’m omitting the ugly WebForms viewengine markup for clarity):

for (int i = 0; i < Model.Count; i = i + 4) {
<tr>
 <td>Model[i]</td>
 <td>i + 1 < Model.Count ? Model[i + 1] : ""</td>
 <td>i + 2 < Model.Count ? Model[i + 2] : ""</td>
 <td>i + 3 < Model.Count ? Model[i + 3] : ""</td>
</tr>
}

This works for the first set of 4, but then each element gets its own row:

+-------------------------+
| One | Two | Three | Four|
+-------------------------+
| Five|     |       |     |
+-------------------------+
| Six |     |       |     |
+-------------------------+

I feel as if I’m oh so close, what gives?

Answer 1

There’s no reason you can’t use the Modulo operator in C#, in basically the exact same way you might in Javascript.

Your C# code as it is also will give you index out of bounds errors unless your data source has exactly divisible-by-four elements.

EDIT: Example; assuming a Razor C# view:

@for(int i=0; i<Model.Length;i++){
   if(i%4==0){
      <tr>
   }
   <td>@Model[i].OutPut</td>
   if(i%4==3){
      </tr>
   }
}
@if(Model.Length%4!=0){
  </tr>
}

EDIT: Added the if() construct at the end in re: @48klocs’ comment!