Blazor @page route url define with variable

Question

I have a question for Blazor Server Side.

I want to @page route url define with variable or property.

I can use now with below default method

@page "/route-url"

<h1>Page Test</h1>

@code {
    
}

But i want use like as below method

@page MenuItem.Role

<h1>Page Test</h1>

@code {
    
}

I'm tried above method then throwed exception. Like as below exception.

C:\Projects\TestBlazorProject\Pages\TestPage.razor(1,7): error RZ1016: The 'page' directive expects a string surrounded by double quotes. [C:\Projects\TestBlazorProject\TestBlazorProject.csproj]

How to define @page route url with any different variable or any class property?

Answer 1

Can this be done?

Yes

How?

Page file

@attribute [Route(PageRoute.TaskList)]

<div>PAGE HTML HERE</div>

@code{ ... }

PageRoute.cs:

public static class PageRoute
{
    public const string TaskList = "/route-url";
}

Explanation

The page directive gets compiled down to an attribute and has the same restrictions as C# attributes.

You can use the @attribute with the [Route] attribute and use string concatenation instead of string interpolation to define a constant for the route, since that's what the C# compiler supports.

Why would anybody do this?

This is a good coding practice, because you are not hardcoding the page/component name in multiple places, but only in one place.
So one fine day when you manager asks to change page name "Earth" to "Planet3",
you just change it in 1 place, and be 98% sure that your app wont crash because of it.

Answer 2

Building off of the above you can I was able to get this to work with the code isolation approach.

Client/Pages/Foo/
----Index.razor
----Index.cs

namespace Client.Pages.Foo;
[Microsoft.AspNetCore.Components.RouteAttribute(Path)]
public partial class Index
{
    public const string Path = "/Foo";
}

Answer 3

@page isn't C#, it's Razor talk. Razor files are pre-compiled into c# files during compilation.

As an example, this is the important section of the C# pre-compiled file for Index.razor (Index.razor.g.cs):

[Microsoft.AspNetCore.Components.RouteAttribute("/")]
public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
{
    #pragma warning disable 1998
    protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
    {
        __builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");
        __builder.OpenComponent<Blazor.Starter.Shared.SurveyPrompt>(1);
        __builder.AddAttribute(2, "Title", "How is Blazor working for you?");
        __builder.CloseComponent();
    }
    #pragma warning restore 1998
}

Note that @page has become a compile time attribute [Microsoft.AspNetCore.Components.RouteAttribute("/")]. It's fixed at compiletime, you can't change it at runtime.

Routes are set this way because the router builds a routemap - essentially a dictionary of route url/component class pairs - when the application loads by trawling the application assembly for any component classes with a Route attribute. On a routing event it reads the new url, finds the component class and loads it into the layout. Any variables - stuff in curly brackets - get passed into the component as Parameters.

You haven't made it clear what the line below is supposed to do:

@page MenuItem.Role

1. Do you want to capture a variable supplied in the route into MenuItem.Role?
2. Do you want to set this page's route to the value in MenuItem.Role?

If 1, either the other answers will work for you. If 2, you'll need to consider writing your own router. A subject beyond a simple answer here.

Answer 4

I think you can achieve that by following.

@page "/{Role}"

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