Erstellung und Konzepte der Razor-Klassenbibliothek

Komponenten in Webanwendungen bieten Entwicklern die Möglichkeit, Teile einer Anwendungs-Benutzeroberfläche in der gesamten Anwendung wiederzuverwenden. Mithilfe von Razor-Klassenbibliotheken können Entwickler diese Komponenten in vielen Anwendungen freigeben und wiederverwenden.

In dieser Lektion erfahren Sie, wie Sie eine Razor-Klassenbibliothek erstellen. Anschließend können Sie gerenderte und statische Inhalte für Blazor-Anwendungen freigeben, um sie anzupassen und anzuzeigen.

Razor-Klassenbibliotheken

Eine Razor-Klassenbibliothek ist ein .NET-Projekttyp. Sie enthält Razor-Komponenten, Seiten, HTML- und CSS-Dateien (Cascading StyleSheet), JavaScript, Bilder und andere statische Webinhalte, auf die eine Blazor-Anwendung verweisen kann. Wie andere .NET-Klassenbibliotheksprojekte können Razor-Klassenbibliotheken als NuGet-Paket gebündelt und in NuGet-Paketrepositorys wie NuGet.org freigegeben werden.

Sehen wir uns die Standardvorlage zum Erstellen einer Razor-Klassenbibliothek an.

Erstellen eines Projekts mithilfe der Standardvorlage

Optionale können Sie mit dem Erstellen einer Razor-Klassenbibliothek in Visual Studio beginnen, indem Sie Datei>Neues Projekt auswählen.

Sie können Projekte auch auf einer Befehlszeilenschnittstelle erstellen, indem Sie den folgenden Befehl ausführen:

dotnet new razorclasslib -o MyProjectName

Diese Vorlage stellt eine erste Komponente namens Component1 bereit, die mehrere wichtige Features enthält, die Ihre Komponenten verwenden können:

• Ein isoliertes Cascading Stylesheet mit dem Namen Component1.razor.css, das im selben Ordner wie Component1.razor gespeichert ist. Die Component1.razor.css Datei ist bedingt in einer Blazor-Anwendung enthalten, die auf Component1 verweist.
• Statischer Inhalt, z. B. Bilder und JavaScript-Dateien, die zur Laufzeit für eine Blazor-Anwendung verfügbar und innerhalb von Component1 referenziert werden. Dieser Inhalt wird in einem wwwroot-Ordner übermittelt, der sich auf die gleiche Weise verhält wie ein wwwroot-Ordner in einer ASP.NET Core- oder Blazor-Anwendung.
• .NET-Code, der Funktionen ausführt, die sich in der enthaltenen JavaScript-Datei befinden.

Unterschiede zwischen einer Klassenbibliothek und einer Razor-Klassenbibliothek

Eine Klassenbibliothek ist eine allgemeine Paketübermittlungsstruktur in .NET-Anwendungen, und eine Razor-Klassenbibliothek ist ähnlich in der Struktur mit einigen anderen Features, die in der Projektdatei konfiguriert sind.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
  </ItemGroup>

</Project>

• Die Projektdatei enthält einen SDK-Verweis auf Microsoft.NET.Sdk.Razor , um zu deklarieren, dass sie Razor-Inhalte als Razor-Klassenbibliothek enthält und erstellt.
• Der SupportedPlatform Eintrag deklariert, dass diese Bibliothek in einer browser Plattform verwendet werden kann, nämlich WebAssembly.
• Die PackageReference-Instanz für die Microsoft.AspNetCore.Components.Web-Bibliothek gewährt Zugriff auf die Blazor-Basiskomponenten, die im Lieferumfang des Frameworks enthalten sind. Mit diesem Zugriff können Sie diese einfachen Komponenten verwenden, um komplexere Komponenten zu erstellen.

Inhalt der Razor-Komponente

Diese anfängliche Razor-Komponente ist einfach. Es enthält nur ein HTML-Element div mit einem kurzen Textblock:

<div class="my-component">
    This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>

Diese Komponente interagiert mit anderen Blazor-Komponenten und Seiten, die auf sie verweisen, auf die gleiche Weise, wie Sie es von einer Komponente erwarten würden, die im selben Projekt integriert ist. Das heißt, das isolierte CSS-Skript in der Component1.razor.css-Datei wird inline mit dem rest der CSS der Anwendung in der application.css-Datei gerendert.

Bereitstellung statischer Ressourcen

Sie können auf den Inhalt des Ordners "wwwroot " relativ unter den anderen Inhalten dieses Ordners verweisen. Sie können auch relativ auf die einzelnen CSS-Dateien der Komponenten verweisen, z. B. Component1.razor.css, wie Dateien im selben Basisordner. Die Standard-CSS fügt beispielsweise einen gestrichelten roten Rahmen und eine Hintergrundbildformatvorlage hinzu, die das background.png Bild im Ordner "wwwroot " verwendet. Es ist kein Pfad erforderlich, um diesen Verweis vom CSS auf den Inhalt zu erstellen, der sich im Ordner "wwwroot " befindet.

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Die Inhalte des wwwroot-Ordners stehen für verweise von gehosteten Blazor-Anwendungen mit einem absoluten Ordnerverweis im Format zur Verfügung:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Auf eine Razor-Klassenbibliothek verweisen

In einer .NET-Lösung, in der sich die Razor-Klassenbibliothek auf dem Datenträger neben einer Blazor-Anwendung befindet, die auf die Bibliothek verweist, können Sie die Blazor-Anwendung aktualisieren, um auf die Razor-Klassenbibliothek zu verweisen, indem Sie das standardmäßige Visual Studio-Dialogfeld " Verweis hinzufügen " verwenden und den Befehl .NET CLI add reference verwenden, wie hier gezeigt:

dotnet add reference ../MyClassLibrary

Für Bibliotheken, die im NuGet-Paketformular bereitgestellt werden, können Sie einen Verweis mithilfe des Visual Studio NuGet-Paketinstallationsprogramms oder mithilfe des .NET CLI-Befehls add package hinzufügen, wie hier gezeigt:

dotnet add package MyClassLibrary