Razor-Komponenten in Blazor Hybrid

  • 8 Minuten

Nachdem Sie nun Ihre Entwicklungsumgebung eingerichtet haben, untersuchen Sie die Struktur eines Blazor Hybrid-Projekts und erfahren, wie neue Seiten hinzugefügt werden.

Was ist Razor?

Razor ist eine Markupsyntax zum Einbetten von .NET-basiertem Code in Webseiten. Die Razor-Syntax besteht aus HTML, C# und einer Razor-spezifischen Syntax, die in der Regel mit einem @-Zeichen beginnt. Dateien, die Razor enthalten, haben in der Regel eine .cshtml-Dateierweiterung (bei der serverseitigen Entwicklung mit Razor Pages und MVC) oder eine .razor-Erweiterung, wenn sie in Razor-Komponenten-Dateien verwendet werden. Die Razor-Syntax ähnelt den Vorlagen-Engines verschiedener JavaScript-Frameworks für Single-Page-Webanwendungen (SPA), wie z. B. Angular, React, VueJs und Svelte.

Was sind Razor-Komponenten?

Eine Razor-Komponente definiert ein wiederverwendbares Web-UI-Element. Blazor-Komponenten sind analog zu React- und Angular-Komponenten in SPA-Frameworks.

Bei der Erkundung des Projekts werden Sie verschiedene Razor-Komponenten bemerken, die in .razor-Dateien definiert sind.

Jede Razor-Komponente wird zur Kompilierzeit in eine .NET-Klasse integriert. Die Klasse enthält allgemeine Elemente der Benutzeroberfläche, z. B. den Zustand, Renderinglogik, Lebenszyklusmethoden und Ereignishandler.

Testen der Komponente „Counter“

Navigieren Sie in der ausgeführten App zur Zählerseite, indem Sie die Registerkarte Zähler in der linken Seitenleiste auswählen. Daraufhin sollte die folgende Seite angezeigt werden:

Screenshot: Registerkarte „Counter“

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"

<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.

Bei jeder Auswahl der Schaltfläche Hier klicken:

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

Wissen auf den Prüfstand stellen

1.

Welche .NET-Runtime verwenden Blazor Hybrid-Apps?

2.

Wie ist die Blazor-UI typischerweise definiert?