Razor页面HTML与服务器代码混合异常：代码输出且编译报错求助

你这是踩了Razor视图混合代码和HTML的经典坑——把HTML直接塞进服务器代码块(@{})里，Razor会把这些标签当成纯文本输出，而不是解析成HTML元素；零散加@又没理顺代码结构，自然会编译失败。我来帮你把代码修正过来：

问题根源 #

你原来的写法把所有逻辑和HTML都包在一个大的@{}代码块里，Razor在代码块内只会执行C#代码，遇到<div>这类标签时会直接输出字符串，而不是渲染成HTML。同时错误地给所有代码加@，破坏了Razor的语法结构，导致编译报错。

修正后的代码 #

@{ var i = 0; }
@foreach (var match in Model.StagingRooms)
{
    // 每两个卡片开启一个新行
    if (i % 2 == 0)
    {
        <div class="row">
    }
    
    // 渲染卡片Partial
    @Html.Partial("_MatchCard", match.Value)
    
    i++;
    
    // 每两个卡片闭合当前行
    if (i % 2 == 0)
    {
        </div>
    }
}

// 处理奇数个卡片的情况，避免未闭合的div标签
@if (i % 2 != 0)
{
    </div>
}

关键说明 #

1. 代码与HTML的自然切换：用@foreach开头定义循环代码块，在代码块内部遇到<时，Razor会自动切换到HTML模式，不需要额外标记，这样<div class="row">会被正确渲染成HTML元素。
2. Partial的正确渲染：@Html.Partial前面的@是必须的，它会执行这个方法并把Partial的内容输出到页面上。
3. 收尾处理：最后加一个判断，处理总卡片数为奇数的情况，避免页面出现未闭合的<div>标签，保证HTML结构的完整性。

这样修改后，就能按照预期生成每行两个卡片的布局了。

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