Описание принципов работы и создание библиотеки классов Razor
- 5 мин
Компоненты в веб-приложениях предоставляют разработчикам возможность повторно использовать части пользовательского интерфейса приложения на протяжении всего приложения. Используя библиотеки классов Razor, разработчики могут совместно использовать эти компоненты во многих приложениях и повторно использовать их.
В этом уроке вы узнаете, как создать библиотеку классов Razor. Затем вы используете его, чтобы делиться как отрисованным, так и статическим содержимым для настройки и отображения в приложениях Blazor.
Библиотеки классов Razor
Библиотека классов Razor — это тип проекта .NET. Он содержит компоненты Razor, страницы, HTML, каскадные файлы таблицы стилей (CSS), JavaScript, изображения и другое статическое веб-содержимое, на которое может ссылаться приложение Blazor. Как и другие проекты библиотек классов .NET, библиотеки классов Razor можно упаковыть как пакет NuGet и совместно использовать в репозиториях пакетов NuGet, таких как NuGet.org.
Рассмотрим шаблон по умолчанию для создания библиотеки классов Razor.
Создание проекта с помощью шаблона по умолчанию
При необходимости можно приступить к созданию библиотеки классов Razor в Visual Studio, выбрав команду "Файл>нового проекта".
Вы также можете создать проекты в интерфейсе командной строки, выполнив следующую команду:
dotnet new razorclasslib -o MyProjectName
Этот шаблон предоставляет начальный компонент с именем Component1, который содержит несколько важных функций, которые могут использовать компоненты:
- Изолированная каскадная таблица стилей с именем Component1.razor.css, которая хранится в той же папке, что и Component1.razor. Файл Component1.razor.css условно включен в приложение Blazor, которое ссылается на Component1.
- Статическое содержимое, например изображения и файлы JavaScript, доступное приложению Blazor во время выполнения и на которое ссылается компонент Component1. Это содержимое поставляется в папке wwwroot , которая ведет себя так же, как папка wwwroot в приложении ASP.NET Core или Blazor.
- Код .NET, который выполняет функции, находящиеся в включенном файле JavaScript.
Различия между библиотекой классов и библиотекой классов Razor
Библиотека классов — это общая структура доставки пакетов в приложениях .NET, а библиотека классов Razor аналогична структуре с несколькими другими функциями, настроенными в файле проекта.
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
</ItemGroup>
</Project>
- Файл проекта содержит ссылку на пакет SDK microsoft.NET.Sdk.Razor , чтобы объявить, что он содержит и создает содержимое Razor в виде библиотеки классов Razor.
- Запись
SupportedPlatformобъявляет, что эта библиотека может использоваться наbrowserплатформе, а именно WebAssembly. -
PackageReferenceк библиотекеMicrosoft.AspNetCore.Components.Webпредоставляет доступ к базовым компонентам Blazor, которые поставляются с фреймворком. Этот доступ позволяет использовать эти простые компоненты для создания более сложных компонентов.
Содержимое компонента Razor
Этот начальный компонент Razor прост. Он содержит только html-элемент div с коротким блоком текста:
<div class="my-component">
This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>
Этот компонент взаимодействует с другими компонентами Blazor и страницами, ссылающимися на него, так же, как и компонент, предоставленный в том же проекте. То есть изолированный скрипт CSS в файле Component1.razor.css отображается вместе с остальным CSS приложения в файле application.css .
Доставка статических ресурсов
Вы можете ссылаться на содержимое папки wwwroot относительно среди другого содержимого этой папки. Вы также можете относительно ссылаться на отдельные CSS-файлы компонентов, например Component1.razor.css, как файлы в той же базовой папке. Например, CSS по умолчанию добавляет две пунктирные красные границы и стиль фонового изображения, который использует изображение background.png в папке wwwroot . Чтобы создать ссылку из CSS на содержимое, которое находится в папке wwwroot, путь не требуется.
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}
Содержимое папки wwwroot доступно для ссылки на размещенные приложения Blazor с абсолютной ссылкой на папку в формате:
/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}
Ссылка на библиотеку классов Razor
В решении .NET, где библиотека классов Razor находится на диске рядом с приложением Blazor, ссылающимся на библиотеку, можно обновить приложение Blazor, чтобы ссылаться на библиотеку классов Razor с помощью стандартного диалогового окна добавления ссылки Visual Studio и с помощью команды .NET CLI add reference , как показано ниже:
dotnet add reference ../MyClassLibrary
Для библиотек, которые доставлены в форме пакета NuGet, можно добавить ссылку с помощью установщика пакета NuGet Visual Studio или с помощью команды .NET CLI add package , как показано ниже:
dotnet add package MyClassLibrary