DEV Community

Breadcrumbs within Razor page .Net Core

Chris Cooper on April 18, 2020

I'm still quite new to Razor pages (not mvc) and wanted a Breadcrumb navigation bar on my pages, which was created dynamically. I looked around but...
Collapse
 
bunda3d profile image
Vom Com

Hi Chris,

Can you explain how to add the breadcrumbs directive to the shared "_Layout" file so it can show up on all pages that use that layout?

I downloaded your example from the github repo, and when I tried to move the breadcrumbs nav directive from "privacy" to the layout view, it doesn't work...I'm getting errors. Can you think of a solution?

Thanks!

Collapse
 
chriscooper01 profile image
Chris Cooper

Can you please share the error?
You would need to inherit and load the breadcrumbs on each pagemodal, that used the layout you have added the Breadcrumb.

Collapse
 
bunda3d profile image
Vom Com • Edited

Here's a screenshot of the browser stack trace.

(Edited because it doesn't seem to be showing the img attachment)

dev-to-uploads.s3.amazonaws.com/i/...

It's after I moved the declaration to the layout page and added a new razor page named "test1", navigating to it from the index page is the action that triggers this error.

Thread Thread
 
chriscooper01 profile image
Chris Cooper

So its when you acces the new page. On the pagemodel for test1, have you inherited the BreadCrumbsExtended class? Then on the get for the page have you called the SetBreadCrumbs() method?

This will be needed on each page that uses this layout.

Thread Thread
 
bunda3d profile image
Vom Com

Chris, thanks for the prompt replies. I just got pulled into something else, I'll try to get back to this soon and let you know if that was the problem (sounds right... I saw the Get action on the Privacy page 'code behind' sheet, but can I put an action like that on a _Layout view?) I think I was extending the correct class, but I'm not sure I know how to implement the functionality on a _Layout page. Maybe it would make more sense to do on a _Partial view or Component? And then I could more easily execute code in there, while calling the partial or component (which contains the breadcrumb menu line) from the _Layout view, which could access the current active page/view being routed to/viewed?

I'm just trying to get a breadcrumb nav to work without hard-coding every page. I've tried several examples, but one feature or another seems to fail in my solution (has a shared "Presentation Layer" project that compiles to a nuget pkg so other apps can install it and have a consistent front-end and stay DRY). This seems to make it difficult to support the circumstances of loading and hosting other assemblies in .NET Core, some with razor pages/routing and/or controllers/views. Getting more "dynamic" breadcrumb navigation to work as a silver bullet for those use cases has been confusing... Any tips on what to try?

Thread Thread
 
chriscooper01 profile image
Chris Cooper

Hi
Don't think you can run the action on the layout, it needs to be on the code-behind for each page. But if you do try and it works let us now, it would be good to know.

You could go with the partial view, but it would need a partial view with a code behind.

When you do get back to it, let me know your end result, solution.

Thanks, hope this solution helps you

Thread Thread
 
chriscooper01 profile image
Chris Cooper

With tips, I did not look at nugets or third part codes. I just went ahead on doing my own. So now able to give any tips sorry.

But if you have the partial view working, it should be dynamic for you. You might want to alter the code to improve the display name.

Collapse
 
tommy_klausen_0842480edd2 profile image
Tommy Klausen

Hi Chris! Do you know how I can translate/convert/map the class names to something more meaningfull og readable for the user? My class names arent really understandable for which page were talking about in the breadcrumb.

Collapse
 
debadattaratha profile image
DebadattaRatha • Edited

Chris, Can you paste a link to this solution on a .net core razor page solution on git here ?

Collapse
 
chriscooper01 profile image
Chris Cooper

Hi
I've published it to GitHub
github.com/chriscooper01/BreadCrumbs

Collapse
 
chriscooper01 profile image
Chris Cooper • Edited

Hi
I will publish this to my github tomorrow as it does not seem to be there. Once done, I will add the repo url here.