zHaytam / SmartBreadcrumbs

A utility library for ASP.NET Core (both MVC and Razor Pages) websites to easily add and customize breadcrumbs.
https://blog.zhaytam.com/2018/06/24/asp-net-core-using-smartbreadcrumbs/
MIT License
161 stars 77 forks source link

Empty href when creating nested RazorPageBreadcrumbNode #72

Closed giancarloGiuffra closed 4 years ago

giancarloGiuffra commented 4 years ago

Hi, when creating the following node in my razor page:

var breadcrumbNode = new RazorPageBreadcrumbNode("/Lnd/AddInvoice", "Add Invoice")
{
    Parent = new RazorPageBreadcrumbNode("/Lnd/Details", "Details")
    {
        Parent = new RazorPageBreadcrumbNode("/Lnd", "Nodes")
    }
};
ViewData["BreadcrumbNode"] = breadcrumbNode;

I get the following html in the page:

<ol class="breadcrumb border-0 m-0 px-0 px-md-3">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="">Nodes</a></li>
<li class="breadcrumb-item"><a href="/Lnd/Details">Details</a></li>
<li class="breadcrumb-item active">Add Invoice</li>
</ol>

The link for Nodes does not get populated. I have looked into your code and I cannot figure out why that is happening. Do you have any clues? Thanks.

zHaytam commented 4 years ago

Hello,

This is indeed weird, I'm gonna investigate and get back to you as soon as possible.

zHaytam commented 4 years ago

Hello,

When trying your code, I get the following output:

<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/?page=%2FLnd">Nodes</a></li>
    <li class="breadcrumb-item"><a href="/?page=%2FLnd%2FDetails">Details</a></li>
    <li class="breadcrumb-item active">Add Invoice</li>
</ol>

Which means that it's working properly, the links are ?page=X because I don't actually have razor pages with those paths.
Maybe in your case, the razor page /Lnd is mapped to the url /?

Note that SmartBreadcrumbs is only using IUrlHelper.Page to generate the url.

giancarloGiuffra commented 4 years ago

Hi ,

I have reproduced the error starting from the example project in the repo. You can find it here. I forked it, replaced the project with the one from NuGet (version 3.5.1 since I'm using that one), and added the 3 pages in the Lnd directory.

When using the breadcrumb attributes in page AddInvoice, all works fine:

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/Lnd">Nodes</a></li>
<li class="breadcrumb-item"><a href="/Lnd/Details">Details</a></li>
<li class="breadcrumb-item active">Add Invoice</li>
</ol>

Instead when using the manually created nodes, I get:

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/?page=%2FLnd">Nodes</a></li>
<li class="breadcrumb-item"><a href="/Lnd/Details">Details</a></li>
<li class="breadcrumb-item active">Add Invoice</li>
</ol>

I will investigate, but this should not be correct behavior, right?

On a side note, I was creating the nodes manually because I need to pass to /Lnd/Details a query string. Is there a another way to pass the query string?

Thanks.

zHaytam commented 4 years ago

Hello back,

I tried the project you link, the issue is indeed there. In order to fix it, you need to specify the page name in the node's path:

var breadcrumbNode = new RazorPageBreadcrumbNode("/Lnd/AddInvoice", "Add Invoice")
{
    Parent = new RazorPageBreadcrumbNode("/Lnd/Details", "Details")
    {
        Parent = new RazorPageBreadcrumbNode("/Lnd/Index", "Nodes")
    }
};

I guess IUrlHelper needs that information, at least SmartBreadcrumbs always includes the page's name.

On a side note, I was creating the nodes manually because I need to pass to /Lnd/Details a query string. Is there a another way to pass the query string?

Nope, I added manual nodes because of this reason, since you can only pass constants to attributes, so you wouldn't be able to pass a query string that changes.

giancarloGiuffra commented 4 years ago

Thank you very much. That was the problem. Keep up the good work.