.NET Core 2.0 MVC5实现多层嵌套UL/LI菜单的技术问题

我之前也踩过手动嵌套菜单的坑，拆<ul>标签确实很容易搞乱，给你一套稳定的解决方案：

第一步：定义层级化的菜单模型 #

字典结构不太适合表达多层嵌套关系，先搞个带子项的模型类，让数据逻辑更清晰：

public class MenuItem
{
    public string Text { get; set; } // 菜单显示文本
    public string Url { get; set; } // 跳转链接
    public List<MenuItem> Children { get; set; } = new List<MenuItem>(); // 子菜单列表
}

第二步：把字典数据转成模型列表 #

如果你的菜单数据来自字典，可以写个递归方法完成转换。假设你的字典是「键为菜单文本，值为URL或子字典」的结构：

// 字典转菜单模型的递归方法
List<MenuItem> ConvertDictToMenuItems(Dictionary<string, object> menuDict)
{
    var menuItems = new List<MenuItem>();
    foreach (var kvp in menuDict)
    {
        var item = new MenuItem { Text = kvp.Key };
        
        // 判断值是URL还是子字典
        if (kvp.Value is string url)
        {
            item.Url = url;
        }
        else if (kvp.Value is Dictionary<string, object> subDict)
        {
            // 递归转换子菜单
            item.Children = ConvertDictToMenuItems(subDict);
        }
        
        menuItems.Add(item);
    }
    return menuItems;
}

在控制器里调用这个方法，把转换后的菜单列表传给视图就行。

第三步：用递归部分视图渲染菜单 #

这是解决嵌套问题的核心！创建一个名为_MenuPartial.cshtml的部分视图，专门负责渲染某一层菜单：

@model List<MenuItem>

@if (Model != null && Model.Any())
{
    <ul>
        @foreach (var menuItem in Model)
        {
            <li>
                <a href="@menuItem.Url">@menuItem.Text</a>
                <!-- 递归渲染子菜单：直接调用自身，传入当前项的子列表 -->
                @await Html.PartialAsync("_MenuPartial", menuItem.Children)
            </li>
        }
    </ul>
}

然后在主视图里，只需要一行代码就能渲染整个多层菜单：

@model List<MenuItem>

@await Html.PartialAsync("_MenuPartial", Model)

说说你之前遇到的报错原因 #

• 无法找到当前上下文的listItems：大概率是变量作用域问题——比如你在循环内部定义了listItems，却在循环外部尝试访问，或者嵌套循环时变量名冲突导致上下文找不到。
• 字符字面量字符过多：通常是字符串拼接时引号用错了，比如用单引号包裹超长字符串，或者HTML标签的引号没正确闭合（比如双引号嵌套时出错）。

用递归部分视图的方式，完全不用手动处理<ul>的开闭时机，框架会自动帮你处理层级嵌套，再也不会出现标签不匹配或者变量作用域的问题。

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