Multiple query string parameters in Blazor routing

blazor multiple route parameters
blazor dynamic routing
blazor url encode
blazor pass parameter to page
blazor href
queryhelpers
blazor parameters
blazor programmatic navigation

I have multiple working examples in my current project of retrieving 1 query parameter from the url however when trying to follow the same convention for multiple url params, I'm receiving the following error in the chrome debugger console:

Error: System.InvalidOperationException: 'Router' cannot find any component with a route for '/confirmemail'.

my page route is defined as:

@page "/confirmemail/{Token}/{UserId}"

and the @functions{...} section contains the following properties:

[Parameter]
string Token { get; set; }
[Parameter]
string UserId { get; set; }

I am trying to retrieve the query string parameters for a url that looks like this:

http://localhost:50466/confirmemail?Token=SomeReallyLargeToken&UserId=SomeGuidUserId

How can I achieve this?

Could you try?

http://localhost:50466/confirmemail/SomeReallyLargeToken/SomeGuidUserId

I think it should work.

UPDATE: If you want to get values exactly from query parameters good example is here https://learn-blazor.com/pages/router/

Multiple query string parameters resulting in Router failure · Issue , Multiple query string parameters resulting in Router failure #15336 mkArtakMSFT transferred this issue from dotnet/blazor on Oct 23, 2019. I think that wraps things up. We can now easily access query string values from any of our components both on initial load and when the URL is updated. Summary. In this post I talked about working with query strings in Blazor. I started off by describing what query strings are and why you would choose to use them over route parameters.

For anyone interested in how to pass and get the parameters in the query string style

http://localhost:50466/confirmemail?Token=SomeReallyLargeToken&UserId=SomeGuidUserId

the page route doesn't change

@page "/confirmemail/"

and you should get the parameters like

protected override void OnInitialized()
{
     var uri = navigationManager.ToAbsoluteUri(navigationManager.Uri); //you can use IURIHelper for older versions

     if(QueryHelpers.ParseQuery(uri.Query).TryGetValue("Token", out var token))
     {
         var token_par = token.First();
     }

     if(QueryHelpers.ParseQuery(uri.Query).TryGetValue("UserId", out var userid))
     {
         var userid_par = userid.First();
     }
}

Remember to add the following

@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.WebUtilities @*for QueryHelpers*@

I'm using preview-9

Working with Query Strings in Blazor, In this post, I talk about query strings in Blazor. We start by If we wanted to use route parameters we'd have to use multiple route templates. Blazor is a programming framework to build client-side Web applications with .NET. It allows .NET developers to use their C# and Razor knowledge to build interactive UIs running in the browser

This ( /{Token}/{UserId} ) is not a pattern of query string. It is a part of the route template url(route parameters). This is a query string: ?Token=SomeReallyLargeToken&UserId=SomeGuidUserId.

I'm not sure about it, right now, but this may work: http://localhost:50466/confirmemail/SomeReallyLargeToken/SomeGuidUserId

If you wish to access query parameters (not route parameters), you want to use the IUriHelper like this:

var uri = new Uri(UriHelper.GetAbsoluteUri());

Note that you should parse the returned value... I once saw a utility created by the Blazor community that does it.

Hope this helps...

Working With Query Strings In Blazor, When passing data in a URL within a Blazor application, most of the time you will define route templates that incorporate parameter  I have multiple working examples in my current project of retrieving 1 query parameter from the url however when trying to follow the same convention for multiple query string params, I'm recei

ASP.NET Core Blazor routing, If we require that component can render from multiple route values, we You can also capture query string or query parameter value when  Working with query strings may not be a common requirement in Blazor applications, but if you need to manage legacy routes or incoming URLs that you have little control over that feature query strings, the tools that you need are to be found in the Microsoft.AspNet.Core.WebUtilities package.

Routing In Blazor, A query string stores values in the URL that are visible to users. It is mostly You can pass multiple parameters through the URL and access it via queryhelpers,. 1. Install the How do I pass DateTime value as the route in Blazor? How do I  In this article of the Blazor series, we learned how routing works in Blazor. While routing in Blazor is still limited as compared to other client-side frameworks, it is expected to have more features in the coming days. However, as we saw, you can still build basic web apps without any issues.

How do I send multiple values using a query string in Blazor , How do I pass DateTime value as the route in Blazor? How do I get the current page title in Blazor? How do I send multiple values using a query string in Blazor​? Optional route parameters aren’t supported explicitly by Blazor, but the equivalent can be easily achieved by adding more than one @page declaration on a component. For example, alter the standard Counter.razor page to add an additional URL. @page "/counter" @page "/counter/{CurrentCount:int}" Change the int currentCount field to a parameter, like so

Comments
  • In my case this was exactly what I needed to know. Thanks for sharing.
  • Why do you use TryGetValue and not just ...["Token"]?
  • Just to add to the answer above, if you're using wasm, note that you need to install nuget package Microsoft.AspNetCore.WebUtilities in client project (since it's not part of default blazor package.)