如何为.net core razor 页面创建动态面包屑导航？

Question

我正在尝试创建面包屑导航，即

Home > Contact

我找到了这个答案 - link

但它似乎适用于 MVC 而不是剃须刀页面。而且我找不到任何适用于剃须刀页面的东西。

提前致谢:)

回答

由于我的回答被版主删除，这是我的解决方案-

为了解决这个问题，我找到了这个项目 - https://github.com/zHaytam/SmartBreadcrumbs

非常易于使用且工作完美

Answer 1

我遇到了这个问题，就这样解决了：

起初我为 Breadcrumb 制作了一个razor 组件，如下所示：

 <nav aria-label="breadcrumb" style="background-color: #f2f2f3">
    <div class="mt-max-size">
        <ol class="breadcrumb">
            @foreach (var link in Links.OrderBy(x => x.OrderIndex))
            {
                if (link.IsActive)
                {
                    <li class="breadcrumb-item active mt-bread-item" aria-current="page">@link.Title</li>
                }
                else
                {
                    <li class="breadcrumb-item"><a class="mt-bread-item-link" href="@link.Address">@link.Title</a></li>
                }
            }
        </ol>
    </div>
</nav>
    @code{
        [Parameter]
        public List<Model.BreadcrumbLink> Links { get; set; }
        public Breadcrumb()
        {
    
        }
            protected override Task OnParametersSetAsync() => base.OnParametersSetAsync();
    }

然后我在razor 布局中使用了这个组件，如下所示：

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager

<Breadcrumb Links="@breadcrumbLinks" />

@code{
    private string currentUrl;
protected override void OnParametersSet() {
        breadcrumbLinks = new List<Model.BreadcrumbLink>();
        currentUrl = NavigationManager.Uri;
        var myUrl = currentUrl.Replace(NavigationManager.BaseUri, "");
        breadcrumbLinks.Add(new Model.BreadcrumbLink
        {
            Address = NavigationManager.BaseUri,
            IsActive = NavigationManager.Uri == NavigationManager.BaseUri,
            OrderIndex = 1,
            Title = @Localizer["Home".ToLower()]
        });
        var path = myUrl.Split('/');
        var count = 1;
        
        foreach (var link in path)
        {
            if (link == "") continue;
            count++;
            var lastLink = breadcrumbLinks.Last();
            breadcrumbLinks.Add(new Model.BreadcrumbLink
            {
                Address = $"{lastLink.Address}/{link}",
                IsActive = link == path.Last(),
                OrderIndex = count,
                Title = link
            });
        }
        base.OnParametersSet();
    }
}

注意：要传递数据我已经创建了一个模型：Model.BreadcrumbLink。你可以在下面看到它的定义：

public class BreadcrumbLink
    {
        public int OrderIndex { get; set; }
        public string Address { get; set; }
        public string Title { get; set; }
        public bool IsActive { get; set; }
    }

希望对你有帮助！！

Answer 2

由于 Razor Pages 路由基于 Pages 文件夹中的文件结构，您可以将其用作生成面包屑的基础。或者您可以使用Context.Request.Path 并在/ 上拆分以获得导航段。如果您在 Pages 文件夹中的每个文件夹中都有一个默认（索引）文档，这可能非常简单。否则，您必须在渲染每个面包屑之前检查文件是否存在。