how to implement route parameters in breadcrumb in cloudscribe navigation? - asp.net-core

Question

I'm using cloudscribe navigation to build the sidebar and associated breadcrumb menu
I couldn't find it in the help documentation, so posting here
we have some route parameters in our routing templates - I'm unsure how to preserve those in breadcrumbs, navigation parameter preservedRouterParameters I understand that only works with Query string params
our route is something like this:
{wholesaleCustomerCode}/{area:exists}/{baseItemId:guid}/{controller=Home}/{action=Index}/{id:guid?}
and would translate to something like :
http://127.0.0.1:5100/TOM/Service/09185d87-5e3f-4217-a0b9-02f766efc714/Home/Detail
now when I'm on the /Detail view - it's nested quite deep - but the previous parent in breadcrumb loses baseItemId value - any suggestions how I can preserve route parameters in the breadcrumb hierarchy ?
I have attempted the following, just to test if it would pick up preserve route parameters, but didn't work
<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

It is true that preservedRouteParameters only works for query string parameters.
One possible solution is to use code from within the controller action for your detail view to update the url for the parent breadcrumbs as needed. Relevant documentation here: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();
that will update the url for the given menu node for the life of the current request

Answer 2

Here's how I solved the issue
Consider you have the following default BootstrapBreadcrumbs view from cloudscribe.Web.Navigation/Views:
#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>#Model.AdjustText(node)<span class="divider"></span></li>
}
else
{
<li class="active">#Model.AdjustText(node)</li>
}
}
else
{
<li>#Model.AdjustText(node)<span class="divider"></span></li>
}
}
#if (Model.TailCrumbs != null)
{
foreach (var n in Model.TailCrumbs)
{
<li class="active">#n.Text</li>
}
}
</ul>
}
instead of using Model.AdjustUrl bypass it in favour of using 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>
}
this implementation has some drawbacks and may not work for everyone - for example, all the previous breadcrumbs hierarchy now have baseItemId in the route -
e.g.
dashboard / all notes / note / detail
here , the all notes will also have the baseItemId added to it, although it doesn't need it -
but it works for us as it's an administrative portal (no SEO requirements) and the way our route templates are mapped