Create a dynamic amount of columns for each item - asp.net-mvc

Question

I have a template maker which creates Scorecards with a possibility of having 10 sections with up to 10 questions in each. When creating my MVC View I only want to show sections that have questions. I have a column in my DB table that has a count of the sections and also for each section I have a column indicating the amount of questions in that section. I have tried this but the model binding does not like the insertion of dynamic names. I think it could be my syntax. Below is what I tried but it doesn't work:
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
#for (var i = 0; i < item.TotSections; i++ )
{
var section = 1;
var SN = "S" + section + "Name";
var SNUP = "S" + section + "NumUP";
var SNQ = "S" + section + "NumQuest";
<td>
#Html.DisplayFor(modelItem => item[SN])
</td>
<td>
#Html.DisplayFor(modelItem => item[SNUP])
</td>
<td>
#Html.DisplayFor(modelItem => item[SNQ])
</td>
}
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
IS there a way of doing this or do I need to rethink?
Thanks in advance.
Edit:
If I had a Scorcard Template with one section in it the static table row would look like this:
#foreach (var item in Model)
{
<tr>
<!--These are Constant for each item-->
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
<!--BELOW IS WHERE I AM HAVING THE PROBLEM-->
<!--I want to create these columns dynamically,-->
<!--depending on how many sections in column '**TotSections**' above-->
<td>
#Html.DisplayFor(modelItem => item.S1Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumQuest)
</td>
<!--Below will be constant for each table row-->
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
if there were two sections:
#foreach (var item in Model)
{
<tr>
<!--These are Constant-->
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
<!--BELOW IS WHERE I AM HAVING THE PROBLEM-->
<!--I want to create these columns dynamically,-->
<!--depending on how many sections in column '**TotSections**' above-->
<td>
#Html.DisplayFor(modelItem => item.S1Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumQuest)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2NumQuest)
</td>
<!--Below will be constant-->
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
The end view will look like this:
You can see above under the TotSections column:
Test Template 1 has 1 section. If I display these with a static viewmodel, columns will be displayed when they shouldn't be and columns won't be displayed when they should. As in the above picture it is showing 2 sections worth when it only has one.
Test Template 2 has 6 sections but is only displaying 2 of the six's columns so is missing 4 sections worth of columns.
The code I originally posted was my attempt to get the number of sections from item.TotSections and then create the section columns dynamically.
Hope this is a bit clearer