Предыдущий

Следующая

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

Завершено

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

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

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

dotnet --list-sdks

Отобразятся выходные данные, аналогичные приведенным ниже.

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Убедитесь, что в списке есть версия, которая начинается с цифры 6. Если таких версий нет или эта команда не найдена, установите новейшую версию пакета SDK для .NET 6.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. В проекте MyBlazorApp добавьте ссылку на проект FirstClassLibrary с помощью функции добавления ссылки Visual Studio или выполнив следующую команду из папки MyBlazorServer:

   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. Присвойте компоненту заголовок "Мое первое модальное диалоговое окно".
   b. Добавьте короткий абзац, который будет отображаться в диалоговом окне. Это содержимое описывает назначение диалогового окна.
   c. Задайте видимость диалогового окна с помощью параметра Show.

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

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

Продолжить