Een Razor-klassebibliotheek maken

In deze oefening maakt u een modaal dialoogvenster in een Razor-klassebibliotheek die u opnieuw kunt gebruiken in de standaard-Blazor-sjabloontoepassing.

Het Razor-klassebibliotheekproject maken

In deze module wordt de .NET 8.0 SDK gebruikt. Zorg ervoor dat .NET 8.0 is geïnstalleerd door de volgende opdracht uit te voeren in de opdrachtterminal van uw voorkeur:

dotnet --list-sdks

Uitvoer die vergelijkbaar is met het volgende voorbeeld wordt weergegeven:

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

Zorg ervoor dat er een versie wordt vermeld die begint met 8 . Als er geen wordt vermeld of de opdracht niet wordt gevonden, moet u de meest recente .NET 8.0 SDK installeren.

Maak eerst het Razor-klassebibliotheekproject voor een modaal dialoogvensteronderdeel. U kunt Visual Studio gebruiken om een nieuw project te maken of u kunt het project maken in een nieuwe map met het opdrachtregelprogramma .NET, zoals hier wordt weergegeven:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Het modale dialoogvensteronderdeel maken

Bouw vervolgens het modale onderdeel in uw project met een geschikt CSS-bestand om mee te gaan en geef een initiële indeling op.

1. Wijzig de naam van het Component1.razor-bestand in Modal.razor en het Component1.razor.css bestand in Modal.razor.css. Het Modal.razor-bestand bevat het onderdeel dat u gaat maken. In de toekomst kunt u lege tekstbestanden toevoegen aan uw project en deze opmaken met inhoud voor Razor of CSS.

2. Voeg de volgende Razor-inhoud toe aan het Modal.razor-bestand :

   @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; }
   
   }
   

   Dit onderdeel heeft verschillende handige functies die u kunt delen tussen uw projecten:

   • Een titel.
   • Knoppen annuleren en bevestigen , met labels die u kunt configureren en klikken op gebeurtenissen die u kunt beheren.
   • U kunt de binnenste inhoud van het onderdeel instellen via de ChildContent parameter.
   • U kunt de weergavestatus van het dialoogvenster beheren met de Show parameter.

3. Als u standaardopmaak voor het onderdeel wilt opgeven, voegt u de volgende CSS toe aan het Modal.razor.css-bestand :

   .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;
   }
   

Deze opmaak geeft standaard kleuren aan een titelbalk en knopbalk aan de onderkant, waardoor het aantrekkelijker is dan een eenvoudige set grijskleurige HTML-elementen.

Verwijzen naar en het modale onderdeel gebruiken

Met het modale onderdeel dat zich nu in het FirstClassLibrary-project bevindt, voegt u een nieuwe Blazor-servertoepassing toe en gaat u aan de slag met het modale onderdeel.

1. Maak een nieuw Blazor-serverproject met de naam MyBlazorApp in een map naast het FirstClassLibrary-project met behulp van de Visual Studio Add New Project-functie of door de volgende opdracht uit te voeren:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. Voeg een verwijzing toe naar het FirstClassLibrary-project in het MyBlazorApp-project , hetzij met behulp van de Visual Studio Add Reference-functie of door de volgende opdracht uit te voeren vanuit de map MyBlazorApp :

   dotnet add reference ../FirstClassLibrary
   

Met deze projectverwijzing kan de MyBlazorApp-toepassing communiceren met de onderdelen in het FirstClassLibrary-project .

1. Maak het gemakkelijker om naar het modale onderdeel te verwijzen door een vermelding toe te voegen aan het einde van het _Imports.razor-bestand in de map Onderdelen van de MyBlazorApp-toepassing . Als u dit doet, kunt u verwijzen naar het modale onderdeel zonder dat u de volledige naamruimte voor het onderdeel hoeft op te geven.

   @using FirstClassLibrary
   

2. Voeg een modaal onderdeel toe aan de openingspagina van deze toepassing, het bestand Components/Pages/Home.razor

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

   a. Geef het onderdeel een titel, 'Mijn eerste modale dialoogvenster'.
   b. Voeg een korte alinea toe die in het dialoogvenster moet worden weergegeven. In deze inhoud wordt het doel van het dialoogvenster beschreven.
   c. Stel het dialoogvenster in om zichtbaar te zijn met behulp van de Show parameter.

Controleer uw werk

Start de MyBlazorApp-toepassing met dotnet run en navigeer ernaar in uw browser. Het dialoogvenster Mijn eerste modale dialoog moet voor de rest van de inhoud op het scherm worden weergegeven.