How do I route in client-side blazor with a string route parameter containing dots (.)?

Question

Hi there stackoverflow!

I am using Client side Blazor and have stumbled upon a tricky section regards to routing with strings and dots (.). I wish to route from an admin control page to a page with the following route: @page "/ManageGradingExamResults/{StudentEmail}". I tested such with this request: https://localhost/ManageGradingExamResults/[email protected], but I get a not found. If I change the razor route to @page "/ManageGradingExamResults/{*StudentEmail}" I end up with the following exception: System.InvalidOperationException: Invalid template 'ManageGradingExamResults/{*StudentEmail}'. The character '*' in parameter segment '{*StudentEmail}' is not allowed.. I tried that due to the similarities in cshtml pages.

I have found that I can route with integers but have had no luck with strings. I also have come across this Microsoft doc explaining rout params and suggesting the ** in my page route. This allows me into my page however i then need to use the ? before my email in the request, the page does not load with my data as I can see it did not pull the parameter into my variable. Any suggestions or help with routing in client side Blazor would be greatly appreciated!

Request Code:

NavigationManager.NavigateTo($"/ManageGradingExamResults/?{student.Email}");

Request URL:

https://localhost/ManageGradingExamResults/[email protected]

Razor page route:

@page "/**ManageGradingExamResults/{StudentEmail}"
@page "/ManageGradingExamResults"

My Variable:

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

Answer 1

From the documentation you have shared:

In Blazor Server apps, the default route in _Host.cshtml is / (@page "/"). A request URL that contains a dot (.) isn't matched by the default route because the URL appears to request a file. A Blazor app returns a 404 - Not Found response for a static file that doesn't exist. To use routes that contain a dot, configure _Host.cshtml with the following route template: @page "/{**path}"

Based on routing in .net core

During link generation, the routing system encodes the value captured in a double-asterisk (**) catch-all parameter (for example, {**myparametername}) except the forward slashes

So this should do the trick for you

@page "/ManageGradingExamResults/{**StudentEmail}"

Answer 2

Blazor documentation (https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0#routing-with-urls-that-contain-dots) suggests modifying the Fallback file route on the server.

This is not possible when hosting from Azure Blob static websites or Amazon S3. Since the assumption that a dot is a file when it is on the right most end of the uri, consider moving the parameter.

Param with dot on the right-most end of the URI. This will result in 404 since the StudentEmail param contains a dot and will be routed as a file (and assuming you cannot modify the server Startup.Config).

@page "/ManageGradingExamResults/{StudentEmail}"

Move the param so it is not on the right most end of the URI: This will route correctly and pass the StudentEmail param to the component.

@page "/GradingExamResults/{StudentEmail}/Manage"