创建具有两个轴的栅格

Question

我正在尝试创建一个网格，其中包含x轴上的事件和y轴上的需求，并填充了解决方案。

        Event1        Event2
Req1    Sol1
Req2                  Sol2

我的模型包含一个事件列表，其中包含事件的相关要求，其中包含事件的相关解决方案。每个事件可以有0个或多个需求，每个需求可以有0个或多个解决方案。

如何在razor中准确地显示此网格？

这是我的尝试：

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

当然，这只显示了第一个事件列中的所有解决方案。

Answer 1

我在PHP中为我的时间表系统做了类似的事情，我希望每个员工每天的工作时间(在两个日期之间)：

       | 1 May | 2 May | ... May
Fred   | 6     |
George |       |  4    |

我使用了3个foreach循环，首先我输出日期，然后对每个employee进行轮询，在employee循环中，我再次循环日期。

所以对你来说是这样的：

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