Маршрутизация в ASP.NET Core Blazor

Содержание

Базовый путь приложения
Шаблоны маршрутов
- Свойства компонента Route
- Несколько маршрутов для компонента Blazor
Параметры маршрута
- Необязательные параметры
- Ограничения маршрута
Итого

Маршрутизация в ASP.NET Core — это процесс сопоставление запроса с конкретным адресом внутри приложения. Система маршрутизации в приложениях Blazor начинается с указания базового пути приложения и компонента Router, расположенного, в свою очередь, в главном компонента приложения — App.

Базовый путь приложения

Базовый путь приложения Blazor — это URL по которому располагается приложение. Например, по умолчанию, кода мы создаем новое приложение Blazor, его базовый путь будет «/», то есть:

Физически наше приложение располагается, например, в папке C:\BlazorApp\
Запросы для нашего приложения принимаются, например, по URL «https://localhost:7167/{путь_к_ресурсу}«
Когда мы указываем базовый путь приложения как "/", то это означает, что при указании, например, в компоненте директивы @page "/age" система маршрутизации ASP.NET Core Blazor будет использовать этот относительный путь и предоставлять пользователю данные по следующему URL: https://localhost:7167/age.

Для приложений Blazor Server ASP.NET 6 базовый путь указывается в файле _layout.cshtml с использованием тега base:

@using Microsoft.AspNetCore.Components.Web
@namespace WebClient.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="ru">
<head>
    .....
    <base href="~/" />
    ..... 
</head>
<body>
    @RenderBody()
    .....    
</body>
</html>

Второй вариант указания базового пути — это указать его в файле Program.cs, например,

app.UsePathBase("/BlazorApp");

Шаблоны маршрутов

В приложениях Blazor за маршрутизацию запросов к конкретным компонентам Blazor отвечает компонент Router, расположенный в главном компоненте приложения (по умолчанию — App):

<Router AppAssembly="@typeof(Program).Assembly">
   <Found Context="routeData">
     <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  </Found>
<NotFound>
  <p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>

При компиляции компонентов Razor (.razor) с указанной директивой @page, каждый созданный класс компонента предоставляет атрибут RouteAttribute для указания шаблона маршрута. При запуске приложения выполняется проверка сборки, указанной в компоненте Route как AppAssembly, для сбора сведений о маршрутах для компонентов приложения с указанными RouteAttribute.

Далее, в среде выполнения, компонент RouteView выполняет следующие операции:

получает RouteData от Router вместе со всеми параметрами маршрута;
сопоставляет указанный компонент для просмотра с его макетом, включая все вложенные макеты.

При необходимости, для компонента RouterView можно указать параметр DefaultLayout с классом макета для компонентов, которые не задают макет, с помощью директивы @layout. По умолчанию, в приложениях Blazor указывается компонент MainLayout (Shared/MainLayout.razor).

Свойства компонента Route

По умолчанию, в шаблоне приложения Blazor у компонента Route указаны следующие свойства:

Found — возвращает или задает содержимое, отображаемое при обнаружении соответствия для запрошенного маршрута.
NotFound — возвращает или задает содержимое, отображаемое, если для запрошенного маршрута не найдено совпадений

Можно увидеть, как работают эти свойства, например, если попробовать перейти по несуществующему в приложении пути:

Иногда бывает необходимо показать пользователю какое-либо содержимое в момент, когда приложение обрабатывает какой-то долгий запрос, например, получает большой массив данных с другого веб-узла или производит чтение из базы данных и т.д. Чтобы это сделать, можно воспользоваться свойством Navigating компонента Router.

Navigating — возвращает или задает содержимое, отображаемое при выполнении асинхронной навигации.

Например, изменим содержимое компонента Router следующим образом:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
       ....
    </Found>
    <NotFound>
        .....
    </NotFound>
    <Navigating >
        <PageTitle>Переходим по ссылке</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Загружаем страницу....</p>
        </LayoutView>
    </Navigating>
</Router>

Здесь, в свойстве Navigating мы задали текст заголовка страницы и указали компоненту LayoutView, что, используя шаблон MainLayout, пользователю следует указать на странице всего одну строку — «Загружаем страницу….». Теперь при каждом переходе к очередному компоненту приложения мы будем видеть эту строку.

Несколько маршрутов для компонента Blazor

В Blazor для компонентов можно указывать несколько директив @page. Например, воспользуемся шаблоном приложения Blazor и укажем для компонента Counter следующие маршруты:

@page "/counter"
@page "/my_counter"
@page "/counter/start"

Теперь можно запустить приложение и убедиться, что при переходе по ссылке «Counter» в меню, как и раньше, загрузится компонент счётчика по пути «/Counter«. При этом, мы можем перейти к этому же компоненту, набрав в адресной строке браузера путь «https://localhost:7167/my_counter» или «https://localhost:7167/counter/start»

Параметры маршрута

Достаточно часто работа одного компонента Blazor может зависеть от результатов работы другого компонента. В Blazor мы можем указывать параметры маршрута, чтобы компонент мог их использовать для выполнения каких-либо действий. Например, изменим компонент Counter следующим образом:

@page "/counter"
@page "/counter/start/{currentCount:int}"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    [Parameter]
    public int CurrentCount { get; set; } = 0;

    private void IncrementCount()
    {
        CurrentCount++;
    }
}

Посмотрим, что изменилось в компоненте.

Во-первых, во второй директиве @page мы указали шаблон параметра {currentCount:int}, что означает, что путь в строке браузера обязательно должен иметь вид: путь_к_приложению/counter/start/целое_число. Например, следующие пути будут приводить к загрузке компонента Counter:

https://localhost:7167/counter/start/30
https://localhost:7167/counter/start/1
https://localhost:7167/counter/start/0

Следующие пути приведут к ошибке:

https://localhost:7167/counter/start/ — отсутствует обязательный параметр
https://localhost:7167/counter/start/abcd — параметр определен как строка, а не целое число

Во-вторых, поле сurrentCount стало свойством CurrentCount и для этого свойства указан атрибут Parameter. Указание атрибута Parameter означает, что значение свойства CurrentCount при загрузке компонента будет браться из параметра пути с тем же именем, что и у свойства (регистр при этом не учитывается).

Теперь можно запустить приложение и убедиться, что при загрузке компонента по адресу «/counter» начальное значение счётчика равно 0, а, при загрузке, например, по пути https://localhost:7167/counter/start/100 значение счётчика сразу будет равно 100.

Необязательные параметры

Blazor поддерживает необязательные параметры маршрута. Например, мы можем изменить наш компонент Counter следующим образом:

@page "/counter/{currentCount:int?}"

здесь параметр currentCount — необязательный (в конце описания параметра стоит вопросительный знак). Теперь счётчик будет доступен либо по пути "/count" либо по любому пути, содержащему в качестве параметра целое число, например, "/counter/10", "counter/12" и т.д.

Ограничения маршрута

При указании параметра currentCount мы указали ограничения для этого параметра — int. Что означало, что в этом параметре могут содержаться целые числа. В Blazor можно также указать следующие ограничения для параметров:

Ограничение	Пример	Примеры совпадений
`bool`	`{active:bool}`	`true`, `FALSE`
`datetime`	`{dob:datetime}`	`2016-12-31`, `2016-12-31 7:32pm`
`decimal`	`{price:decimal}`	`49.99`, `-1,000.01`
`double`	`{weight:double}`	`1.234`, `-1,001.01e8`
`float`	`{weight:float}`	`1.234`, `-1,001.01e8`
`guid`	`{id:guid}`	`CD2C1638-1638-72D5-1638-DEADBEEF1638`, `{CD2C1638-1638-72D5-1638-DEADBEEF1638}`
`int`	`{id:int}`	`123456789`, `-123456789`
`long`	`{ticks:long}`	`123456789`, `-123456789`

Итого

Сегодня мы познакомились с тем, как организована маршрутизация в приложениях в ASP.NET Core Blazor: рассмотрели работу компонента Router, возможности использования параметров и то, какие ограничения можно накладывать на параметры.