Erstellen einer Razor-Klassenbibliothek

Abgeschlossen

In dieser Übung erstellen Sie ein modales Dialogfeld in einer Razor-Klassenbibliothek, das Sie in der Standardvorlage für Blazor-Anwendungen wiederverwenden können.

Erstellen des Razor-Klassenbibliotheksprojekts

In diesem Modul wird das .NET 6.0 SDK verwendet. Stellen Sie sicher, dass .NET 6.0 installiert ist, indem Sie in Ihrem bevorzugten Terminal den folgenden Befehl ausführen:

dotnet --list-sdks

Daraufhin wird eine Ausgabe angezeigt, die in etwa wie folgt aussieht:

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

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 6 beginnt. Wenn keine solche Version aufgeführt wird oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 6.0 SDK.

Zunächst erstellen Sie das Razor-Klassenbibliotheksprojekt für eine modale Dialogfeldkomponente. Sie können ein neues Projekt in Visual Studio erstellen oder das Projekt mit dem .NET-Befehlszeilentool wie folgt in einem neuen Ordner erstellen:

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

Erstellen der modalen Dialogfeldkomponente

Als Nächstes erstellen Sie die modale Komponente in Ihrem Projekt mit einer entsprechenden CSS-Datei und versehen sie mit einem Anfangsformat.

1. Benennen Sie die Datei Component1.razor in Modal.razor und die Datei Component1.razor.css in Modal.razor.css um. Diese Datei Modal.razor enthält die Komponente, die wir erstellen werden. In Zukunft können Sie Ihrem Projekt leere Textdateien hinzufügen und diese mit Inhalten für Razor oder CSS entsprechend formatieren.

2. Fügen Sie der Datei Modal.razor den folgenden Razor-Inhalt hinzu:

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

   Diese Komponente verfügt über mehrere ansprechende Features, die Sie für Ihre Projekte freigeben können:

   • Titel.
   • Schaltflächen Abbrechen und Bestätigen, mit Bezeichnungen, die Sie konfigurieren können, und Klickereignissen, die Sie verwalten können.
   • Sie können den inneren Inhalt der Komponente mit dem Parameter ChildContent festlegen.
   • Sie können den Anzeigezustand des Dialogfelds mit dem Parameter Show steuern.

3. Um die Komponente standardmäßig zu formatieren, fügen Sie der Datei Modal.razor.css das folgende CSS hinzu:

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

Dieses Markup weist einer Titelleiste und einer Schaltflächenleiste am unteren Rand eine Standardfarbe zu, wodurch diese interessanter wirken als ein einfacher Satz grauer HTML-Elemente.

Verweisen auf und Verwenden der modalen Komponente

Da sich die modale Komponente nun im Projekt FirstClassLibrary befindet, fügen Sie eine neue Blazor-Serveranwendung hinzu und beginnen mit der Verwendung der modalen Komponente.

1. Erstellen Sie in einem Ordner neben dem Projekt FirstClassLibrary ein neues Blazor-Serverprojekt mit dem Namen MyBlazorApp, indem Sie entweder die Visual Studio-Option „Neues Projekt hinzufügen“ verwenden oder den folgenden Befehl ausführen:

   dotnet new blazor -o MyBlazorApp -f net8.0
   

2. Fügen Sie im Projekt MyBlazorApp einen Verweis auf das Projekt FirstClassLibrary hinzu, indem Sie entweder die Visual Studio-Option „Verweis hinzufügen“ verwenden oder den folgenden Befehl im Ordner MyBlazorApp ausführen:

   dotnet add reference ../FirstClassLibrary
   

Dank dieses Projektverweises kann die Anwendung MyBlazorApp mit den Komponenten im Projekt FirstClassLibrary interagieren.

1. Vereinfachen Sie den Verweis auf die modale Komponente, indem Sie einen Eintrag am Ende der Datei _Imports.razor im Ordner Components der Anwendung MyBlazorApp hinzufügen. Auf diese Weise können Sie auf die modale Komponente verweisen, ohne den gesamten Namespace für die Komponente angeben zu müssen.

   @using FirstClassLibrary
   

2. Fügen Sie der Startseite dieser Anwendung eine modale Komponente hinzu, die Datei Components/Pages/Home.razor.

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

   a. Geben Sie der Komponente den Titel „My first Modal dialog“.
   b. Fügen Sie einen kurzen Absatz hinzu, der im Dialogfeld angezeigt werden soll. Dieser Inhalt beschreibt den Zweck des Dialogfelds.
   c. Legen Sie mithilfe des Parameters Show fest, dass das Dialogfeld sichtbar ist.

Ihre Arbeit überprüfen

Starten Sie die Anwendung MyBlazorApp mit dotnet run, und navigieren Sie in Ihrem Browser dorthin. Das Dialogfeld My first Modal dialog sollte vor dem restlichen Inhalt auf dem Bildschirm angezeigt werden.