@DGIM studio/shutterstock.com
Gemeinsame Nutzung von Blazor-Komponenten mit Razor-Klassenbibliotheken

On the Blazor’s Edge


Blazor ist ein Framework des Microsoft ASP.NET-Teams, das ein neues Komponentenmodell einführt, mit dem sich Single Page Applications ohne JavaScript entwickeln lassen. In diesem Artikel beleuchten wir an einem Praxisbeispiel die Erstellung und Nutzung von .NET-Abhängigkeiten durch Razor-Klassenbibliotheken – Schritt für Schritt zum Mitmachen.

Blazor – klingt irgendwie neu für Sie? Dann liegt das womöglich daran, dass Blazor erst seit 2018 in Entwicklung ist und zunächst als experimentelles Projekt geführt wurde. Das Blazor Framework zielt auf die Mono WebAssembly Runtime (die zu Wasm kompilierte .NET Runtime) ab und ermöglicht so die Ausführung von .NET im Browser. Das inspirierte Microsoft wohl auch zu dem Namen: Browser + Razor = Blazor.

In dieser Konfiguration werden die Ressourcen der Anwendung einschließlich der .dll-Dateien an den Client geliefert und die Mono WebAssembly Runtime ausgeführt. Das Diagramm in Abbildung 1 zeigt den Stack des Blazor Frameworks innerhalb des Browsers.

charbeneau_blazor_1.tif_fmt1.jpgAbb. 1: Blazor führt das .NET Framework auf einem UI-Thread im Browser aus

Was ist eine Razor-Komponente?

Obwohl die Begriffe Razor-Komponente und Blazor-Komponente weitgehend synonym verwendet werden, lautet die korrekte Terminologie eigentlich Razor-Komponente. Das Modell einer Razor-Komponente ist erfrischend einfach: Komponenten können Markup (HTML) und Logik (C#) in einer einzigen Razor-(cshtml-)Datei enthalten. Die Komponente ist in der Lage, Data Binding, Ereignisse und Dependency Injection ohne JavaScript zu verarbeiten. Die in Abbildung 2 dargestellte Counter-Komponente veranschaulicht die grundlegende Zusammensetzung einer Razor-Komponente.

charbeneau_blazor_2.tif_fmt1.jpgAbb. 2: Quellcode einer Razor-Komponente

Die Counter-Komponente verwendet eine einfache HTML-Schaltfläche, um ein Zählerfeld zu inkrementieren, das innerhalb eines Absatztags angezeigt wird. Da Blazor als Single Page Application (SPA) arbeitet, finden alle Interaktionen in der Komponente auf dem Client statt. Aktualisierungen des Document Object Model (DOM) des Browsers werden vom Blazor Framework durch Data Binding vorgenommen.

Was sind Razor-Klassenbibliotheken?

Razor-Klassenbibliotheken (Razor Class Libraries, RCL) sind Pakete, die eine beliebige Kombination von Komponenten, Seiten, Interop-Code und unterstützende statische Assets wie JavaScript, CSS, Bilder und Schriftarten enthalten. Die Idee ist, voll funktionsfähige Komponenten zu haben, die out of the box entweder durch .dll-Dateien oder NuGet-Pakete geliefert werden können. Ein zuverlässiger Mechanismus für die gemeinsame Nutzung von Ressourcen schafft eine produktive Umgebung für die Erstellung von Blazor-Anwendungen. Um ein solides Verständnis der Razor-Klassenbibliotheken zu erhalten, wollen wir in diesem Artikel eine neue RCL erstellen und sie dann in einer Blazor-Anwendung verwenden. Los gehts!

Eine neue Razor-Klassenbibliothek

Um eine neue RCL zu entwickeln, setzen wir das .NET-Razor-Class-Library-Template ein. In den folgenden Beispielen verwenden wir Visual Studio und von Microsoft bereitgestellte Templates. Wir beginnen mit einer neuen Anwendung und fügen dem Projekt eine RCL hinzu. Das Dial...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang