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

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

public ActionResult Index()
{
    var menu = new List<MenuItem>
    {
        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<MenuItem>
<ul>
    @foreach (var item in Model)
    {
        <li>
            @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())
            {
                <ul>
                    @foreach (var child in item.Children)
                    {
                        <li>@child.Name</li>
                    }
                </ul>
            }
        </li>
    }
</ul>

@model MenuItem
<div>
    <h4>@Model.Name</h4>
    <!-- 一般类别的其他内容 -->
</div>

$(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");
}