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

Question

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

Home > Contact

我找到了这个答案 - link
但它适用于 MVC 而不是 Razor 页面。而且我无法找到任何适用于 Razor 页面的东西。
提前致谢 :)
回答
由于我的回答被版主删除了，这是我的解决方案-

To solve this I found this project -https://github.com/zHaytam/SmartBreadcrumbs

Very easy to use and worked flawlessly

Answer 1

我遇到了这个问题并以这种方式解决了它:
起初我做了一个 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; }
    }

我希望它有帮助!!