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

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();
           }
       }
   }​