Funktionsweise von Blazor
Blazor bietet viele Features, mit denen Sie schnell loslegen und Ihr nächstes Web-App-Projekt bereitstellen können. Sehen wir uns die Kernfunktionen von Blazor an, damit Sie entscheiden können, ob Sie Blazor für Ihre nächste großartige Web-App verwenden sollten.
Blazor-Komponenten
Blazor-Apps sind auf Komponenten aufgebaut. Eine Blazor-Komponente ist ein wiederverwendbares Element einer Webbenutzeroberfläche. Eine Blazor-Komponente kapselt die Renderinglogik und die Logik für die Verarbeitung von Benutzeroberflächenereignissen. Blazor enthält verschiedene integrierte Komponenten für die Formularverarbeitung, die Benutzereingabeüberprüfung, die Anzeige großer Datensätze, die Authentifizierung und die Autorisierung. Fachkräfte in der Entwicklung können auch eigene benutzerdefinierte Komponenten erstellen und teilen. Zudem stehen viele vorgefertigte Blazor-Komponenten aus dem Blazor-Ökosystem zur Verfügung.
Verwenden von Standardwebtechnologien
Sie erstellen Blazor-Komponenten mithilfe der Razor-Syntax, einer praktischen Mischung aus HTML, CSS und C#. Eine Razor-Datei enthält einfachen HTML-Code und C#, um eine beliebige Renderinglogik zu definieren, z. B. für Bedingungen, Ablaufsteuerung und Ausdrucksauswertung. Razor-Dateien werden dann in C#-Klassen kompiliert, welche die Renderinglogik der Komponente kapseln. Da Blazor-Komponenten, die in Razor erstellt wurden, nur C#-Klassen sind, können Sie beliebigen .NET-Code aus Ihren Komponenten aufrufen.
Verarbeitung von Benutzeroberflächenereignissen und Datenbindung
Interaktive Blazor-Komponenten können standardmäßige Interaktionen auf Webbenutzeroberflächen mit C#-Ereignishandlern verarbeiten. Komponenten können ihren Zustand als Reaktion auf Benutzeroberflächenereignisse aktualisieren und das Rendering entsprechend anpassen. Blazor bietet auch Unterstützung für eine bidirektionale Datenbindung an Benutzeroberflächenelemente, um den Komponentenzustand mit Benutzeroberflächenelementen synchron zu halten.
Das folgende Beispiel ist eine einfache Blazor-Zählerkomponente, die in Razor implementiert wird. Der Großteil des Inhalts ist HTML, allerdings enthält der @code-Block C#. Jedes Mal, wenn die Taste gedrückt wird, wird die C#-Methode IncrementCount aufgerufen, wodurch das Feld currentCount erhöht wird, und die Komponente rendert dann den aktualisierten Wert:
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Server- und clientseitiges Rendering
Blazor unterstützt sowohl das server- als auch das clientseitige Rendering von Komponenten, um verschiedene Architekturen von Webbenutzeroberflächen zu verarbeiten. Vom Server gerenderte Komponenten können auf Serverressourcen wie Datenbanken und Back-End-Dienste zugreifen. Standardmäßig werden Blazor-Komponenten statisch vom Server gerendert, und HTML wird als Antwort auf Anforderungen generiert.
Sie können Serverkomponenten auch so konfigurieren, dass sie interaktiv sind, sodass sie beliebige Benutzeroberflächenereignisse verarbeiten, den Zustand über Interaktionen hinweg beibehalten und Aktualisierungen dynamisch rendern können. Interaktive Serverkomponenten verarbeiten Interaktionen mit der Benutzeroberfläche und Aktualisierungen über eine WebSocket-Verbindung mit dem Browser.
Alternativ können Blazor-Komponenten interaktiv vom Client gerendert werden. Die Komponente wird auf den Client heruntergeladen und über WebAssembly mit dem Browser ausgeführt. Interaktive WebAssembly-Komponenten können über die Webplattform auf Clientressourcen zugreifen, z. B. auf lokalen Speicher und Hardware. Nach dem Download können sie sogar offline genutzt werden.
Sie können verschiedene Komponenten vom Server oder Client in derselben App rendern. Viele Seiten in Ihrer App erfordern möglicherweise gar keine Interaktivität und können statisch vom Server gerendert werden. Andere interaktivere Teile Ihrer App können hingegen vom Server oder Client verarbeitet werden. Sie können entscheiden, welcher Komponentenrendermodus zur Entwurfszeit oder Laufzeit verwendet werden soll. Mit Blazor haben Sie die Flexibilität, die Web-App-Architektur zu erstellen, die für Ihr Szenario am besten geeignet ist.
Verwenden von Blazor zum Erstellen eines Pizzalieferservice
Die Benutzeroberfläche der Pizzalieferservice-App ist in viele wiederverwendbare Komponenten unterteilt: ein Seitenlayout mit einer Navigationsleiste, einzelne Seiten, ein Pizzakatalog und ein Editor, eine Bestellkomponente usw. Blazor bietet integrierte Unterstützung für viele dieser Komponenten, wie Komponenten für Formulare und Validierung. Viele der Seiten in der App können vom Server mithilfe des statischen serverseitigen Renderings verarbeitet werden, sodass die Website hauptsächlich zustandslos ist und skaliert werden kann. Wenn mehr Interaktivität erforderlich ist, werden die Komponenten interaktiv gemacht, indem ein interaktiver Rendermodus angewendet wird. Um Arbeit vom Server auszulagern, werden interaktive Komponenten über WebAssembly auf dem Client gerendert. Durch die Erstellung der gesamten App mit einem einzigen Webentwicklungsstapel ist die App schnell fertig, und schon bald gehen die Pizzabestellungen ein.