Основным строительным блоком приложения Blazor являются компоненты. Компонент представляет самодостаточный элемент пользовательского интерфейса - меню, диалоговое окно, просто блок с некоторым содержимым. Компонент описывает некоторую визуальную часть и связанную с ней некоторую логику. Компоненты могут использоваться в других компонентах. Их можно переносить из проекта в проект.
Компоненты определяются в файлах с расширением .razor с помощью комбинации разметки HTML (описывает визуальную часть) и кода C# (описывает логику компонента). Название файла компонента должно начинаться с заглавной буквы. Сами компоненты могут располагаться в любой папке проекта. При компиляции на их основе генерируются классы компонентов, которые унаследованы от базового класса ComponentBase
Стоит отметить, что определение и работа компонентов вне зависимости от типа рендеринга (статический, интерактивный на сервере, интерактивный на клиенте или автоматический рендеринг) компоненты не будут отличаться.
Возьмем простейший проект с одним компонентом App.razor, который помещен в папку Components:
Файл 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"; }
Результат:
Иногда может возникнуть необходимость отобразить в компоненте некоторый динамический код html, например, который хранится в переменной или является результатом метода. По умолчанию любая строка с кодом html рендерится как простая строка. Например, возьмем следующий компонент App:
@page "/" <div>@html</div> @code { string html = "<h1>Hello Metanit.com</h1>"; }
Чтобы строка с кодом html рендерилась именно как html, надо преобразовать строку в объект MarkupString::
@page "/" <div>@((MarkupString)html)</div> @code { string html = "<h1>Hello Metanit.com</h1>"; }
Компонент Razor, как и представления MVC и Razor Pages, может использовать стили css, скрипты javascript, файлы изображений и прочий статический контент. При этом Blazor следует стандартным условностям, принятым в ASP.NET Core, в соответствии с которыми используемый статический контекст помещается в папку web root или корневую папку для веб-контента, которая по умолчанию назвается wwwroot. Для обращения к файлам из этой папки применяется относительный путь, который начинается со слеша (/) - данный слеш указывает на папку wwwroot.
Например, добавим в проект новую папку и назовем ее wwwroot. В ней определим некоторую структуру каталогов, в которых разместим файлы стилей и изображений:
Допустим, в папке 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();
Результат работы:
Подобным образом можно подключать и остальной статический контент, например, скрипты javascript.
Blazor позволяет определять для компонентов файлы css, которые привязаны к этому компоненту и действуют только в рамках этого компонента (scoped css). Такие файлы css располагаются в одной папке с компонентом и называются по имени компонента + расширение .css. Например, определим файл App.razor.css
Определим в этом файле какие-нибудь стили, например, тот же набор свойств:
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-файлы затем будут скомпилированы в один общий файл.