使用局部视图递归 ASP.NET Core MVC 中的动态菜单答案

【问题标题】：Recursion for dynamic menu in ASP.NET Core MVC using partial View使用局部视图递归 ASP.NET Core MVC 中的动态菜单
【发布时间】：2021-05-06 04:44:19
【问题描述】：

我想使用递归显示带有部分视图的动态菜单。但我没有找到任何解决方案。我有这个代码。

控制器

public IActionResult GetMenu()
{
    var catAll = _categoryservice.GetCategories();

    var model = catAll.Where(category => category.ParentCategoryId == null).Select(x => new ViewModel
    {
        Id = x.Id,
        Name = x.Name,
        ParentCategoryId = x.ParentCategoryId,        
    }).ToList();
    return PartialView("~/Views/Shared/Partial/_GetMenu.cshtml", model);
}

我想在布局页面中调用控制器 ActionMethod 以获得动态菜单。我使用了 RenderAction，但这不起作用。

_GetMenu.cshtml（部分视图）

@{ Func<dynamic, IHtmlContent> 
 ShowMenu(IEnumerable<SarvamCart.Domain.Models.ViewModel> cats) =>
    @<ul>
        @foreach (var cat in cats)
        {
            <li>
                @cat.Name
                @if (cat.Child != null && cat.Child.Any())
                {
                    @ShowMenu(cat.Child)
                }
            </li>
        }
    </ul>;
}

我部分传递了这个递归代码，但这也不起作用。

它给了我正确的结果，但我想要这样的动态菜单布局：

请帮我解决这个问题

【问题讨论】：

很确定应该是Func<IEnumerable<SarvamCart.Domain.Models.ViewModel>, IHtmlContent> ShowMenu = @<ul> @foreach (var cat in item) .... </ul>;
并记得最后调用一次@ShowMenu(Model)。
不，这也不行。模型得到空值
如何使用.net core mvc中的renderAction和递归来实现动态菜单？

标签： c# jquery asp.net-mvc asp.net-core-mvc

【解决方案1】：

您可以使用ajax来调用控制器动作。这是一个演示：布局.cshtml：

...
 <div class="container">
        <main role="main" class="pb-3">
            <div id="menu">

            </div>
            @RenderBody()
        </main>
    </div>
...
<script>
    $(function () {
        $.ajax({
            url: "Test1/GetMenu",
        }).done(function (data) {
            $("#menu").html(data);
        });
    })
</script>

Test1/GetMenu：

public IActionResult GetMenu()
    {
        var catAll = _categoryservice.GetCategories();

        var model = catAll.Where(category => category.ParentCategoryId == null).Select(x => new ViewModel
        {
            Id = x.Id,
            Name = x.Name,
            ParentCategoryId = x.ParentCategoryId,
            Child=x.Child

        }).ToList();
        return PartialView("~/Views/Shared/Partial/_GetMenu.cshtml", model);
    }

数据库数据：

样本model 数据：视图模型：

public class ViewModel
    {
        public int Id { get; set; }

        public int? ParentCategoryId { get; set; }
        public string Name { get; set; }
        [ForeignKey("ParentCategoryId")]
        public List<ViewModel> Child { get; set; }

        
    }

_GetMenu.cshtml（部分视图）：

@using Microsoft.AspNetCore.Html
@using xxx.Models
@model IEnumerable<ViewModel>
@ShowMenu(Model.ToList(), new ViewModel())(null)
@{
    Func<dynamic, IHtmlContent> ShowMenu(List<ViewModel> cats, ViewModel parent) =>
    @<ul>
        @foreach (var cat in cats)
        {
            <li>
                @cat.Name
                @if (cat.Child.Count() > 0)
                {
                    @ShowMenu(cat.Child, cat)(null)
                }
            </li>
        }
    </ul>;
}

结果：

【讨论】：