asp.net MVC 根据菜单树类别不同动态加载视图的实现步骤

public class MenuItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public List Children { get; set; } // 子菜单项
    public MenuItem()
    {
        Children = new List();
    }
}

public ActionResult Index()
{
    var menu = new List
    {
        new MenuItem { Id = 1, Name = "Home", Category = "General" },
        new MenuItem { Id = 2, Name = "Products", Category = "Product" },
        new MenuItem { Id = 3, Name = "Services", Category = "Service" },
        new MenuItem { Id = 4, Name = "About", Category = "General" },
        // 其他菜单项
    };
    return View(menu);
}

@model List

    @foreach (var item in Model)
    {
        

            @Html.DisplayFor(modelItem => item.Name)
            @if (item.Category == "General")
            {
                @Html.Partial("_GeneralMenu", item)
            }
            else if (item.Category == "Product")
            {
                @Html.Partial("_ProductMenu", item)
            }
            else if (item.Category == "Service")
            {
                @Html.Partial("_ServiceMenu", item)
            }
            @if (item.Children.Any())
            {
                

                    @foreach (var child in item.Children)
                    {
                        
@child.Name
                    }
                
            }
        
    }

@model MenuItem

    
@Model.Name
    

$(document).ready(function() {
    $('.menu-item').click(function() {
        var category = $(this).data('category');
        $.ajax({
            url: '@Url.Action("LoadMenuPartial")',
            data: { category: category },
            success: function(data) {
                $('#menu-content').html(data);
            }
        });
    });
});

public ActionResult LoadMenuPartial(string category)
{
    // 根据类别加载对应视图
    return PartialView("_" + category + "Menu");
}