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 placeholders, passing values as URL segments. You might also find that you need to be able to work with query string values, so how do you do that in a Blazor application?

To try this out, add a new Razor component to a Blazor WASM project named QueryStringDemo.razor. If you want to work with URLs in a Blazor application, you need to use the NavigationManager component which is registered as a service by default. So the next step is to inject it into the component:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

@code{

}

Then add a button wired up to an event handler that gets executed when the button is clicked:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

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

@code{

}

Next, you will add an implementation for the Navigate method that's been assigned to the button's onclick event. The implementation will add a query string to the current URL, and navigate the user to the amended URL. You could just use string interpolation/concatenation to generate the query string, but there are some helper methods available within the ASP.NET Core framework for working with query strings. They are not natively available to Blazor apps, so you need to install an additional package:

PM> install-package Microsoft.AspNetCore.WebUtilities

Now add a using statement to bring the Microsoft.AspNetCore.WebUtilities namespace into scope. You could do this on a component by component basis. Better yet, you can do this in the _Imports.razor file that sits in the root of your application. Then the namespace will be available to all components that need it:

@using Microsoft.AspNetCore.WebUtilities

Having done that, you can now provide an implementation for the Navigate method that uses both the injected instance of the NavigationManager and a method from the WebUtilities package:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

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

@code{
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
    }
}

The QueryHelper.AddQueryString method, which comes from the WebUtilities package that you just installed, ensures that name/value pairs are encoded properly and added to a query string. The NavigateTo method provided by the NavigationManager navigates the user to the specified URL. If you run the application, navigate to /querystring-demo and click the button, you should see that the URL in the browser address bar has changed:

query string

Now that you can generate query string values, it's time to look at reading them. To demonstrate this, add a private property to the component to represent the name value and some HTML to render the value:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

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

<div>Name = @name</div>

@code{
    string name { get; set; }
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
    }
}

Finally, amend the Navigate method to parse the URI and obtain the query string value:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

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

<div>Name = @name</div>

@code{
    string name { get; set; }
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
        
        var uri = navManager.ToAbsoluteUri(navManager.Uri);

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

You can get at a query string safely if you reference the Query property of the Uri data type. The Uri property of the NavigationManager rather confusingly gets the URL as a string. So the first step is to convert the string to a Uri type, which is accomplished courtesy of the ToAbsoluteUri method of the NavigationManager.

The ParseQuery method returns a Dictionary<string, StringValues>. You use the TryGetValue method to obtain the item with the key "name" if it exists. Finally, the value is assigned to the private field that you added earlier.

Summary

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.