Erstellen einer Benutzeroberfläche mit Blazor-Komponenten

Abgeschlossen

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

Angenommen, Sie arbeiten für ein Pizzalieferunternehmen, um eine neue moderne Website zu erstellen. Sie beginnen mit einer Willkommensseite, die für die meisten Websitebenutzer zur Startseite wird. Sie möchten spezielle Angebote und beliebte Pizzas auf dieser Seite anzeigen.

In dieser Lektion 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 eine umfangreiche interaktive Benutzeroberfläche (UI) erstellen können, indem sie C#-Code schreiben. Mit Blazor können Sie dieselbe Sprache für ihren gesamten Code verwenden, sowohl serverseitig als auch clientseitig. Sie können es für die Anzeige in vielen verschiedenen Browsern rendern, einschließlich Browsern auf mobilen Geräten.

Note

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. Auf clientseitiger Seite werden UI-Updates, Ereignisse und JavaScript-Aufrufe über eine SignalR-Verbindung zwischen dem Client und dem Server gesendet. In diesem Modul besprechen und codieren wir dieses Modell.
• Blazor WebAssembly: In diesem Modell werden die Blazor-App, ihre Abhängigkeiten und die .NET-Laufzeit 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 der Razor-Syntax geschrieben, in der Code mit der @code Direktive gekennzeichnet ist. Andere Direktiven können verwendet werden, um auf Variablen zuzugreifen, an Werte zu binden und andere Renderingaufgaben zu erledigen. Wenn die App kompiliert wird, werden html und code in einer Komponentenklasse kompiliert. Komponenten werden als Dateien mit einer .razor Erweiterung geschrieben.

Note

Razor-Syntax wird zum Einbetten von .NET-Code in Webseiten verwendet. Sie können es in ASP.NET MVC-Anwendungen (Model-View-Controller) verwenden, in denen Dateien eine .cshtml Erweiterung haben. Razor-Syntax wird in Blazor verwendet, um Komponenten zu schreiben. Diese Komponenten haben stattdessen die .razor Erweiterung, und es gibt keine strikte Trennung zwischen Controllern und Ansichten.

Hier ist 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 Zeichenfolgenvariable namens welcomeMessage. Diese Variable wird innerhalb <p> von Tags im HTML-Code gerendert. Komplexere Beispiele werden später in dieser Lektion untersucht.

Erstellen von Blazor-Komponenten

Wenn Sie eine Blazor-App mithilfe der blazor Vorlage in der Dotnet-Befehlszeilenschnittstelle (CLI) erstellen, sind standardmäßig mehrere Komponenten enthalten:

dotnet new blazor -o BlazingPizzaSite

Die Standardkomponenten enthalten die Startseite index.razor und die Counter.razor Demo-Komponente. Beide Komponenten werden im Ordner "Seiten" platziert. Sie können diese Ansichten entweder an Ihre Anforderungen anpassen oder 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

• Die -n Option gibt den Namen der hinzuzufügenden Komponente an. In diesem Beispiel wird eine neue Datei namens PizzaBrowser.razor hinzugefügt.
• Die -o Option gibt den Ordner an, der die neue Komponente enthalten soll.

Important

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

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

code Pages/PizzaBrowser

Schreiben von Code in einer Blazor-Komponente

Wenn Sie eine Benutzeroberfläche in Blazor erstellen, mischen Sie statisches HTML- und CSS-Markup mit C#-Code, häufig in derselben Datei. Um diese Codetypen zu unterscheiden, verwenden Sie Razor-Syntax. Razor-Syntax umfasst Direktiven, die mit dem Symbol @ (dem '@'-Zeichen) gekennzeichnet sind, um C#-Code, Routing-Parameter, gebundene Daten, importierte Klassen und andere Features zu trennen.

Betrachten wir diese Beispielkomponente erneut:

@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 mit <h1> und <p> Tags erkennen. Dieses Markup ist das statische Framework der Seite, in das Ihr Code dynamische Inhalte einfügt. Das Razor-Markup setzt sich aus Folgendem zusammen:

• Die @page Richtlinie: Diese Richtlinie stellt Blazor eine Routenvorlage zur Verfügung. Zur Laufzeit lokalisiert Blazor eine Seite zum Rendern, indem es dieses Template mit der URL abgleicht, die der Benutzer angefordert hat. In diesem Fall kann sie mit einer URL des Formulars http://yourdomain.com/indexübereinstimmen.
• Die @code Direktive: Diese Direktive deklariert, dass der Text im folgenden Block C#-Code ist. Sie können beliebig viele Codeblöcke in eine Komponente einfügen. Sie können Komponentenklassenmber in diesen Codeblöcken definieren und deren Werte aus Berechnungen, Datensuchvorgängen oder anderen Quellen festlegen. In diesem Fall definiert der Code ein einzelnes Komponentenelement namens welcomeMessage und legt seinen Zeichenfolgenwert fest.
• Memberzugriffsdirektiven: Wenn Sie den Wert eines Elements in die Renderinglogik einschließen möchten, verwenden Sie das @ Symbol gefolgt von einem C#-Ausdruck, z. B. den Namen des Elements. In diesem Fall wird die @welcomeMessage Direktive verwendet, um den Wert des welcomeMessage Elements in den <p> Tags zu rendern.