Навигация в ASP.NET Core Blazor. NavigationManager

При разработке приложений Blazor бывает необходимо перенаправить пользователя на другой URL без каких-либо действий со стороны самого пользователя. Например, такое поведение приложения может потребоваться в случае, когда у вас предусмотрена отдельная страница добавления пользователем каких-либо данных в приложение. После заполнения формы пользователь жмет кнопку «Добавить», срабатывает событие OnSubmit формы и в этот момент вам может потребоваться, чтобы пользователь вернулся, например, на главную страницу приложения. В этом случае нам поможет класс C# NavigationManager.

Пример использования NavigationManager

NavigationManager позволяет управлять URI непосредственно в коде C#.  Рассмотрим одно из наиболее часто встречающихся применений этого класса.

@page "/navigate"

@inject NavigationManager Navigation

<button class="btn btn-primary" @onclick="NavigateToMainPage">
    Navigate to the main page
</button>

@code {
    private void NavigateToMainPage()
    {
        Navigation.NavigateTo("/");
    }
}

Здесь, после директивы @page (об этой директиве мы говорили здесь) используется директива @inject с помощью которой мы внедряем новый сервис в наш компонент Blazor. Директива @inject имеет следующее описание:

@inject тип название

• тип — тип внедряемого сервиса (службы). В нашем случае — это NavigationManager.
• название — имя переменной, с которой мы будем работать в коде C#. В нашем случае — это Navigation.

После того, как служба внедрена в компонент, мы можем её использовать в коде C#. Далее, в примере выше, мы добавляем новую кнопку и задаем обработчик события onclick:

@onclick="NavigateToMainPage"

и уже в самом обработчике, используя NavigationManager, перенаправляем пользователя на главную страницу приложения, используя один из методов NavigateTo:

private void NavigateToMainPage() 
{ 
    Navigation.NavigateTo("/"); 
}

Теперь, как только пользователь нажмет на кнопку, он будет перенаправлен на главную страницу приложения.

Свойства, методы и события NavigationManager

Свойства NavigationManager

Свойство BaseUri

Возвращает базовый URI (с завершающей косой чертой), который можно добавить в начало относительных путей URI для получения абсолютного URI. Обычно, BaseUri соответствует атрибуту href элемента документа <base> в wwwroot/index.html (Blazor WebAssembly) или Pages/_Host.cshtml (Blazor Server).

Например, https://localhost:7056

Свойство Uri

Возвращает текущий абсолютный URI, например, https://localhost:7056/counter.

Методы NavigationManager

Метод NavigateTo

Позволяет переходить по указанному URL. Этот метод перегружен и имеет несколько версий. Наиболее часто используются следующие версии метода:

public void NavigateTo (string uri);
public void NavigateTo (string uri, bool forceLoad);

здесь uri — URL по которому необходимо перейти

forceLoad — если значение параметра равно true, обходит маршрутизацию на стороне клиента и заставляет браузер загружать новую страницу с сервера, независимо от того, будет ли URI обычно обрабатываться маршрутизатором на стороне клиента.

Метод ToAbsoluteUri

Преобразует относительный URL в абсолютный. Этот метод имеет следующую сигнатуру

public Uri ToAbsoluteUri (string relativeUri);

Метод ToBaseRelativePath

Преобразует абсолютный URI в относительный URI (относительно базового префикса). Метод имеет следующую сигнатуру:

public string ToBaseRelativePath (string uri);

События NavigationManager

Событие LocationChanged

Событие, возникающее при изменении расположения навигации.

public event EventHandler<LocationChangedEventArgs> LocationChanged;

Пример использования свойств, методов и событий NavigationManager

В примере ниже при переходе на новую страницу с использованием NavigationManager в консоль выводится несколько строк, содержащие различные свойства и результаты работы методов у NavigationManager.

@page "/"

@using Microsoft.Extensions.Logging;
@implements IDisposable;
@inject ILogger<Index> Logger;

@inject NavigationManager Navigation;

<button @onclick=OnClick>Go To Counter</button>

@code {

    public void OnClick()
    {
        Navigation.NavigateTo("/counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL новой страницы: {Location}", e.Location);
        Logger.LogInformation("Относительный путь: {Location}", Navigation.ToBaseRelativePath(e.Location));
        Logger.LogInformation("Базовый URL: {Location}", Navigation.BaseUri);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
    
}

После перехода на новый URL в консоли приложения можно увидеть следующие строки:

Итого

Сегодня мы рассмотрели пример навигации в Blazor с использованием сервиса NavigationManager. Для того, чтобы перенаправить пользователя на новый URL с использованием кода C# мы должны воспользоваться одной из версий методы NavigateTo(). После перехода на новый URL у компонента NavigationManager возникает событие LocationChanged.