Razor视图中foreach循环内打开<ul>标签，需在循环外闭合的实现问题

看起来你遇到的核心问题是在循环内动态打开<ul>，但想在循环外统一闭合时，Razor渲染出了不符合预期的HTML结构。这主要是因为Razor的语法解析会自动处理代码块与HTML标签的嵌套关系，直接在循环内开标签、循环外闭标签很容易导致结构混乱，甚至自动补全错误的标签。

最可靠的解决方案：先对数据按level分组 #

与其在循环里反复判断level变化来控制<ul>的开闭，不如先把你的Model数据按level分组，这样每个分组对应一个完整的<ul>块，结构清晰且不会出错。

步骤1：在视图中对数据分组

先在视图顶部用LINQ的GroupBy方法把数据按level分组（如果需要按level排序，记得加上OrderBy）：

@{
    // 按level分组，同时按level排序保证顺序正确
    var groupedItems = Model.GroupBy(item => item.level)
                            .OrderBy(group => group.Key);
}

步骤2：遍历分组生成正确的HTML结构

每个分组对应一个<ul>，分组内的元素生成<li>，这样每个<ul>都能在对应的分组循环内正确闭合：

@foreach (var levelGroup in groupedItems)
{
    // 取分组内第一个元素的circleLevel（同一level的circleLevel应该一致吧？）
    var circleClass = Html.DisplayFor(_ => levelGroup.First().circleLevel);
    <ul class="@circleClass">
        @foreach (var item in levelGroup)
        {
            <li>
                <a class="text" style="background-color: @Html.DisplayFor(_ => item.SomeColorProperty)">
                    @item.YourDisplayTextProperty
                </a>
            </li>
        }
    </ul>
}

为什么你的原代码会出问题？ #

你原来的逻辑是在遍历item1时，当level变化就打开一个<ul>，但闭合标签放在循环外——这会导致所有<ul>都只会在最后闭合一次，完全不符合你想要的“每个level对应一个独立<ul>”的结构。而且Razor的解析器会因为代码块（if/foreach）与HTML标签的嵌套关系，自动补全它认为缺失的标签，最终渲染出混乱的HTML。

备选方案：手动控制标签开闭（不推荐，易出错） #

如果因为某些原因不能分组，你可以手动控制<ul>的开闭状态，但必须确保数据是按level排序的，同时用变量跟踪<ul>是否处于打开状态：

@{
    int currentLevel = -1;
    bool isUlOpen = false;
    // 务必先按level排序，否则逻辑会混乱
    var sortedItems = Model.OrderBy(item => item.level);
}

@foreach (var item in sortedItems)
{
    if (item.level != currentLevel)
    {
        // 先闭合之前打开的ul
        if (isUlOpen)
        {
            </ul>
        }
        // 更新当前level并打开新的ul
        currentLevel = item.level;
        <ul class="@Html.DisplayFor(_ => item.circleLevel)">
        isUlOpen = true;
    }
    // 生成li元素
    <li>
        <a class="text" style="background-color: @Html.DisplayFor(_ => item.SomeColorProperty)">
            @item.YourDisplayTextProperty
        </a>
    </li>
}

// 最后闭合剩下的ul
@if (isUlOpen)
{
    </ul>
}

这种方式虽然能实现需求，但逻辑繁琐，一旦数据顺序不对就会出问题，所以优先推荐分组处理的方案。

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