By using Blazor route parameters, you can pass values from one page to another page. Use NavigationManager to pass a value and route the parameter to another page.
Follow this example to achieve passing values from one page to another. [Page1.razor]
@page "/page1"@inject NavigationManager UriHelper<h3>Click button to pass the value to other page.</h3><buttonclass="btn btn-primary" @onclick="OnClick">Pass Value</button>@code {
private string parameter = "ParameterValue";
private void OnClick()
{
UriHelper.NavigateTo($"counter/{parameter}");
}
}
Get the passed Page1 parameter value in Page2. [Page2.razor]
@page "/page2/{Value}"
<p>@Value</p>@code {
[Parameter]
public string Value { get; set; }
}
Data is passed using ASP.NET Core Endpoint
Routing for Blazor server applications. Using MapBlazorHub endpoint routing
extension method, ASP.NET Core will start accepting the incoming link for
Blazor component.
The route uses the parameter (page name) to
navigate to the corresponding components.
In the following code example, you get the dropdown value and pass the parameter to navigate the page andthe full details of the employee is displayed based on the employee’s value.
Blazor provides
support for passing the route parameter as DateTime format. This needs to be
mentioned while defining the route parameter in the route as @page “/route/{parameter:datetime}” at
the top of the .razor component file..
You can get the current page title in Blazor by using the “title” property of the document object in JavaScript and by using a .JavaScript interop since there is no DOM accessibility in Blazor. The following example shows how to get the page name.
A query string stores values in the URL that are visible to users. It is mostly used to pass the data from one page to another. In Blazor, the query string can be added using the NavigationManager. You can pass multiple parameters through the URL and access it via queryhelpers,
1. Install the package Microsoft.AspNetCore.WebUtilities from NuGet.
2. Use the QueryHelpers.ParseQuery.TryGetValue method
@page "/queryparam"@inject NavigationManager navManager<h3>Query Paramter Demo</h3><div>Id = @Id</div><div>Name = @Name</div>@code{
string Id { get; set; }
string Name { get; set; }
protected override void OnInitialized()
{
GetId();
GetName();
}
public void GetId()
{
var uri = new Uri(navManager.Uri);
Id = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("id", out var type) ? type.First() : "";
}
public void GetName()
{
var uri = new Uri(navManager.Uri);
Name = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("name", out var type) ? type.First() : "";
}
}
You can redirect to a page in Blazor using the Navigation Manager’s NavigateTo method. In the following code snippet, it will redirect to the home page when this page gets loaded. Similarly, you can call NavigateTo() method from NavigationManager class anywhere to redirect to another page.
A URL can be opened in a new tab either by using the NavLink component or by using JavaScript. In the NavLink component, we can specify the URL to be opened in a new tab in the href parameter. In interop’s IJSRuntime instances, the method InvokeAsyncwith parameters open, URL, and _blank are used. Here, the third parameter, _blank, is used to notify that the URL needs to be opened in the new tab.
Blazor doesn’t consider the word casing and it just assigns the value if the name is matched.
@page "/RouteParameter"
@page "/RouteParameter/{name}"
<h1>Welcome to blazor : @Name !!!</h1>
@code {
[Parameter]
publicstring Name { get; set; }
protectedoverridevoidOnInitialized()
{
Name = Name ?? "David";
}
}
The router parses the name parameter from the URL and sets the value of the component. For instance, if the URL is /RouteParameter/JonSnow, the Name property will be set to “ JonSnow “.
You can perform routing without changing the URL with the help of NavigationManager. You need to inject NavigationManager to use this service. You can use this service to perform routing programmatically.
The IUriHelper services are used for navigation and routing in Blazor. But IUriHelper service in Blazor has been replaced by NavigationManager from .NET Core 3.0 Preview 9. For more details refer to this link.
No, the NavigateTomethod in theUriHelperclass of Blazor does not have built-in support for opening a URL in a new tab. It is primarily used to navigate within the same browser tab.
To open a URL in a new tab or window, you can use JavaScript interop in Blazor. Here’s an example of how you can achieve this:
