Создание многократно используемых компонентов Blazor с помощью макетов
- 7 мин
Blazor включает макеты, чтобы упростить код распространенных элементов пользовательского интерфейса, которые отображаются на многих страницах в приложении.
Предположим, вы работаете на веб-сайте компании доставки пиццы и создали содержимое для большинства основных страниц в качестве набора компонентов Blazor. Вы хотите убедиться, что эти страницы имеют одинаковые фирменные символики, меню навигации и нижний колонтитул. Однако вам не нужно копировать и вставлять этот код в несколько файлов.
Здесь вы узнаете, как использовать компоненты макета в Blazor для отображения общего HTML-кода на нескольких страницах.
Note
Блоки кода в этом уроке являются иллюстрированными примерами. Вы пишете собственный код в следующем уроке.
Что такое макеты Blazor?
На большинстве веб-сайтов расположение элементов пользовательского интерфейса является общим для нескольких страниц. Например, в верхней части страницы может находиться фирменный баннер, внизу слева — основные навигационные ссылки по сайту, а внизу — заявление об отказе от ответственности. После написания этих общих элементов пользовательского интерфейса на одной странице не рекомендуется копировать и вставлять их в код для всех остальных страниц. Хуже, если изменения будут изменены позже, например новый основной раздел сайта для ссылки на сайт или ребренд сайта, необходимо внести те же изменения во всех отдельных компонентах. Для упрощения и повторного использования общих элементов пользовательского интерфейса лучше всего использовать компонент макета.
Компонент макета в Blazor предоставляет общий доступ к нанесенной разметке со всеми компонентами, которые на нее ссылаются. В макете размещаются общие элементы пользовательского интерфейса, например меню навигации, фирменная символика и нижние колонтитулы. Затем вы ссылаетесь на этот макет из нескольких других компонентов. Когда страница отрисовывается, уникальные элементы, такие как сведения о запрошенной пицце, приходят из компонента ссылки. Но общие элементы приходят из макета. В макете достаточно лишь один раз написать код для общих элементов пользовательского интерфейса. Затем, если вам нужно перебрать сайт или внести другие изменения, необходимо только исправить макет. Изменение автоматически применяется ко всем ссылающимся на него компонентам.
Написание кода для макета Blazor
Макет Blazor — это особый тип компонента, поэтому написание макета Blazor — это задача, аналогичная написанию других компонентов для отображения пользовательского интерфейса в вашем приложении. Например, блок @code и многие директивы используются аналогичным образом. Макеты определяются в файлах с расширением .razor . Файл часто хранится в общей папке приложения. Однако его можно сохранить в любом расположении, доступном для компонентов, которые его используют.
Два требования уникальны для компонентов макета Blazor:
- Необходимо наследовать класс
LayoutComponentBase. - Необходимо включить
@Bodyдирективу в расположение, в котором нужно отобразить содержимое компонентов, на которые вы ссылаетесь.
@inherits LayoutComponentBase
<header>
<h1>Blazing Pizza</h1>
</header>
<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>
@Body
<footer>
@new MarkdownString(TrademarkMessage)
</footer>
@code {
public string TrademarkMessage { get; set; } = "All content is © Blazing Pizzas 2021";
}
Note
Компоненты макета не содержат директиву @page, так как они не обрабатывают запросы напрямую и не должны создавать для них маршрут. Вместо ссылающихся компонентов используйте директиву @page.
Если вы создали приложение Blazor из шаблона проекта Blazor, макет приложения по умолчанию является компонентом Shared/MainLayout.razor.
Использование макета в компоненте Blazor
Чтобы использовать макет из другого компонента, добавьте директиву @layout с именем применяемого макета. HTML-код компонента отображается в позиции директивы @Body .
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
На этой схеме показано, как компонент и макет объединяются для преобразования для просмотра окончательного HTML-кода:
Если вы хотите применить шаблон ко всем компонентам Blazor в папке, можно использовать ярлык: файл _Imports.razor. Когда компилятор Blazor находит этот файл, он автоматически включает его директивы во все компоненты в папке. Этот метод устраняет необходимость добавлять директиву @layout к каждому компоненту. Он применяется к компонентам в той же папке, в которой находится файл _Imports.razor и все его вложенные папки.
Important
Не добавляйте директиву @layout в файл _Imports.razor в корневой папке проекта, так как он приводит к бесконечному циклу макетов.
Если вы хотите применить макет по умолчанию ко всем компонентам во всех папках веб-приложения, для этого можно использовать компонент App.razor, в котором настраивается компонент Router, как показано в модуле 2. В теге <RouteView> используйте атрибут DefaultLayout.
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
Компоненты с макетом, указанными в собственной @layout директиве или в файле _Imports.razor , переопределяют этот параметр макета по умолчанию.