blazor- create subpage path extension like "~/product/{itemId:int}/edit"

Question

The title need to be changed; Because I don't know how to describe my problem.
Lets say we have this pages:

localhost:5000/counter
localhost:5000/products/{itemId:int}
localhost:5000/employee/{userId:int}

The idea is to create a universal subpage "/Edit" like:

localhost:5000/counter/Edit
localhost:5000/products/{itemId:int}/Edit
localhost:5000/employee/{userId:int}/Edit

The page should lode as it was but with places to edit that specific (item, user or the parameter) in the page.
Another example could be "/Report"
The main goal is that the page base url do not change! => This is not okey ~~localhost:5000/Edit/user/{userId:int}~~.
The main problem that I'm getting is that I can't add parameters before the subpage-Extension. Repeated code to check the url in every page will be pain.
I'm making my website like File-Explorer, the path is like this:

localhost:5000/Folder/{path:string}

// will show => list of folders and files
//     
//        or => a file => ImgeFile-view  component
//                     => PdfFile-view   component
//                     => wordFile-view  component
//                     => video.....

Each component have it's own properties even the folder. so if i'm logged-in as admin and i add /edit to the end of any url i need to be able to edit the content and send it back to the DB.

Next step will be to change the (html or blazor) tags to input with the tags id and interface's.
Please comment with your ideas or objections.

clamchoda · Answer

Perhaps I'm misunderstanding the question but you can have multiple paths for one page. On the Edit page include all three paths;

@page "/counter/Edit"
@page "/products/{itemId:int}/Edit"
@page "/employee/{userId:int}/Edit"

(Edit Page Markup)

@code {

    [Parameter]
    public int itemId { get; set; } 

    [Parameter]
    public int userId { get; set; } 
}

You don't need to check the url in every request. It's a bit yucky but if itemId and userId are both 0 than you know your in counter. If itemId is greater than 0 you know your in products and if userId is greater than 0 you know your in employee.

MrC aka Shaun Curtis · Answer

exploring how to make a custom router sounds fun, do you have anything that will help me start with it?

The .Net Core Router code is here in the aspnetcore Github repository - https://github.com/dotnet/aspnetcore/blob/main/src/Components/Components/src/Routing/Router.cs.

It's not that easy to lift "as is" because a lot of the support classes are internal assembly classes. You'll have to copy and refactor a lot of classes to get it running.

I've already written a custom router, so done the work. Your welcome to lift the code. You can find everything in a Github repo here - https://github.com/ShaunCurtis/Blazr.Demo.EditForm.

The actual library detail is here - https://github.com/ShaunCurtis/Blazr.Demo.EditForm/tree/master/Blazr.NavigationLocker

blazor- create subpage path extension like "~/product/{itemId:int}/edit"

2 Answers