The Razor Pages routing using the @page directive seems to rewrite the links.
I’ve created a “ASP.NET Core Web App (Razor Pages)” application using the template:
dotnet new razor -f net8.0
Updating the @page directive in the Index.cshtml page to @page "{id:int?}" allows for routing to /index and /index/1, for example. Unfortunately the link to the Home page, the index page, will show up with the identity after it’s first used.
For example, update the URL to ~/index/1 and visit the page. The page shows up fine. The link to the home page, however, now shows as ~/1 on hover (for instance, https://localhost:7249/1).
This obviously doesn’t matter in this example but it’s affecting a real application I’m developing where the page without an identifier in the main menu is being overwritten by the link to page with the last identifier used so the user can’t navigate to the default page.
Have I done something wrong? Is there some configuration of the routing that isn’t in the default configuration in Program.cs? I expected the routing to work “out of the box”.
The link behavior you’re experiencing is by design. Microsoft’s documentation refers to it as ambient values.
From the current request, routing accesses the route values of the current request
HttpContext.Request.RouteValues. The values associated with the current request are referred to as the ambient values.
The documentation after the above definition, however, is not very helpful. A resource that provides a better explanation is provided in The Anchor Tag Helper page on learnrazorpages.com.
Route Data values for the current request are considered ambient values… This means that they do not necessarily need to be specified when generating links [to the current page].
The Anchor Tag Helper will generate a link to the index/home page, as in your example, using the route data values (i.e. the value of the optional id route data value).
<a asp-page="/Index">Home</a>
results in:
<a href="/1">Home</a>
To override this behavior, you need to explicitly set the value for the asp-route-id route data parameter, as referenced in the learnrazorpages.com link above:
In this case, you only need to specify a value for
asp-route-*if you want to override the ambient value.
In your case, you do not want any route data value to appear in the anchor tag generated by the anchor Tag Helper. Set asp-route-id to an empty string.
<a asp-page="/Index" asp-route-id="">Home</a>
The result:
<a href="/">Home</a>
Additional references
There are references to the change in ASP.NET Core behavior regarding the use of ambient values. This is only for Anchor Tag Helper elements that are not referencing the current page. This SO post asks to preserve ambient values in anchor elements that are to links to different resources from the current page and provides a solution on how to do that.
4
If you want to make the url /index/1 instead of /1. Configure the @page directive like below:
@page "/index/{id:int?}"
@model IndexModel
<a asp-page="index">test</a>
By default, the routing of Index.cshtml is / when application first running. If you want to maintain this behavior, be sure add the following configuration in Program.cs:
app.MapRazorPages();
app.MapFallbackToPage("/", "/Index");
The change url is expected behavior when you use asp-page or @Url.Page.
If you want to make the url unchanged, you need hard coded the url instead of using tag helper or @Url.Page:
<a href="/index">test</a>
8