HOWTO: Add Dynamic Routing in Blazor

Question

HOWTO: Add Dynamic Routing in Blazor

Matthew Holton 331

Hello,

I am looking to add dynamic routing to my Blazor server app, is this possible? Will it be possible in 6.0?

To be more clear, I have a page component (Browse.razor) that I will use to list results in a grid. When a user navigates to either /accounts or /orders, I would like this component used. I know I can do this with the @Anonymous directive, but I would like to configure this in configuration so that I may configure other uri's for this. In other words, I would like to have a completely configurable navigation that reuses a common component (Grid or Form).

I am looking to port an existing application bit by bit over to Blazor. My BA's understand the application well enough that if I were to provide them the application shell and framework to configure the navigation, API calls, validation rules and layout templates - they would then be able to reconstitute a new rendition of the existing application as a Blazor one.

It seems to me that while routes is just a collection, the @Anonymous directive is required since Blazor generates composite code during the build process. There doesn't see to be a way to assign additional routes on a page post deployment.

For now, I can use "/{area:string}/browse/{view: string}/{filters:string}" or "/{area:string}/edit/{formname: string}/{parameters:string}" for the uri and go from there. I was just wondering if there was a mechanism to add these patterns post build.

Thanks

Anonymous

2021-11-03T06:19:29.073+00:00

Hi @Matthew Holton

Do you mean you want to configure the Custom route constraints? From the article, it seems that it applies to the Asp.net Core MVC/API application, instead of the Blazor application.

For the Asp.net core Blazor routing, you can refer this article: ASP.NET Core Blazor routing. From the article, we can see that: When a Razor component (.razor) with an @Anonymous directive is compiled, the generated component class is provided a RouteAttribute specifying the component's route template. When the app starts, the assembly specified as the Router's AppAssembly is scanned to gather route information for the app's components that have a RouteAttribute. So, I don't think we change the route configuration at runtime. Besides, here is an article about Adding Dynamic Routing, Layouts and RouteViews to the Blazor App Component, you can refer to it.

1 answer

Your answer

Anonymous

2021-11-03T06:19:29.073+00:00

Hi @Matthew Holton

Do you mean you want to configure the Custom route constraints? From the article, it seems that it applies to the Asp.net Core MVC/API application, instead of the Blazor application.

For the Asp.net core Blazor routing, you can refer this article: ASP.NET Core Blazor routing. From the article, we can see that: When a Razor component (.razor) with an @Anonymous directive is compiled, the generated component class is provided a RouteAttribute specifying the component's route template. When the app starts, the assembly specified as the Router's AppAssembly is scanned to gather route information for the app's components that have a RouteAttribute. So, I don't think we change the route configuration at runtime. Besides, here is an article about Adding Dynamic Routing, Layouts and RouteViews to the Blazor App Component, you can refer to it.

Answer 1

Bruce Barker 801

I'm not sure your immediate goal. It appears you want your site to part blazor and part razor.

see:

https://www.meziantou.net/integrating-blazor-components-into-razor-pages-and-mvc-apps.htm

Matthew Holton 331 Reputation points

2021-11-02T20:26:08.397+00:00

Thanks for your response.

I am not sure how this gets me to my solution. Perhaps I don't know enough about razor. I am coming from the desktop/webforms world.

Given that I have a component with a grid (e.g. GridView.razor) that renders the grid dynamically (headers, data, context menu, toolbar). I would like to have it be used when the user navigates to any listing page:
e.g.
/accounts
/orders
/users
or
/crm/accounts
/ofm/orders
/security/users

I think that pattern matching on the page directive may be the way I need to go. the challenge comes in if I had a need to use a pattern like @Anonymous "/{viewname:string}" as that would be too generic and would match on something like "/configuration". So I would like inject into the route collection something like ("/accounts", typeof(MyNamespace.Shared.GridView)) and ("/orders", typeof(MyNamespace.Shared.GridView)) - all of this I could read from configuration.

The goal is to allow this to occur at runtime via configuration so that I wouldn't have to perform a release each time a new page is added. At worst, I would just need to restart the app.

Does that make more sense? Does razor allow me to do this?

Share via

HOWTO: Add Dynamic Routing in Blazor

1 answer

Your answer