Unlocking Path and Query Parameters in Blazor: A Guide
Written on
Understanding Path and Query Parameters
As our applications expand, we often create multiple pages, which may include lists or tables, as well as detailed displays like invoices. In these situations, it’s vital to know how to access route parameters to retrieve complete objects.
For pages that feature tables, it’s common to need sorting or searching capabilities. Storing these parameters in the URL is an efficient method, as it enables users to share specific page states with colleagues or friends, ensuring everyone views the same page with data sorted or filtered according to given criteria.
Accessing Path Parameters
Blazor routes can incorporate case-insensitive named parameters, allowing easy access to passed values by binding the parameter to a property in the code block using the [Parameter] attribute. For example:
@page "/users/{Id:int}"
Users page
User id: @Id
@code {
[Parameter]
public int Id { get; set; }
}
You can also use other data types like bool, datetime, decimal, double, float, guid, and long instead of int. These are known as route constraints. Route constraints ensure that the correct data type is provided for a given parameter. If a request with an invalid parameter value is made, it won’t match that route, prompting the system to evaluate other routes. If none match, a 404 error is returned. Note that route constraints operate under invariant culture; hence, your URLs should not be localized.
Query Parameters and Their Management
To handle a query parameter that should default to a certain value when not provided, you can append the parameter in the route using the OnParametersSet method. This approach allows you to set or update a default value as necessary.
@page "/users/{Id:int}"
Users page
User id: @Id
Sorting by: @SortBy
@code {
[Parameter]
public int Id { get; set; }
[SupplyParameterFromQuery(Name= "SortBy")]
public string SortBy { get; set; } // new
protected override void OnParametersSet() // new
{
SortBy ??= "Nothing";}
}
Engage with Our Community
If you found this information helpful and wish to join our expanding community, be sure to hit the follow button. Let's embark on this journey of knowledge together! Your thoughts and feedback are always appreciated, so feel free to share.
Thank you for taking the time to read this. Before you leave, consider showing your support by clapping and following the writer! 👏 Follow us on X | LinkedIn | YouTube | Discord. Explore our other platforms: In Plain English | CoFeed | Venture.