Question

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

Home > Contact

我找到了这个答案-link

但是它似乎是针对MVC而不是剃须刀页面。而且我无法找到适合剃须刀页面的任何东西。

预先感谢：）

Answer 1

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

Answer 2

我遇到了这个问题，并以此方式解决了该问题：

起初，我为面包屑制作了一个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; }
    }

希望对您有帮助！

如何为.net核心剃刀页面创建动态面包屑导航？

2 个答案: