Live Chat Icon For mobile
Live Chat Icon

How do you get the query parameter from the URL using NavigationManager in ASP.NET Core Blazor?

Platform: Blazor| Category: Routing

Generally, a query string stores values in a URL that are visible to users. It is mostly used to pass the data from one page to another.

In Blazor, the query string can be added using NavigationManager. To access query parameter:

  1.  Install the package Microsoft.AspNetCore.WebUtilities from NuGet.
  2. Use the QueryHelpers.ParseQuery.TryGetValue method.
@page "/queryparam"
@inject NavigationManager UriHelper

<h3>Query Paramter Demo</h3>

<button @onclick="Navigate">Click</button>

<div>Id = @Id</div>

@code {


    string Id { get; set; }

    void Navigate()
    {
        var query = new Dictionary<string, string> { { "Id", "1001" } };

        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));

        var uri = navManager.ToAbsoluteUri(navManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("Id", out var param))
        {
            Id = param.First();
        }
    }
}

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.