Blazor Route Parameters
In this article, we are going to discuss on route parameters in blazor. A route parameter is defined in the URL by wrapping its name in a pair of { braces} along with @page declaration.
Example; @page “/employee/{employeeId}
For this tutorial I’m using Microsoft Visual Studio Community 2022 (64-bit) – Preview with Version 17.2.0 Preview 5.0.
Parameter value capture
Value of a parameter can be captured by simply adding a property with the same name and decorating it with an attribute [Parameter]
[Parameter]
public string FruitCode { get; set; }
For demo purposes, I’m using the Counter.razor component in which I am adding three anchor tags with parameter value
<li><a href="/counter/Orange">Orange</a></li>
<li><a href="/counter/Mango">Mango</a></li>
<li><a href="/counter/Apple">Apple</a></li>
The route will be looks like below
@page “/counter”
@page “/counter/{FruitCode}”
Here {FruitCode} is the parameter
When you click on Orange – the value “Orange” will be passed as parameter in the URL
If you look at the image, in the address bar, you can see that “Orange” has been passed and the same has been displayed as “Selected Fruit: Orange” The entire code from Counter.razor component has been given below for reference.
