Erstellen einer Benutzeroberfläche mit Blazor-Komponenten

Abgeschlossen

Mit Blazor-Komponenten können Sie Webseiten oder HTML-Teile, die dynamische Inhalte aufweisen, mithilfe von .NET-Code definieren. In Blazor können Sie dynamische Inhalte mit C# formulieren, anstatt JavaScript zu verwenden.

Angenommen, Sie arbeiten für einen Pizzalieferdienst und sollen eine neue moderne Website erstellen. Sie beginnen mit einer Willkommensseite, die für die meisten Websitebenutzer als Startseite dient. Sie möchten spezielle Angebote und beliebte Pizzas auf dieser Seite anzeigen.

In dieser Lerneinheit erfahren Sie, wie Sie Komponenten in Blazor erstellen und Code schreiben, der dynamische Inhalte für diese Komponenten rendert.

Grundlegendes zu Blazor-Komponenten

Blazor ist ein Framework, mit dem Entwickler durch das Schreiben von C#-Code eine umfassende interaktive Benutzeroberfläche erstellen können. Mit Blazor können Sie die gleiche Sprache für den gesamten Code verwenden, sowohl server- als auch clientseitig, und ihn für die Anzeige in vielen verschiedenen Browsern rendern, einschließlich Browsern auf mobilen Geräten.

Hinweis

Es gibt zwei Hostingmodelle für Code in Blazor-Apps:

• Blazor Server: In diesem Modell wird die App auf dem Webserver innerhalb einer ASP.NET Core-App ausgeführt. Aktualisierungen der Benutzeroberfläche, Ereignisse und JavaScript-Aufrufe auf Clientseite werden über eine SignalR-Verbindung zwischen dem Client und dem Server gesendet. In diesem Modul wird der Code für dieses Modell erläutert.
• Blazor WebAssembly: In diesem Modell werden die Blazor-App, ihre Abhängigkeiten und die .NET-Runtime heruntergeladen und im Browser ausgeführt.

In Blazor erstellen Sie die Benutzeroberfläche aus eigenständigen Teilen des Codes, die als Komponenten bezeichnet werden. Jede Komponente kann eine Mischung aus HTML und C#-Code enthalten. Komponenten werden mithilfe von Razor-Syntax geschrieben, bei der Code mit der @code-Anweisung markiert wird. Weitere Anweisungen können für den Zugriff auf Variablen, das Binden an Werte und andere Renderingaufgaben verwendet werden. Beim Kompilieren der App werden HTML und Code in eine Komponentenklasse kompiliert. Komponenten werden als Dateien mit der Erweiterung .razor geschrieben.

Hinweis

Die Razor-Syntax wird zum Einbetten von .NET-Code in Webseiten verwendet. Sie können sie in ASP.NET MVC-Anwendungen verwenden, deren Dateien die Erweiterung .cshtml aufweisen. Razor-Syntax wird in Blazor zum Schreiben von Komponenten verwendet. Diese Komponenten weisen stattdessen die Erweiterung RAZOR auf, und es gibt keine strikte Trennung zwischen Controllern und Ansichten.

Hier sehen Sie ein einfaches Beispiel für eine Blazor-Komponente:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

In diesem Beispiel legt der Code den Wert einer Zeichenfolgenvariablen mit dem Namen welcomeMessage fest. Diese Variable wird in <p>-Tags im HTML gerendert. Später in dieser Lerneinheit werden noch komplexere Beispiele behandelt.

Erstellen von Blazor-Komponenten

Wenn Sie eine Blazor-App mithilfe der blazorserver-Vorlage an der dotnet-Befehlszeilenschnittstelle (CLI) erstellen, sind standardmäßig verschiedene Komponenten enthalten:

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

Zu den Standardkomponenten gehören die Index.razor-Startseite und die Counter.razor-Demokomponente. Beide Komponenten werden im Ordner Pages abgelegt. Sie können diese Ansichten entweder Ihren Anforderungen entsprechend ändern oder sie löschen und durch neue Komponenten ersetzen.

Verwenden Sie den folgenden Befehl, um einer vorhandenen Web-App eine neue Komponente hinzuzufügen:

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• Die Option -n gibt den Namen der hinzuzufügenden Komponente an. In diesem Beispiel wird eine neue Datei mit dem Namen PizzaBrowser.razor hinzugefügt.
• Die Option -o gibt den Ordner an, der die neue Komponente enthalten soll.
• Die Option -f erzwingt die Erstellung der Anwendung mit der Frameworkversion .NET 6.

Wichtig

Der Name einer Blazor-Komponente muss mit einem Großbuchstaben beginnen.

Nachdem Sie die Komponente erstellt haben, können Sie sie öffnen, um sie mit Visual Studio Code zu bearbeiten:

code Pages/PizzaBrowser

Schreiben von Code in einer Blazor-Komponente

Wenn Sie eine Benutzeroberfläche in Blazor erstellen, kombinieren Sie statisches HTML- und CSS-Markup mit C#-Code, oftmals in derselben Datei. Um diese Codetypen zu unterscheiden, verwenden Sie die Razor-Syntax. Die Razor-Syntax enthält Direktiven mit dem Symbol @ als Präfix, die den C#-Code, Routingparameter, gebundene Daten, importierte Klassen und andere Funktionen begrenzen.

Sehen wir uns diese Beispielkomponente noch einmal an:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

Sie können das HTML-Markup an den <h1>- und <p>-Tags erkennen. Dieses Markup ist das statische Framework der Seite, in das der Code dynamische Inhalte einfügt. Das Razor-Markup setzt sich aus Folgendem zusammen:

• Die @page-Anweisung: Diese Anweisung stellt eine Routenvorlage für Blazor bereit. Zur Laufzeit sucht Blazor eine zu rendernde Seite, indem diese Vorlage mit der vom Benutzer angeforderten URL abgeglichen wird. In diesem Fall kann sie mit einer URL in der Form http://yourdomain.com/index übereinstimmen.
• Die @code-Anweisung: Diese Anweisung deklariert, dass es sich bei dem Text im folgenden Block um C#-Code handelt. Sie können jede benötigte Anzahl von Codeblöcken in eine Komponente einfügen. In diesen Codeblöcken können Sie Komponentenklassenmember definieren und ihre Werte aus Berechnungen, Datensuchvorgängen oder anderen Quellen festlegen. In diesem Fall definiert der Code einen einzelnen Komponentenmember namens welcomeMessage und legt dessen Zeichenfolgenwert fest.
• Anweisungen für den Memberzugriff: Wenn Sie den Wert eines Members in die Renderinglogik aufnehmen möchten, verwenden Sie das @-Symbol, gefolgt von einem C#-Ausdruck, z. B. dem Namen des Members. In diesem Fall wird die @welcomeMessage-Direktive verwendet, um den Wert des Members welcomeMessage in den <p>-Tags zu rendern.