11

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?

1
  • 1
    This /confirmemail/{Token}/{UserId} doesn't contain query parameters, it contains route parameters, these are two completely different things. You should be using query parameters, so take out /{Token}/{UserId} from your @page directive and follow Antonio Correia's answer.
    – ataraxia
    Aug 14, 2020 at 17:23

5 Answers 5

28

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

5
  • 1
    In my case this was exactly what I needed to know. Thanks for sharing.
    – Vivendi
    Sep 24, 2019 at 8:37
  • Why do you use TryGetValue and not just ...["Token"]? Feb 16, 2020 at 15:03
  • 3
    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.)
    – R J
    Mar 4, 2020 at 0:56
  • This is a MUCH better answer, I don't know why this isn't the accepted one.
    – ataraxia
    Aug 14, 2020 at 17:16
  • @JensMander TryGetValue avoids KeyNotFoundException if the query parameter is not present: it is common behavior for Dictionary<,> objects. Jun 14, 2021 at 8:32
5

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/

2

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...

1

A new answer to an old question: At the time of January 2022, query string parameters can be processed with the complementary attribute SupplyParameterFromQuery.

[Parameter] [SupplyParameterFromQuery]
public string Token { get; set; }
[Parameter] [SupplyParameterFromQuery]
public string UserId { get; set; }
0

I suggest to use the extension method presented here:

https://chrissainty.com/working-with-query-strings-in-blazor/

I just put more types:

public static class NavigationManagerExtensions
{
    public static bool TryGetQueryString<T>(this NavigationManager navManager, string key, out T value)
    {
        var uri = navManager.ToAbsoluteUri(navManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue(key, out var valueFromQueryString))
        {
            if (typeof(T) == typeof(int) && int.TryParse(valueFromQueryString, out var valueAsInt))
            {
                value = (T)(object)valueAsInt;
                return true;
            }

            if (typeof(T) == typeof(int?) && int.TryParse(valueFromQueryString, out var valueAsNullableInt))
            {
                value = (T)(object)valueAsNullableInt;
                return true;
            }

            if (typeof(T) == typeof(bool) && bool.TryParse(valueFromQueryString, out var valueAsBool))
            {
                value = (T)(object)valueAsBool;
                return true;
            }

            if (typeof(T) == typeof(bool?) && bool.TryParse(valueFromQueryString, out var valueAsNullableBool))
            {
                value = (T)(object)valueAsNullableBool;
                return true;
            }

            if (typeof(T) == typeof(string))
            {
                value = (T)(object)valueFromQueryString.ToString();
                return true;
            }

            if (typeof(T) == typeof(decimal) && decimal.TryParse(valueFromQueryString, out var valueAsDecimal))
            {
                value = (T)(object)valueAsDecimal;
                return true;
            }

            if (typeof(T) == typeof(decimal?) && decimal.TryParse(valueFromQueryString, out var valueAsNullableDecimal))
            {
                value = (T)(object)valueAsNullableDecimal;
                return true;
            }

        }

        value = default;
        return false;
    }
}

regarding the: "Dealing with updates to query string values" part... I did like so:

<a class="dropdown-item" @onclick='() => GotoLink("thepage?intValue=0&boolValue=true&stringValue=blahBlah")'>goGoGo</a>

and the GotoLink method is this:

private void GotoLink(string url)
{
    NavManager.NavigateTo(url, forceLoad: true);
}

by the way the route of the component is cleaner:

@page "/ThePage"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.