QueryString in Asp.net Core Blazor

Querystring is generally used for passing data from one page to other page. But in Asp.net Core Blazor very straight forward to read the query string.

Step 1: Create the page from where you will pass the query string data. I have created in index page like this.

@page "/"

<h3>Query string Demo</h3>
<a href="/querystringpage?a=2&b=4">Click Here</a> <br />

<br />
<form action="querystringpage">
    First Num1 : <input name="a" /> 
    Second Num2 : <input name="b" />
    <input type="submit" />

Step 2: Create the page where you are going to read the query string data.

@page "/querystringpage"
@inject NavigationManager nav
@using Microsoft.AspNetCore.WebUtilities

URI: @uri;
<br />

Num1 :@a <br />
Num2 :@b <br />
Sum of Two Num: <b>@c</b>

@code {
    System.Uri uri;
    int a;
    int b;
    int c;
    protected override void OnInitialized()
        uri = nav.ToAbsoluteUri(nav.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("a", out var aVal))
            a = int.Parse(aVal);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("b", out var bVal))
            b = int.Parse(bVal);
        c = a + b;


In the above code, we saw that we are using Microsoft.AspNetCore.WebUtilities namespace, which has the helper method i.e. QueryHelpers to extract the query string value. We have also injected the NavigationManager the url path of page.


In this small demo, we saw that how QueryHelpers method of Microsoft.AspNetCore.WebUtilities namespace simplified our code to read the query string in asp.net core Blazor.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.