如何在云端导航的breadcrumb中实现路由参数？

Question

我使用cloudscribe导航来构建侧边栏和相关的breadcrumb菜单

我在帮助文档中找不到它，所以在这里发帖

我们的路径模板中有一些路径参数-我不确定如何在breadcrumbs中保留这些参数，导航参数preservedRouterParameters我知道它只适用于查询字符串参数

我们的路线是这样的：

{wholesaleCustomerCode}/{area:exists}/{baseItemId:guid}/{controller=Home}/{action=Index}/{id:guid?}

并将转换为类似以下内容：

http://127.0.0.1:5100/TOM/Service/09185d87-5e3f-4217-a0b9-02f766efc714/Home/Detail

现在，当我在/Detail视图上时-它嵌套得很深-但是breadcrumb中以前的父级丢失了baseItemId值-有什么建议我如何在breadcrumb层次结构中保留路由参数？

我尝试了以下操作，只是为了测试它是否会选择保留路由参数，但不起作用

<Children>
                    <NavNode
                    key="d902daaa-99ec-488a-85de-c03641fb547d"
                    area="Service"
                    controller="Home"
                    action="Detail"
                    text="Service"
                    iconCssClass=""
                    componentVisibility="breadcrumbs"
                    viewRoles="Administrator"
                    preservedRouteParameters="baseItemId"
                    >
                        <Children>
                            <NavNode
                            key="3047c57d-0f8c-4875-aff9-9c1f91909e41"
                            area="Service"
                            controller="RecurringCredit"
                            action="Edit"
                            text="Recurring Credit"
                            iconCssClass=""
                            componentVisibility="breadcrumbs"
                            viewRoles="Administrator"
                            preservedRouteParameters="baseItemId"
                            >
                            </NavNode></Children></NavNode>

Answer 1

确实，preservedRouteParameters只适用于查询字符串参数。一种可能的解决方案是在详细视图的控制器操作中使用代码，根据需要更新父breadcrumbs的url。此处提供相关文档：https://www.cloudscribe.com/docs/adjusting-menu-items-per-request

var crumbAdjuster = new NavigationNodeAdjuster(Request.HttpContext);
crumbAdjuster.KeyToAdjust = "d902daaa-99ec-488a-85de-c03641fb547d";
crumbAdjuster.AdjustedUrl = // set the url here as you want it to be;
crumbAdjuster.AddToContext();

，它将在当前请求的生命周期内更新给定菜单节点的url。

Answer 2

下面是我如何解决这个问题的

假设您有以下来自cloudscribe.Web.Navigation/Views的默认BootstrapBreadcrumbs视图：

@using cloudscribe.Web.Navigation
@model NavigationViewModel
@if (Model.CurrentNode != null && (Model.ParentChain.Count > 1 || (Model.TailCrumbs != null && Model.TailCrumbs.Count > 0)))
{
    <ul class="breadcrumb">
    @foreach (var node in Model.ParentChain)
    {
        if (!Model.ShouldAllowView(node)) { continue; }
        if (node.EqualsNode(Model.CurrentNode))
        {
            if (Model.TailCrumbs != null)
            {
                <li><a href="@Url.Content(Model.AdjustUrl(node))">@Model.AdjustText(node)</a><span class="divider"></span></li>
            }
            else
            {
                <li class="active">@Model.AdjustText(node)</li>
            }
        }
        else
        {
            <li><a href="@Url.Content(Model.AdjustUrl(node))">@Model.AdjustText(node)</a><span class="divider"></span></li>
        }
    }
    @if (Model.TailCrumbs != null)
    {
        foreach (var n in Model.TailCrumbs)
        {
            <li class="active">@n.Text</li>
        }
    }
    </ul>
}

不使用Model.AdjustUrl，而是使用asp-route-* helper

@using cloudscribe.Web.Navigation
@model NavigationViewModel
@{
    var id = ViewContext.RouteData.Values["id"];
    var baseItemId = ViewContext.RouteData.Values["baseItemId"];
    var orderId = ViewContext.HttpContext.Request.Query["orderId"];
}

@if (Model.CurrentNode != null && (Model.ParentChain.Count > 1 || (Model.TailCrumbs != null && Model.TailCrumbs.Count > 0)))
{
    <ul class="breadcrumb">
    @foreach (var node in Model.ParentChain)
    {
        if (!Model.ShouldAllowView(node)) { continue; }
        if (node.EqualsNode(Model.CurrentNode))
        {
            if (Model.TailCrumbs != null)
            {
                <li><a asp-area="@node.Value.Area" asp-controller="@node.Value.Controller" asp-action="@node.Value.Action" asp-route-baseItemId="@baseItemId" asp-route-orderId="@orderId" asp-route-id="@id">
                    @Model.AdjustText(node)
                    </a>
                    <span class="divider"></span>
                </li>
            }
            else
            {
                <li class="active">@Model.AdjustText(node)</li>
            }
        }
        else
        {
            <li><a asp-area="@node.Value.Area" asp-controller="@node.Value.Controller" asp-action="@node.Value.Action" asp-route-baseItemId="@baseItemId" asp-route-orderId="@orderId" asp-route-id="@id">@Model.AdjustText(node)</a><span class="divider"></span></li>
        }
    }
    @if (Model.TailCrumbs != null)
    {
        foreach (var n in Model.TailCrumbs)
        {
            <li class="active">@n.Text</li>
        }
    }
    </ul>
}

这种实现有一些缺点，可能并不适用于所有人-例如，所有以前的面包屑层次结构现在都在路由中具有baseItemId -例如，

控制面板/所有备注/备注/详细信息

在这里，所有注释也将添加baseItemId，尽管它不需要它-

但它适用于我们，因为它是一个管理门户(没有SEO要求)以及我们的路径模板的映射方式