So, let’s start.<\/p>\n
Project Preparation<\/h2>\n
We are going to create a new Blazor WebAssembly project:<\/p>\n
As soon as we create this project, we are going to create a new For now, we are just going to add a route to this component:<\/p>\n We are going to use this component to show you how to read and display query strings in Blazor WebAssembly.<\/p>\n But first, we have to send the query string parameters to it.<\/p>\n We can send query string parameters in multiple ways in Blazor WebAssembly.<\/p>\n The first way is the common one we use in any HTML page with an anchor element. To show it, let’s modify the Basically, we use the anchor element with the As soon as we click the link, the app redirects us to the Good.<\/p>\n Now, this is a manual way of passing query string parameters to a component. But sometimes we have to execute some sort of business logic and then create our URI with query parameters. In these situations, it is obvious that we can’t hardcode query strings inside the URI. What we can do is use the Let’s see how to do that.<\/p>\n Before we start, we have to install the This is a great library that helps us working with forms, multipart messages, and query strings.<\/p>\n After the installation, we can modify the In the HTML part, we add a Now, if we start our app, and click the button, we are going to see the same result as we did with the previous example:<\/p>\n Excellent.<\/p>\n Now it’s time to learn how to read query strings in Blazor WebAssembly.<\/p>\n To show you how to read query strings in Blazor WebAssembly, we are going to modify the Here we use the same namespace and inject the same service as we did in a previous example. Also, we display the value of the After the conversion, we extract the query parameter with the Now, if we start the app, and click the link or button, we are going to see the extracted value on the screen:<\/p>\n Of course, this works with multiple parameters as well.<\/p>\n To test this, let’s modify the And also the Now we can start the application and press the link or button:<\/p>\n We can see both parameters displayed on the page. But let’s improve this solution a bit.<\/p>\n Right now, we have only two query string parameters and the code for reading them isn’t that long. But what if we had more query parameters? Our code would become repetitive and consequently harder to maintain. To avoid that, we can make a cleaner solution by introducing extension methods.<\/p>\n Let’s see how to do that.<\/p>\n First, we are going to create a new We extend the Now, we can return to the As you can see, this is a much better and cleaner solution.<\/p>\n If we test it, we are going to get the same result:<\/p>\n![\"Blazor](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/01-Blazor-WebAssembly-Project-Creation.png\")
<\/a><\/p>\nQueryStringDisplayDemo<\/code> component under the Pages<\/code> folder:<\/p>\n![\"Query](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/02-Query-Strings-in-Blazor-WebAssembly-example-demo-component.png\")
<\/a><\/p>\n@page \"\/query-string-display\"\r\n\r\n<h3>QueryStringDisplayDemo<\/h3>\r\n\r\n@code {\r\n\r\n}<\/pre>\nSending Query Strings in Blazor WebAssembly<\/h2>\n
Index.razor<\/code> component:<\/p>\n@page \"\/\"\r\n\r\n<h1>Hello, world!<\/h1>\r\n\r\nWelcome to your new app.\r\n\r\n<p>\r\n Click <a href=\"query-string-display?name=John\">here<\/a> \r\n to send a query string parameter to the component.\r\n<\/p><\/pre>\n
href<\/code> attribute to navigate to the QueryStringDisplayDemo<\/code> component and pass a single query string parameter to it. If we start the app, we are going to see a link on the Home page:<\/p>\n![\"Using](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/03-Using-anchor-element-to-send-query-strings-in-Blazor-WebAssembly-1.png\")
<\/a><\/p>\nQueryStringDisplayDemo<\/code> component with the query parameter applied to the URI:<\/p>\n![\"Query](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/04-Query-string-parameter-inside-the-URI-e1605521749453.png\")
<\/a><\/p>\nNavigationManager<\/code> service.<\/p>\nUsing WebUtilities and NavigationManager<\/h3>\n
Microsoft.AspNetCore.WebUtilities<\/code> package:<\/p>\nPM> Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0<\/code><\/p>\nIndex.razor<\/code> file:<\/p>\n@page \"\/\"\r\n@using Microsoft.AspNetCore.WebUtilities\r\n@inject NavigationManager NavManager\r\n\r\n<h1>Hello, world!<\/h1>\r\n\r\nWelcome to your new app.\r\n\r\n<p>\r\n Click <a href=\"query-string-display?name=John\">here<\/a>\r\n to send a query string parameter to the component.\r\n<\/p>\r\n\r\n<p>\r\n Click the button to send a query string parameter with NavigationManager\r\n <button type=\"button\" class=\"btn btn-info\" @onclick=\"Navigate\">Send<\/button>\r\n<\/p>\r\n\r\n@code {\r\n private void Navigate()\r\n {\r\n var queryParams = new Dictionary<string, string>\r\n {\r\n [\"name\"] = \"John\"\r\n };\r\n\r\n NavManager.NavigateTo(QueryHelpers.AddQueryString(\"query-string-display\", queryParams));\r\n }\r\n}<\/pre>\nusing<\/code> directive for the WebUtilities<\/code> namespace and inject the NavigationManager<\/code> service. Also, we create an HTML markup with a single button with a @onclick<\/code> event. Then in the code part, we create a Navigate<\/code> method. Inside we create a single dictionary and populate it with our query parameter. Finally, we use the NavigationManager’s NavigateTo<\/code> method to navigate the user to the required location. The QueryHelpers.AddQueryString<\/code> method, which comes from the WebUtilities<\/code> package, helps us adding the query string parameter to the URI.<\/p>\nMicrosoft.AspNetCore.WebUtilities<\/code> package to send query string to the server as we did in our Paging<\/a>, Sorting<\/a>, and Searching<\/a> articles in Blazor WebAssembly.<\/div>\n<\/a><\/p>\nReading Query Strings in Blazor WebAssembly<\/h2>\n
QueryStringDisplayDemo<\/code> component:<\/p>\n@page \"\/query-string-display\"\r\n@using Microsoft.AspNetCore.WebUtilities\r\n@inject NavigationManager NavManager\r\n\r\n<h3>QueryStringDisplayDemo<\/h3>\r\n<hr \/>\r\n\r\n<h3>First Name: @_name<\/h3>\r\n\r\n@code {\r\n private string _name;\r\n\r\n protected override void OnInitialized()\r\n {\r\n var uri = NavManager.ToAbsoluteUri(NavManager.Uri);\r\n\r\n var queryStrings = QueryHelpers.ParseQuery(uri.Query);\r\n if(queryStrings.TryGetValue(\"name\", out var name))\r\n {\r\n _name = name;\r\n }\r\n }\r\n}<\/pre>\n_name<\/code> field on the page. In the code part, we create a private _name<\/code> field and also convert the NavManager.Uri<\/code> property of the string type to the Uri<\/code> object with the ToAbsoluteUri<\/code> method. The Uri<\/code> class provides an object representation of URI and enables us to use all kinds of properties like Query, PathAndQuery, IsAbsoluteUri, etc.<\/p>\nQueryHelpers.ParseQuery<\/code> method where we pass the uri.Query<\/code> property as an argument. This expression returns Dicrtionary<string, StringValues><\/code> as a result. Then we use the TryGetValue<\/code> method to extract the value of the query string to the name<\/code> local variable and return a boolean result if extraction succeeded or not. If extraction succeeds, we just assign the value of the name<\/code> local variable to the _name<\/code> field.<\/p>\n![\"Reading](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/05-Reading-query-strings-in-Blazor-WebAssembly.png\")
<\/a><\/p>\nUsing Multiple Query String Parameters<\/h3>\n
Index<\/code> component first:<\/p>\n@page \"\/\"\r\n@using Microsoft.AspNetCore.WebUtilities\r\n@inject NavigationManager NavManager\r\n\r\n<h1>Hello, world!<\/h1>\r\n\r\nWelcome to your new app.\r\n\r\n<p>\r\n Click <a href=\"query-string-display?name=John&age=26\">here<\/a>\r\n to send a query string parameter to the component.\r\n<\/p>\r\n\r\n<p>\r\n Click the button to send a query string parameter with NavigationManager\r\n <button type=\"button\" class=\"btn btn-info\" @onclick=\"Navigate\">Here<\/button>\r\n<\/p>\r\n\r\n@code {\r\n private void Navigate()\r\n {\r\n var queryParams = new Dictionary<string, string>\r\n {\r\n [\"name\"] = \"John\",\r\n [\"age\"] = \"26\"\r\n };\r\n\r\n NavManager.NavigateTo(QueryHelpers.AddQueryString(\"query-string-display\", queryParams));\r\n }\r\n}<\/pre>\nQueryStringDisplayDemo<\/code> file:<\/p>\n@page \"\/query-string-display\"\r\n@using Microsoft.AspNetCore.WebUtilities\r\n@inject NavigationManager NavManager\r\n\r\n<h3>QueryStringDisplayDemo<\/h3>\r\n<hr \/>\r\n\r\n<h3>First Name: @_name<\/h3>\r\n<h3>Age: @_age<\/h3>\r\n\r\n@code {\r\n private string _name;\r\n private int _age;\r\n\r\n protected override void OnInitialized()\r\n {\r\n var uri = NavManager.ToAbsoluteUri(NavManager.Uri);\r\n\r\n var queryStrings = QueryHelpers.ParseQuery(uri.Query);\r\n if (queryStrings.TryGetValue(\"name\", out var name))\r\n {\r\n _name = name;\r\n }\r\n\r\n if(queryStrings.TryGetValue(\"age\", out var age))\r\n {\r\n _age = Convert.ToInt32(age);\r\n }\r\n }\r\n}<\/pre>\n![\"Multiple](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/06-Multiple-query-strings.png\")
<\/a><\/p>\nImproving the Solution<\/h2>\n
Extensions<\/code> folder and inside it a new NavigationManagerExtension<\/code> class:<\/p>\npublic static class NavigationManagerExtension\r\n{\r\n public static T ExtractQueryStringByKey<T>(this NavigationManager navManager, string key)\r\n {\r\n var uri = navManager.ToAbsoluteUri(navManager.Uri);\r\n QueryHelpers.ParseQuery(uri.Query)\r\n .TryGetValue(key, out var queryValue);\r\n\r\n if (typeof(T).Equals(typeof(int)))\r\n {\r\n int.TryParse(queryValue, out int result);\r\n return (T)(object)result;\r\n }\r\n\r\n if (typeof(T).Equals(typeof(string)))\r\n return (T)(object)queryValue.ToString();\r\n\r\n return default;\r\n }\r\n}<\/pre>\nNavigationManager<\/code> type and pass a key for the query string parameter we want to extract. Then, we repeat the same logic as we have in our component and also parse the query parameters based on the type we provide for this generic method. Of course, we have only two type checks here because we only have a string and int query parameters, but you can extend this easily.<\/p>\nQueryStringDisplayDemo<\/code> component, and modify the @code<\/code> part:<\/p>\n@code {\r\n private string _name;\r\n private int _age;\r\n\r\n protected override void OnInitialized()\r\n {\r\n _name = NavManager.ExtractQueryStringByKey<string>(\"name\");\r\n _age = NavManager.ExtractQueryStringByKey<int>(\"age\");\r\n }\r\n}<\/pre>\n
![\"Wrong](\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/11\/07-Wrong-query-parameter-value.png\")
<\/a><\/p>\n