Описание принципов работы и создание библиотеки классов Razor

5 мин

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

Здесь показано, как создать библиотеку классов Razor и как использовать ее для совместного использования отображаемого и статического содержимого для настройки и представления приложений Blazor.

Сведения о библиотеках классов Razor

Библиотека классов Razor — это тип проекта .NET, содержащий компоненты Razor, страницы, HTML, файлы Cascading Style Sheet (CSS), JavaScript, изображения и другое статическое веб-содержимое, на которое может ссылаться приложение Blazor. Как и в случае с другими проектами библиотеки классов .NET, библиотеки классов Razor можно объединять в пакеты NuGet и совместно использовать в репозиториях пакетов NuGet, таких как NuGet.org.

Рассмотрим шаблон по умолчанию для создания библиотеки классов Razor.

Создание проекта с использованием шаблона по умолчанию

При необходимости можно начать создание библиотеки классов Razor в Visual Studio, выбрав Файл>Создать Project.

Screenshot of the

Кроме того, можно создавать проекты в интерфейсе командной строки, выполнив следующую команду:

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.

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

Различия между библиотекой классов и библиотекой классов 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 по умолчанию добавляет 2 пиксель тире красной границы и стиль фонового изображения, использующего изображение 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 и команду add reference в .NET CLI, как показано здесь:

dotnet add reference ../MyClassLibrary

Для библиотек, которые доставляются нам в форме пакета NuGet, мы можем добавить ссылку с помощью установщика пакета NuGet Visual Studio или команды add package в .NET CLI, как показано здесь:

dotnet add package MyClassLibrary

Проверьте свои знания

Продолжить