I am trying to do navigation in my client-server application. I'm trying to make a small online catalog

I want that when navigating through categories, the path is displayed in the URL:

https://test.com/
https://test.com/controllers
https://test.com/controllers/for-media-screens

https://test.com/
https://test.com/phones
https://test.com/phones/nokia

And if you know the whole path except the last link, you can write the @page "/phones/{model}" in the Razor component

Then what to do when the whole path is unknown? The @page directive cannot contain an array with values that will be expanded into a link.

Do you have any ideas how this can be organized?

I thought cascading parameters would work, but they don't work with @page.

I also thought that it was possible to store the full path to the product in the database, but I'm not sure that this is the best solution.

UPD: @KirkWoll, In principle, all categories are unknown

Well, look what I mean There can be a huge number of categories and subcategories of different levels:

https://site.ru/1-level/2-level/.../n-level/product

When we moved to the 1-level directory, our URL looks like /1-level. From there we can go to the next level of categories and the URL will look like /1-level/2-level. And so on.

That is, we know specifically only the domain

If, relatively speaking, we had only 1 category on our site without any subcategories, then we could simply strictly set its URL in the page directive of the category page template, for example @page "/category", and write @page "/category/{Id:int} in the product template

And the question is how to write the code in which the previous URL will be passed so that the link looks like https://site.ru/1-level/2-level/.../n-level/product

That is, I need, if it were possible, to write in the template of the category @page "/{?1}/{?2}.../{n}", and in the product template @page "/{?1}/{?2}.../{n}/{Id:int}"

CodePudding user response：

You are trying to achieve something a bit out of the box in terms of supporting routes with arbitrary levels of depth. One way to do that would be to use the "catch all" routing facility. It's basically a way to consume all possible routes given a prefix. From the docs:

@page "/catch-all/{*pageRoute}"

@code {
    [Parameter]
    public string PageRoute { get; set; }
}

For the URL /catch-all/this/is/a/test with a route template of /catch-all/{*pageRoute}, the value of PageRoute is set to this/is/a/test.

With that, you should be able to consume PageRoute, parse it, and do what you need to support your routing requirements.