Blazor FAQ - Routing

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.

@inject NavigationManager UriHelper

<select @onchange="@onChange">
    <option></option>
    <option value=1>Andrew Fuller</option>
    <option value=2>Anne Dodsworth</option>
    <option value=3>Janet Leverling</option>
</select>

@code {
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        UriHelper.NavigateTo("employeeDetails/" + args.Value);
    }
}

[EmployeeDetails.razor]

@page "/employeeDetails/{Id:int}"

@if (empData != null)
{
<div class="container">
    <div class="row details">
        <div>
            <label><b>Employee Id: </b></label>
            <span>@empData.Eid</span>
        </div>
        <div>
            <label><b>Employee Name: </b></label>
            <span>@empData.FirstName</span>
        </div>
        <div>
            <label><b>Designation: </b></label>
            <span>@empData.Designation</span>
        </div>
    </div>
</div>
}

<style>
    .details {
        display: block;
    }
</style>

@code {

    [Parameter]
    public int Id { get; set; }

    private EmployeeData empData { get; set; }

    protected override void OnInitialized()
    {
        empData = employeeData.Where(i => i.Eid.Equals(Id)).FirstOrDefault();
    }
    public class EmployeeData
        {
            public string FirstName { get; set; }
            public string Designation { get; set; }
            public int Eid { get; set; }
        }
        List<EmployeeData> employeeData = new List<EmployeeData>
        {
            new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eid= 1 },
            new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eid= 2 },
            new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eid= 3 },
        };
}

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]
       public string Name { get; set; }

       protected override void OnInitialized()
       {
             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 “.

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.

Generally, a query string stores values in a 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 NavigationManager. To access query parameter:

1.  Install the package Microsoft.AspNetCore.WebUtilities from NuGet.
2. Use the QueryHelpers.ParseQuery.TryGetValue method.

@page "/queryparam"
@inject NavigationManager UriHelper

<h3>Query Paramter Demo</h3>

<button @onclick="Navigate">Click</button>

<div>Id = @Id</div>

@code {


    string Id { get; set; }

    void Navigate()
    {
        var query = new Dictionary<string, string> { { "Id", "1001" } };

        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));

        var uri = navManager.ToAbsoluteUri(navManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("Id", out var param))
        {
            Id = param.First();
        }
    }
}

Navigating from link

There are two ways to link pages in Blazor:

• Using Anchor: We normally use this in HTML.
• Using NavLink: This is introduced in Blazor.

<h3>Anchor Link</h3>
<p>
    <a href="/navigate1">Navigate 1</a><br />
</p>

<h3>Nav Link</h3>
<p>
    <NavLink href="/navigate2">Navigate 2</NavLink><br />
</p>

Navigate from code

We can navigate to another component programmatically using the NavigationManager service:

1. Inject the service @inject directive.
2. Use the NavigateTo() method for navigation.

@page "/page1"
@inject NavigationManager UriHelper

<h3>Naviagte to another component Programatically</h3>
<button @onclick=@Navigate>Navigate</button>


@code {
void Navigate()
{
    UriHelper.NavigateTo("page2");
}
}

A route constraint enforces type matching on a route segment to a component.

In the following example, the route to the Users component only matches if:

• An Id route segment is present on the request URL.
• The Id segment is an integer (int).

@page "/Route"
@page "/Route/{id:int}"

<h3>Routing Id: @Id</h3>

@code {
    [Parameter]
    public int Id { get; set; }
}

Reference link:

https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.1

The parameters can be defined using curly braces within a routing template in both the @page directive and RouteAttribute.

Using @page directive

@page "/Route"
@page "/Route/{id}"

<h3>Routing Id: @Id</h3>

@code {
    [Parameter]
    public string Id { get; set; }
}

Using RouteAttribue

[Route("/Route/{id}")]
public class BaseComponent: ComponentBase
{
    public string Id { get; set; }
}

Reference link:

https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.1

https://www.c-sharpcorner.com/article/routing-in-blazor/