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:
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.
