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

Завершено

В этом упражнении вы создадите модальное диалоговое окно в библиотеке классов Razor, которую можно повторно использовать в приложении шаблона Blazor по умолчанию.

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

В этом модуле используется пакет SDK для .NET 8.0. Убедитесь, что установлен .NET 8.0, выполнив следующую команду в предпочтительном терминале команд:

dotnet --list-sdks

Выходные данные, аналогичные следующему примеру, отображаются:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Убедитесь, что в списке есть версия, которая начинается с цифры 8. Если ничего не указано или команда не найдена, установите самый свежий SDK для .NET 8.0.

Сначала мы создадим проект библиотеки классов Razor для модального диалогового компонента. Вы можете использовать Visual Studio для создания нового проекта или создать проект в новой папке с помощью инструмента командной строки .NET следующим образом:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Создание модального диалогового компонента

Затем мы создадим модальный компонент в нашем проекте с соответствующим файлом CSS и предоставим исходный формат.

1. Измените имя файла Component1.Razor на Modal.razor и имя файла Component1.razor.css на Modal.razor.css. Файл Modal.razor содержит компонент, который мы создадим, и в будущем вы сможете добавить в проект пустые текстовые файлы и соответствующим образом отформатировать их с содержимым для Razor или CSS.

2. Добавьте следующее содержимое Razor в файл Modal.razor:

   @if (Show) {
   
    <div class="dialog-container">
     <div class="dialog">
      <div class="dialog-title">
       <h2>@Title</h2>
      </div>
   
      <div class="dialog-body">
       @ChildContent
      </div>
   
      <div class="dialog-buttons">
       <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
       <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
      </div>
   
     </div>
    </div>
   
   }
   
   @code {
   
    [Parameter]
    public string Title { get; set; }
   
    [Parameter]
    public string CancelText { get; set; } = "Cancel";
   
    [Parameter]
    public string ConfirmText { get; set; } = "Ok";
   
    [Parameter]
    public RenderFragment ChildContent { get; set; }
   
    [Parameter]
    public bool Show { get; set; }
   
   
    [Parameter] public EventCallback OnCancel { get; set; }
    [Parameter] public EventCallback OnConfirm { get; set; }
   
   }
   

   Этот компонент имеет несколько удобных функций, которые мы хотим включить в наши проекты:

   • Название.
   • Кнопки Отмена и Подтвердить с метками, которые можно настроить, и событиями щелчка, которыми можно управлять.
   • Внутреннее содержимое компонента можно задать с помощью параметра ChildContent.
   • Состояние отображения диалогового окна можно контролировать с помощью параметра Show.

3. Добавьте следующую таблицу CSS в файл Modal.razor.css, чтобы обеспечить форматирование по умолчанию для компонента:

   .dialog-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    animation: dialog-container-entry 0.2s;
   }
   
   @keyframes dialog-container-entry {
    0% {
      opacity: 0;
    }
   
    100% {
      opacity: 1;
    }
   }
   
   .dialog {
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    width: 700px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.4s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
   }
   
   @keyframes dialog-entry {
    0% {
      transform: translateY(30px) scale(0.95);
    }
   
    100% {
      transform: translateX(0px) scale(1.0);
    }
   }
   
   .dialog-title {
    background-color: #444;
    color: #fff2cc;
    padding: 1.3rem 0.5rem;
   }
   
    .dialog-title h2 {
      color: white;
      font-size: 1.4rem;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.3rem;
    }
   
   .dialog-body {
    flex-grow: 1;
    padding: 0.5rem 3rem 1rem 0.5rem;
   }
   
   .dialog-buttons {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background-color: #eee;
    padding: 0 1rem;
   }
   

Эта разметка придает некоторую стандартную окраску строке заголовка и панели кнопок внизу, что делает ее более интересной, чем простой набор HTML-элементов серого цвета.

Использование модального компонента и создание ссылок на него

Теперь, когда компонент FirstClassLibrary находится в проекте, давайте добавим новое приложение Blazor Server и начнем использовать модальный компонент.

1. Создайте новый проект сервера Blazor с именем MyBlazorApp в папке рядом с проектом FirstClassLibrary с помощью функции добавления нового проекта Visual Studio или выполнив следующую команду:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. Добавьте ссылку на проект FirstClassLibrary в проекте MyBlazorApp с помощью функции добавления ссылки Visual Studio или выполнив следующую команду из папки MyBlazorApp :

   dotnet add reference ../FirstClassLibrary
   

При наличии ссылки на этот проект приложение MyBlazorApp может взаимодействовать с компонентами проекта FirstClassLibrary.

1. Чтобы упростить ссылку на модальный компонент, добавьте запись в конец файла _Imports.razor в папке "Компоненты" приложения MyBlazorApp. Это позволяет ссылаться на модальный компонент без указания его полного пространства имен.

   @using FirstClassLibrary
   

2. Добавьте модальный компонент на открываемую страницу этого приложения, файл Components/Pages/Home.razor

   <Modal Title="My first Modal dialog" Show="true">
    <p>
      This is my first modal dialog
    </p>
   </Modal>
   

   a. Присвойте компоненту заголовок "Мое первое модальное диалоговое окно".
   б. Добавьте короткий абзац, который будет отображаться в диалоговом окне. Это содержимое описывает назначение диалогового окна.
   c. Задайте видимость диалогового окна с помощью параметра Show.

Проверьте свою работу

и перейдите к нему в браузере. Диалоговое окно Мое первое модальное диалоговое окно должно отображаться перед остальной частью содержимого на экране.