MVC formatting td dynamically - asp.net-mvc

Question

I am new to razor engine syntax and I have issue with formatting adding the logic in the view. Here is what I want to accomplish. I have collection of items coming from model.
I need to iterate that collection and align 6 item in a row.
This is how the final output should look like:
<table>
<tr>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
</tr>
<tr>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
</tr>
................. and so on
</table>
Here is the code I wrote in the view
<table>
#for (int i = 0; i <= Model.checkItems.Count; i++)
{
if (i % 6 == 0)
{ <tr> }
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[i].DisplayText)"
name="chk"
nameVal = "#Model.checkItems[i].DisplayText"
value="#Model.checkItems[i].Value"/>
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
</td>
if(i % 6 == 0)
{ </tr> }
}
</table>
When the page finally gets rendered, the first if condition getting executed but not the second one.
Can somebody help to figure out how the accomplish this?

Answer 1

Try this
<table>
#{ int count = 0; }
<tr>
#foreach (var item in Model.checkItems)
{
<td>
<input type="checkbox"
id="chk_#(item.DisplayText)"
name="chk"
nameVal = "#item.DisplayText"
value="#item.Value"/>
<label for="chkGroup_#(item.DisplayText)">#item.DisplayText</label>
</td>
if (++count % 6 == 0)
{
#:</tr><tr>
}
}
</tr>
</table>

Answer 2

You're missing a closing tag on your label
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
should be
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText</label>

Answer 3

would this work:
<table>
#for (int i = 0; i <= Model.checkItems.Count; i++)
{
if (i % 6 == 0)
{
<tr>
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[i].DisplayText)"
name="chk"
nameVal = "#Model.checkItems[i].DisplayText"
value="#Model.checkItems[i].Value"/>
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
</td>
</tr>
}
}
</table>

Answer 4

Here's another solution that uses 2 nested loops for rows and columns. I don't know if its necessarily better (it certainly looks more complicated on the face of it), but it does at least allow you to easily see the nested nature of the rows and cells:
<table>
#{
const int cols = 3;
int rows = (Model.checkItems.Count + cols - 1) / cols;
}
#for (int rowIndex = 0; rowIndex < rows; rowIndex++)
{
<tr>
#for (int colIndex = rowIndex * cols; colIndex < Math.Min(Model.checkItems.Count, cols * (rowIndex + 1)); colIndex++)
{
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[colIndex].DisplayText)"
name="chk"
nameVal="#Model.checkItems[colIndex].DisplayText"
value="#Model.checkItems[colIndex].Value"/>
<label for="chkGroup_#(Model.checkItems[colIndex].DisplayText)">#Model.checkItems[colIndex].DisplayText</label>
</td>
}
</tr>
}
</table>