Creating grid with 2 axis - asp.net-mvc-3

Question

I am trying to create a grid that contains Events on the x axis and Requirements on the y axis and is filled with solutions.
Event1 Event2
Req1 Sol1
Req2 Sol2
My Model contains a list of Events, which contains their related Requirements, which contain their related Solutions. Every Event can have 0 or more Requirements and each Requirement can have 0 or more solutions.
How can I accurately show this grid in razor?
Here is my attempt:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
<!--Insert logic to align solution with Event-->
<td>
#req.Solution
</td>
</tr>
}
</table>
Of course this is only showing all solutions in the first event column.

Answer 1

I've done a similar thing in PHP for my timesheet system, I want hours worked for each employee on each day (between 2 dates):
| 1 May | 2 May | ... May
Fred | 6 |
George | | 4 |
I used 3 foreach loops, first I outputted the dates, the I went rond each employee, and inside the employee loop, I looped round the dates again.
So for you it would be:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
#foreach(var events in Model.Events)
{
#curRec = events.Requirements
#if (curRec.HasSolution) // If has a solution.
// Very important so solutions can be aligned properly
{ // Output the solution
<td>
#curRec.Solution
</td>
} else { // Output a empty cell
<td></td>
}
}
</tr>
}
</table>