Erstellung und Konzepte der Razor-Klassenbibliothek
- 5 Minuten
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
SupportedPlatformEintrag deklariert, dass diese Bibliothek in einerbrowserPlattform verwendet werden kann, nämlich WebAssembly. - Die
PackageReference-Instanz für dieMicrosoft.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