.Net Core 5.0 Razor Pages跨if块开闭HTML标签编译失败如何解决

问题根因 #

Razor编译器默认会自动匹配HTML标签的开闭关系，如果你在if代码块内打开<tr>但不闭合，编译器会自动补全闭合标签，打乱后续的C#代码逻辑，所以不推荐跨代码块开闭HTML标签，优先选择符合Razor解析规则的实现方式。

方案1：用@:标记强制输出未闭合标签（适配你原来的写法） #

@:前缀会告诉Razor编译器，后面的内容直接作为纯文本输出，不做标签闭合校验，修改后的代码如下：

@if (Model.MyListOfItems is not null)
{
<table>
    <tbody>
        @{ int count = 0; }
        @foreach (var item in Model.MyListOfItems)
        {
            count++;
            if (count % 2 == 1)
            {
                @:<tr>
                <td>
                    @Html.DisplayFor(i => item.Text)
                </td>
            }
            else
            {
                <td>
                    @Html.DisplayFor(i => item.Text)
                </td>
                @:</tr>
            }
        }
        @if (count % 2 == 1)
        {
            @:</tr>
        }
    </tbody>
</table>
}

方案2：按行分组遍历（更推荐，可读性更高，无标签匹配风险） #

直接把列表按每2个元素分为一组，每组对应一行，完全不需要跨代码块处理标签，逻辑更直观：

@if (Model.MyListOfItems is not null)
{
<table>
    <tbody>
        @* 按每两项分为一组，每组对应一行 *@
        @foreach (var group in Model.MyListOfItems.Select((item, index) => new { item, index }).GroupBy(x => x.index / 2))
        {
            <tr>
                <td>@Html.DisplayFor(i => group.First().item.Text)</td>
                @if (group.Count() > 1)
                {
                    <td>@Html.DisplayFor(i => group.Last().item.Text)</td>
                }
                else
                {
                    @* 奇数个元素的最后一行补空td，保持表格结构完整 *@
                    <td></td>
                }
            </tr>
        }
    </tbody>
</table>
}

如果使用.NET 6及以上版本，还可以直接用LINQ的Chunk(2)方法简化分组逻辑，不用自己写索引分组。

内容的提问来源于stack exchange，提问作者ALittleHelpFromMyFriends