Использование компонента маршрутизатора Blazor для управления навигацией приложения
- 5 мин
Система маршрутизации Blazor предоставляет гибкие возможности для обеспечения того, чтобы запросы пользователей достигли компонента, который может обрабатывать их и возвращать информацию, которую пользователь хочет.
Предположим, вы работаете на веб-сайте компании по доставке пиццы. Необходимо настроить сайт таким образом, чтобы запросы информации о пицце и сведения о дополнительных начинках обрабатывались одним и тем же компонентом. Вы завершили этот этап, но тестирование показывает, что запросы на заполнение получают сообщение об ошибке. Необходимо устранить эту проблему.
Здесь вы узнаете, как настроить маршруты в Blazor с помощью директивы @page .
Note
Блоки кода в этом уроке являются иллюстрированными примерами. Вы пишете собственный код в следующем уроке.
Использование шаблонов маршрута
Когда пользователь выполняет запрос к странице из веб-приложения, он может указать, какие данные должны отображаться в URI. Рассмотрим пример.
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
После адреса протокола и веб-сайта этот URI отображает данные, которые пользователь хочет узнать о пицце "Маргарита". Кроме того, в строке запроса после вопросительного знака указано, что клиент хочет добавить дополнительную начинку из ананасов. В Blazor вы используете маршрутизацию, чтобы убедиться, что каждый запрос отправляется компоненту, который лучше всего отвечает. Вы также используете маршрутизацию, чтобы убедиться, что компонент содержит все сведения, необходимые для отображения нужных пользователем сведений. В этом случае может потребоваться отправить запрос компоненту Pizzas и для этого компонента, чтобы отобразить пиццу margherita с информацией о добавлении ананаса в него.
Blazor направляет запросы с помощью специализированного компонента Router. Компонент настроен в App.razor следующим образом:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, we haven't found any pizzas here.</p>
</NotFound>
</Router>
При запуске приложения Blazor проверяет атрибут AppAssembly, чтобы узнать, какую сборку он должен сканировать. Он сканирует сборку на наличие компонентов с атрибутом RouteAttribute. Blazor использует эти значения для компиляции объекта RouteData , который указывает, как запросы направляются в компоненты. При написании кода приложения для исправления атрибута @page в каждом компоненте используется директива .
В приведенном выше коде тег <Found> определяет компонент, который обрабатывает маршрутизацию во время выполнения: компонент RouteView. Этот компонент получает объект RouteData и все параметры из URI или строки запроса. Затем он отображает указанный компонент и его макет. Тег можно использовать <Found> для указания макета по умолчанию, который используется, если выбранный компонент не указывает макет с директивой @layout . Дополнительные сведения о макетах см. далее в этом модуле.
С помощью тега <Router> в компоненте <NotFound> можно также указать, какие сведения возвращаются пользователю при отсутствии соответствующего маршрута. В предыдущем примере возвращается один абзац <p>, но можно отрисовать более сложный HTML. Например, он может содержать ссылку на домашнюю страницу или страницу контактов для администраторов сайта.
Использование директивы @page
В компоненте Blazor директива @page указывает, что компонент должен обрабатывать запросы напрямую. Вы можете указать атрибут RouteAttribute в директиве @page, передав его в виде строки. Например, этот атрибут указывает, что страница обрабатывает запросы к маршруту /Pizzas :
@page "/Pizzas"
Если вы хотите указать несколько маршрутов к компоненту, используйте две или несколько @page директив, как показано в следующем примере:
@page "/Pizzas"
@page "/CustomPizzas"
Получение сведений о расположении и навигация с помощью NavigationManager
Предположим, что вы напишете компонент для обработки URI, запрашиваемого пользователем, например http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
При создании компонента может потребоваться доступ к информации о навигации, например:
- Текущий полный код URI, например
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - Базовый URI, например
http://www.contoso.com/. - Базовый относительный путь, например
pizzas/margherita. - Строка запроса, например
?extratopping=pineapple.
Все эти значения можно получить с помощью объекта NavigationManager. Объект необходимо внедрить в компонент, после чего можно получить доступ к его свойствам. В этом коде для получения базового URI веб-сайта используется объект NavigationManager. Затем он используется для задания ссылки на домашнюю страницу:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Чтобы получить доступ к строке запроса, необходимо выполнить синтаксический анализ полного URI. Чтобы выполнить этот анализ, используйте QueryHelpers класс из сборки Microsoft.AspNetCore.WebUtilities :
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Если пользователь запросил URI http://www.contoso.com/pizzas?extratopping=Pineapple после развертывания указанного выше компонента, на отображаемой странице появится сообщение I want to add this topping: Pineapple (Я хочу добавить эту начинку: ананасы).
Вы также можете использовать объект NavigationManager для отправки пользователей в другой компонент в коде, вызвав метод NavigationManager.NavigateTo():
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Note
Строка, передаваемая в метод NavigateTo(), является абсолютным или относительным URI, в который вы хотите отправить пользователя. Убедитесь, что компонент настроен по этому адресу. В приведенном выше коде компонент с @page "/buypizza" директивой обрабатывает этот маршрут.
Использование компонентов NavLink
В одном из приведенных выше примеров код использовался для получения значения NavigationManager.BaseUri. Затем это значение использовалось для установки атрибута href тега <a> на домашней странице. В Blazor для отображения тегов следует использовать компонент <a>, так как он переключает класс CSS active, если атрибут href ссылки соответствует текущему URL-адресу. Благодаря стилизации класса active вы можете дать понять пользователю, какая ссылка навигации предназначена для текущей страницы.
Поэтому при использовании NavLink пример ссылки на домашнюю страницу выглядит так, как в следующем коде:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Атрибут Match в компоненте NavLink используется для управления выделением ссылки. Существует два варианта.
-
NavLinkMatch.All. При использовании этого значения ссылка выделяется как активная, только если значение
hrefсоответствует всему текущему URL-адресу. -
NavLinkMatch.Prefix. При использовании этого значения ссылка выделяется как активная, если значение
hrefсоответствует первой части текущего URL-адреса. Предположим, вы используете эту ссылку:<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Эта ссылка будет выделена как активная, если текущим URL-адресом являетсяhttp://www.contoso.com/pizzas(а также для любого расположения в этом URL-адресе, напримерhttp://www.contoso.com/pizzas/formaggio). Такое поведение может помочь пользователю понять, какой раздел веб-сайта сейчас просматривается.