Tworzenie biblioteki klas Razor

Ukończone

W tym ćwiczeniu utworzysz modalne okno dialogowe w bibliotece klas Razor, które można ponownie użyć w domyślnej aplikacji szablonu platformy Blazor.

Tworzenie projektu biblioteki klas Razor

W tym module jest używany zestaw .NET 8.0 SDK. Upewnij się, że masz zainstalowany program .NET 8.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

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

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 8 . Jeśli żadna z nich nie znajduje się na liście lub polecenia nie znaleziono, zainstaluj najnowszy zestaw SDK .NET 8.0.

Aby rozpocząć, utwórz projekt biblioteki klas Razor dla modalnego składnika okna dialogowego. Za pomocą programu Visual Studio można utworzyć nowy projekt lub utworzyć projekt w nowym folderze za pomocą narzędzia wiersza polecenia platformy .NET, jak pokazano poniżej:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Kompilowanie modalnego składnika okna dialogowego

Następnie skompiluj składnik modalny w projekcie przy użyciu odpowiedniego pliku CSS, aby go przejść, i podaj początkowy format.

1. Zmień nazwę pliku Component1.razor na Modal.razor i Component1.razor.css plik na Modal.razor.css. Plik Modal.razor zawiera utworzony składnik, a w przyszłości można dodawać puste pliki tekstowe do projektu i odpowiednio sformatować je z zawartością razor lub CSS.

2. Dodaj następującą zawartość Razor do pliku 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; }
   
   }
   

   Ten składnik ma kilka miłych funkcji, które można udostępniać między projektami:

   • Tytuł.
   • Anuluj i potwierdź przyciski z etykietami, którymi można skonfigurować i kliknąć zdarzenia, którymi można zarządzać.
   • Zawartość wewnętrzną składnika można ustawić za pomocą parametru ChildContent .
   • Stan wyświetlania okna dialogowego można kontrolować za pomocą parametru Show .

3. Aby podać domyślne formatowanie składnika, dodaj następujący kod CSS do pliku 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;
   }
   

Ten znacznik zapewnia domyślne kolorowanie paska tytułu i paska przycisków u dołu, co czyni go bardziej interesującym niż prosty zestaw szarych elementów HTML.

Odwołanie i użycie składnika modalnego

W przypadku składnika modalnego znajdującego się teraz w projekcie FirstClassLibrary dodaj nową aplikację serwera Blazor i zacznij używać składnika modalnego.

1. Utwórz nowy projekt serwera Blazor o nazwie MyBlazorApp w folderze obok projektu FirstClassLibrary przy użyciu funkcji Dodaj nowy projekt programu Visual Studio lub uruchamiając następujące polecenie:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. W projekcie MyBlazorApp dodaj odwołanie do projektu FirstClassLibrary przy użyciu funkcji Dodaj odwołanie programu Visual Studio lub uruchamiając następujące polecenie z folderu MyBlazorApp:

   dotnet add reference ../FirstClassLibrary
   

Po zastosowaniu odwołania do tego projektu aplikacja MyBlazorApp może wchodzić w interakcje ze składnikami w projekcie FirstClassLibrary .

1. Ułatwi odwołanie do składnika modalnego, dodając wpis na końcu pliku _Imports.razor w folderze Components aplikacji MyBlazorApp. W ten sposób można odwoływać się do składnika modalnego bez konieczności określania całej przestrzeni nazw składnika.

   @using FirstClassLibrary
   

2. Dodaj składnik modalny do strony otwierania tej aplikacji, pliku Components/Pages/Home.razor

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

   a. Nadaj składnikowi tytuł "Moje pierwsze modalne okno dialogowe".
   b. Dodaj krótki akapit, który ma być wyświetlany w oknie dialogowym. Ta zawartość opisuje przeznaczenie okna dialogowego.
   c. Ustaw okno dialogowe, aby było widoczne przy użyciu parametru Show .

Sprawdź swoją pracę

Uruchom aplikację MyBlazorApp i dotnet run przejdź do niej w przeglądarce. Okno dialogowe Moje pierwsze modalne okno dialogowe powinno być wyświetlane przed resztą zawartości na ekranie.