Определение компонентов

Последнее обновление: 29.11.2023

Основным строительным блоком приложения Blazor являются компоненты. Компонент представляет самодостаточный элемент пользовательского интерфейса - меню, диалоговое окно, просто блок с некоторым содержимым. Компонент описывает некоторую визуальную часть и связанную с ней некоторую логику. Компоненты могут использоваться в других компонентах. Их можно переносить из проекта в проект.

Компоненты определяются в файлах с расширением .razor с помощью комбинации разметки HTML (описывает визуальную часть) и кода C# (описывает логику компонента). Название файла компонента должно начинаться с заглавной буквы. Сами компоненты могут располагаться в любой папке проекта. При компиляции на их основе генерируются классы компонентов, которые унаследованы от базового класса ComponentBase

Стоит отметить, что определение и работа компонентов вне зависимости от типа рендеринга (статический, интерактивный на сервере, интерактивный на клиенте или автоматический рендеринг) компоненты не будут отличаться.

Возьмем простейший проект с одним компонентом App.razor, который помещен в папку Components:

Компоненты Razor в проекте Blazor на C#

Файл App.razor определяет код компонента App. Какой именно код могут содержать компоненты Blazor? Компоненты Blazor похожи на представления MVC и страницы Razor Pages в том плане, что они могут содержать разметку html и код C#.

Методы, поля и свойства компонента

Компонент, как и обычные классы C#, может определять переменные, которые хранят состояние компонента, и методы, которые определяют логику компонента, например, обработку событий элементов визуального интерфейса. Все методы, переменные и свойства компонента определяются внутри блока @code.

Для обращения к членам компонента применяется символ @:

@page "/"
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <base href="/" />
</head>

<body>
    <h1>@Message @name</h1>
    <h2>@DisplayTime()</h2>
</body>
</html>
@code {
    string name = "Eugene";
    string DisplayTime()
    {
        return $"Current time: {DateTime.Now.ToString("HH:mm:ss")}";
    }
    string Message { get; } = "Hello";
}

Результат:

Методы и переменные компонента Blazor на C#

Рендеринг кода html

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

@page "/"

<div>@html</div>

@code {

    string html = "<h1>Hello Metanit.com</h1>";
}
Рендеринг динамического кода html в компоненте Blazor на C#

Чтобы строка с кодом html рендерилась именно как html, надо преобразовать строку в объект MarkupString::

@page "/"

<div>@((MarkupString)html)</div>

@code {

    string html = "<h1>Hello Metanit.com</h1>";
}
Рендеринг кода html в компоненте Blazor на C#

Статический контент

Компонент Razor, как и представления MVC и Razor Pages, может использовать стили css, скрипты javascript, файлы изображений и прочий статический контент. При этом Blazor следует стандартным условностям, принятым в ASP.NET Core, в соответствии с которыми используемый статический контекст помещается в папку web root или корневую папку для веб-контента, которая по умолчанию назвается wwwroot. Для обращения к файлам из этой папки применяется относительный путь, который начинается со слеша (/) - данный слеш указывает на папку wwwroot.

Например, добавим в проект новую папку и назовем ее wwwroot. В ней определим некоторую структуру каталогов, в которых разместим файлы стилей и изображений:

Статические файлы css и картинки в компонентах Blazor на C#

Допустим, в папке wwwroot/css находится файл styles.css с некоторыми стилями:

body {
    font-family: Verdana;
}
h1{
    color:navy;
}
img{
    width:300px;
}

А в папке wwwroot/images находится файл forest.jpg - файл изображения. Подключим эти файлы в коде компонента:

@page "/"

<link href="/css/styles.css" rel="stylesheet" type="text/css">

<h1>Hello @name</h1>
<h3>Forest</h3>

<img alt="Forest" src="/images/forest.jpg" />

@code{
    string name = "Eugene";
}

И в файле Program.cs установим middleware для работы со статическими файлами:

using BlazorApp.Components;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents();

var app = builder.Build();

app.UseStaticFiles();   // для статических файлов
app.UseAntiforgery();

app.MapRazorComponents<App>();

app.Run();

Результат работы:

Static assets in Blazor components

Подобным образом можно подключать и остальной статический контент, например, скрипты javascript.

Файлы css уровня компонента

Blazor позволяет определять для компонентов файлы css, которые привязаны к этому компоненту и действуют только в рамках этого компонента (scoped css). Такие файлы css располагаются в одной папке с компонентом и называются по имени компонента + расширение .css. Например, определим файл App.razor.css

Scoped css in Blazor components

Определим в этом файле какие-нибудь стили, например, тот же набор свойств:

body {
    font-family: Verdana;
}
h1{
    color:navy;
}
img{
    width:300px;
}

Но чтобы все такие файлы css уровня компонента применялись к своим компонентам, в главном компоненте приложения надо подключить стиль, который называется по шаблону имя_проекта.styles.css:

@page "/"

<link href="BlazorApp.styles.css" rel="stylesheet" type="text/css">

<h1>Hello @name</h1>
<h3>Forest</h3>

<img alt="Forest" src="/images/forest.jpg" />

@code{
    string name = "Eugene";
}

Так, в моем случае подключается файл "BlazorApp.styles.css" (так как название проекта BlazorApp). Если я его открою, то увижу следующее содержимое:

/* _content/BlazorApp/Components/App.razor.rz.scp.css */
body[b-x2t04wkw4z] {
    font-family: Verdana;
}

h1[b-x2t04wkw4z] {
    color: navy;
}

img[b-x2t04wkw4z] {
    width: 300px;
}

И если у нас куча компонентов, мы можем для каждого из них определить свой файл css. И все эти css-файлы затем будут скомпилированы в один общий файл.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850