Working With Query String (Or Query Parameter) In Blazor

Introduction

 

The query string is part of the URL that contains values for specific parameters. In other words, it is a collection of key-value pairs encoded into the URL. The most common use of the query string is to pass data between two routes as Http is stateless protocol. Using “?”, you can separate the query string from the URL. The first part of the query string is key, and each key-value is separated by a “=”. If there is more than one key-value pair you need to define into a URL, then "&" is used to separate them.

 

The NavigationManager service is the default service in Blazor that provides an abstraction for querying and managing URI navigation. The Microsoft.AspNetCore.WebUtilities library provides helpesr (QueryHelpers class) to deal with query string. The QueryHelpers class has method "ParseQuery" that returns Dictionary<string, StringValues> and the returned dictionary contains all query strings in the URL.

 

In the following example, I am going to update the counter page that comes with default template to look at the inital count value from query string. I have given url "/counter?initialCount=25", so the counter starts from 25.

@page "/counter"
@using Microsoft.AspNetCore.WebUtilities;
@using Microsoft.Extensions.Primitives;
@inject NavigationManager navManager

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    protected override void OnInitialized()
    {
        StringValues initCount;
        var uri = navManager.ToAbsoluteUri(navManager.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("initialCount", out initCount))
        {
            currentCount = Convert.ToInt32(initCount);
        }

    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

 

Why not use route parameters instead of query string?

 

The query string provides you more flexibility over the route parameters when you need to define parameters optionally and multiple parameters. It is very difficult to define multiple optional route parameters and navigate to route. For example, I have employee grid and I want to search employee by firstname, lastname, and age so, route can be defined as:

@page "/getemployees"
@page "/getemployees/{firstname}"
@page "/getemployees/{firstname}/{lastname}"
@page "/getemployees/{firstname}/{lastname}/{age}"

The problem here is when a user wants to search employee by firstname and age then route can look like "/getemployees/test/18" but it does not match with correct route. So now, you need to define another route that matches for parameter value firstname and age. It means that you need to define routes in every combination. It might be difficult when there are 3 or more parameters. This problem can be resolved with query string.

 

Passing parameter value as query string when redirecting

 

The Microsoft.AspNetCore.WebUtilities.QueryHelpers has a method "AddQueryString" that appends your key-value pair as a query string in to your URL. You can navigate to another component by using NavigationManager.NavigateTo method.

 

In the following example, I have added firstname and lastname in query string and redirected to another Blazor component.

private void NavigateToComponent()
{
    var query = new Dictionary<string, string> {
        { "firstname", "Jignesh" },
        { "lastname", "Trivedi" }
    };
    navManager.NavigateTo(QueryHelpers.AddQueryString("/anotherexp", query));
}

 

Summary

 

Retrieving parameter values from the query string may not be a common requirement in Blazor apps, but using the method described above, you can work with query string in Blazor app. This method is common for both Blazor server app and Client app. You can retrieve/set query string parameters using Microsoft. AspNet.Core.WebUtilities.QueryHelpers class.