Erstellung und Konzepte der Razor-Klassenbibliothek

5 Minuten

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

In dieser Lektion erfahren Sie, wie Sie eine Razor-Klassenbibliothek erstellen und diese anschließend verwenden, um gerenderte und statische Inhalte für Blazor-Anwendungen zum Zwecke der Anpassung und Anzeige freizugeben.

Informationen zu Razor-Klassenbibliotheken

Eine Razor-Klassenbibliothek ist ein .NET-Projekttyp, der Razor-Komponenten, Seiten, HTML, CSS-Dateien (Cascading Style Sheet), JavaScript, Bilder und andere statische Webinhalte enthält, auf die von einer Blazor-Anwendung verwiesen werden kann. Genau 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 anhand der Standardvorlage

Optional können Sie in Visual Studio mit der Erstellung einer Razor-Klassenbibliothek beginnen, indem Sie Datei>Neues Projekt auswählen.

Screenshot of the

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

dotnet new razorclasslib -o MyProjectName

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

Ein isoliertes Cascading Stylesheet mit dem Namen Component1.razor.css, das im selben Ordner wie Component1.razor gespeichert ist. Die Datei Component1.razor.css ist unter bestimmten Bedingungen in einer Blazor-Anwendung enthalten, die auf Component1 verweist.
Statische Inhalte wie Bilder und JavaScript-Dateien, die einer Blazor-Anwendung zur Laufzeit zur Verfügung stehen und auf die in Component1 verwiesen wird. Dieser Inhalt wird im Ordner wwwroot bereitgestellt, der sich so wie ein Ordner wwwroot in einer ASP.NET Core- oder Blazor-Anwendung verhält.
.NET-Code, der Funktionen ausführt, die sich in der enthaltenen JavaScript-Datei befinden.

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

Unterschiede zwischen einer Klassenbibliothek und Razor-Klassenbibliothek

Eine Klassenbibliothek ist eine übliche Struktur für die Bereitstellung von Paketen in .NET-Anwendungen. Eine Razor-Klassenbibliothek hat eine ähnliche Struktur mit einigen weiteren 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 – WebAssembly – verwendet werden kann.
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. So können Sie anhand dieser einfachen Komponenten komplexere Komponenten erstellen.

Inhalt der Razor-Komponente

Die anfänglich bereitgestellte Razor-Komponente ist schlicht. Sie enthält nur das 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 bereitgestellt wird. Das heißt, dass das isolierte CSS-Skript in der Datei Component1.razor.css inline mit dem Rest des CSS der Anwendung in der Datei application.css gerendert wird.

Bereitstellung statischer Ressourcen

Sie können auf den Inhalt des Ordners wwwroot relativ zu den anderen Inhalten in diesem Ordner und auf die einzelnen CSS-Dateien der Komponenten, wie z. B. Component1.razor.css, als Dateien im selben Basisordner verweisen. Beispielsweise fügt das standardmäßige CSS einen gestrichelten 2 Pixel breiten roten Rahmen und einen Hintergrundbildstil hinzu, indem es das Bild background.png im Ordner wwwroot verwendet. Für diesen Verweis vom CSS auf den Inhalt, der sich im Ordner wwwroot befindet, ist kein Pfad erforderlich.

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

Auf den Inhalt des Ordners wwwroot kann von gehosteten Blazor-Anwendungen mit einem absoluten Ordnerverweis im folgenden Format verwiesen werden:

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Verweisen auf eine Razor-Klassenbibliothek

In einer .NET-Projektmappe, 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 so aktualisieren, dass sie auf die Razor-Klassenbibliothek verweist, indem Sie das Visual Studio-Standarddialogfeld Verweis hinzufügen und den .NET CLI-Befehl add reference verwenden, wie hier gezeigt:

dotnet add reference ../MyClassLibrary

Bei Bibliotheken, die als NuGet-Paket bereitgestellt werden, können Sie einen Verweis mit dem NuGet-Paketinstallationsprogramm in Visual Studio oder mit dem .NET CLI-Befehl add package hinzufügen, wie hier gezeigt:

dotnet add package MyClassLibrary