Razor-Komponenten

  • 8 Minuten

Nachdem Sie Ihre Entwicklungsumgebung eingerichtet haben, erkunden wir die Struktur eines Blazor-Projekts und erfahren, wie Blazor-Komponenten funktionieren.

Startseite

Die Startseite für die App wird durch die Datei Home.razor im Verzeichnis Components/Pages definiert. Home.razor enthält den folgenden Code:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Die @page-Direktive oben gibt die Route für diese Seite an, sodass die Home-Komponente angezeigt wird, wenn der Benutzer zum Stamm der App navigiert. Das PageTitle-Tag ist eine Blazor-Komponente, die den Titel für die aktuelle Seite festlegt, sodass er auf der Browserregisterkarte angezeigt wird. Der Rest der Datei ist ein normaler HTML-Code, der den Inhalt für die Seite definiert.

Was ist Razor?

Razor ist eine Markupsyntax, die auf HTML und C# basiert. Eine Razor-Datei (RAZOR) enthält einfachen HTML-Code und dann C#, um jede Renderinglogik zu definieren, z. B. für Bedingungen, Steuerungsflow und Ausdrucksauswertung. Razor-Dateien werden dann in C#-Klassen kompiliert, welche die Renderinglogik der Komponente kapseln.

Was sind Razor-Komponenten?

Wenn Sie die Dateien im Blazor-Projekt erkunden, können Sie sehen, dass die meisten Dateien, aus denen das Projekt besteht, RAZOR-Dateien sind. In Blazor definiert eine Razor-Datei eine wiederverwendbare Komponente, die einen Teil der App-Benutzeroberfläche bildet. Die Komponenten definieren, welche HTML gerendert werden soll und wie Benutzerereignisse behandelt werden.

Jede Razor-Komponente wird zur Kompilierzeit in eine C#-Klasse integriert. Die Klasse kann allgemeine Elemente der Benutzeroberfläche enthalten, z. B. den Zustand, die Renderinglogik, die Lebenszyklusmethoden und den Ereignishandler. Da Blazor-Komponenten, die in Razor erstellt wurden, nur C#-Klassen sind, können Sie beliebigen .NET-Code aus Ihren Komponenten verwenden.

Mit Komponenten

Um eine Komponente aus einer anderen Komponente zu verwenden, fügen Sie ein HTML-Tag mit einem Namen hinzu, der dem Namen der Komponente entspricht. Wenn Sie beispielsweise über eine Komponente mit dem Namen MyButton.razor verfügen, können Sie einer anderen Komponente eine MyButton-Komponente hinzufügen, indem Sie ein <MyButton />-Tag hinzufügen.

Komponentenparameter

Komponenten können auch Parameter enthalten, mit denen Sie Daten an die Komponente übergeben können, wenn sie verwendet wird. Komponentenparameter werden durch Hinzufügen einer öffentlichen C#-Eigenschaft zu der Komponente definiert, die ebenfalls über ein [Parameter]-Attribut verfügt. Anschließend können Sie einen Wert für einen Komponentenparameter mithilfe eines HTML-Stil-Attributs angeben, das dem Eigenschaftennamen entspricht. Der Wert des Parameters kann ein beliebiger C#-Ausdruck sein.

Der @code-Block

Der @code-Block in einer Razor-Datei wird verwendet, um einer Komponente C#-Klassenmember (Felder, Eigenschaften und Methoden) hinzuzufügen. Sie können den @code-Komponentenstatus nachverfolgen, Komponentenparameter hinzufügen, Komponentenlebenszyklusereignisse implementieren und Ereignishandler definieren.

Testen der Komponente „Counter“

Navigieren Sie in der ausgeführten App zur Seite „Counter“, indem Sie auf der linken Randleiste auf die Registerkarte „Counter“ klicken. Daraufhin sollte die folgende Seite angezeigt werden:

Counter Screenshot.

Klicken Sie auf die Schaltfläche Hier klicken, um die Anzahl ohne eine Seitenaktualisierung zu erhöhen. Für das Inkrementieren eines Zählers auf einer Webseite müssen Sie in der Regel JavaScript-Code schreiben, aber mit Blazor können Sie C# verwenden.

Die Implementierung der Komponente Counter finden Sie unter Components/Pages/Counter.razor.

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<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++;
    }
}

Eine Anforderung für /counter im Browser, wie durch die @page-Direktive oben angegeben, veranlasst die Counter-Komponente, ihren Inhalt zu rendern. Die @rendermode-Direktive ermöglicht das interaktive Serverrendering für die Komponente, sodass sie Benutzeroberflächenereignisse aus dem Browser verarbeiten kann.

Bei jeder Auswahl der Schaltfläche Hier klicken:

  • Das onclick-Ereignis wird ausgelöst.
  • Die IncrementCount -Methode wird aufgerufen.
  • Der currentCount wird inkrementiert.
  • Die Komponente wird gerendert, um die aktualisierte Anzahl anzuzeigen.