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

Question

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

Home > Contact

我找到了这个答案 -链接

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

提前致谢 ：）

回答

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

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

非常易于使用且工作完美

Answer 1

我遇到了这个问题并通过以下方式解决了它：

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

 <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

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

1. 只需安装 NuGet 包即可Install-Package SmartBreadcrumbs
2. 在启动时初始化它services.AddBreadcrumbs(GetType().Assembly);
3. 在 中_ViewImports.cshtml，添加@addTagHelper *, SmartBreadcrumbs
4. 在您的_Layout.cshml（或特定页面）中，使用<breadcrumb></breadcrumb>.
5. 在您的默认/主页上，将此注释添加到类中[DefaultBreadcrumb("Home")]
6. 在其他页面上将其添加到类中[Breadcrumb("Bookings")]
7. 添加如果您想链接到先前页面，请将其添加到类中[Breadcrumb("Details", FromPage = typeof(IndexModel))]

然后，如果您想自定义它的外观，只需通过添加您想要使用的 CSS 类来更新开头 -

services.AddBreadcrumbs(GetType().Assembly, options =>
{
    options.TagName = "nav";
    options.TagClasses = "";
    options.OlClasses = "breadcrumb";
    options.LiClasses = "breadcrumb-item";
    options.ActiveLiClasses = "breadcrumb-item active";
    options.SeparatorElement = "<li class=\"separator\">/</li>";
});