Datenbindung und Ereignisse in Blazor Hybrid
In den vorherigen Abschnitten haben Sie die Benutzeroberfläche für Ihre Web-App definiert. Nun machen Sie sich damit vertraut, wie Sie der App Logik hinzufügen. In einer Blazor-App können Sie C#-Code in separaten CS-Dateien oder inline in Ihren Razor-Komponenten hinzufügen.
C# inline in Komponenten
Es ist üblich, HTML und C# in einer einzelnen Razor-Komponentendatei zu kombinieren. Bei einfachen Komponenten mit einfacheren Codeanforderungen funktioniert dieser Ansatz gut. Zum Hinzufügen von Code zu einer Razor-Datei verwenden Sie die Razor-Syntax.
Was sind Razor-Anweisungen?
Razor-Anweisungen sind Komponentenmarkup, mit dem C#-Code inline zu HTML hinzugefügt wird. Mit Anweisungen können Entwickler einzelne Anweisungen, Methoden oder größere Codeblöcke definieren.
Codeanweisungen
Entwickler, die Razor in MVC oder Pages verwendet haben, sollten mit Codeanweisungen vertraut sein.
Mit @expression() können Sie eine C#-Anweisung inline zu HTML-Code hinzufügen. Falls weiterer Code erforderlich ist, können Sie mit der Anweisung @code mehrere Anweisungen in Klammern hinzufügen.
Sie können der Vorlage ebenso einen @functions-Abschnitt für Methoden und Eigenschaften hinzufügen. Diese werden oben in der generierten Klasse an der Stelle hinzugefügt, an der im Dokument auf sie verwiesen werden kann.
Razor-Datenbindung
Innerhalb von Razor-Komponenten können Sie HTML-Elemente an Daten in C#-Feldern, Eigenschaften und Razor-Ausdruckswerten binden. Eine Datenbindung ermöglicht die bidirektionale Synchronisierung zwischen HTML und Ihrem Code.
Wenn eine Komponente gerendert wird, werden Daten aus HTML in .NET gepusht. Da sich Komponenten nach dem Ausführen des Ereignishandlercodes selbst rendern, werden Eigenschaftsupdates sofort nach dem Auslösen eines Ereignishandlers in der Benutzeroberfläche angezeigt
Mit dem @bind-Markup können Sie eine C#-Variable an eine HTML-Eingabe binden. In der nächsten Übung wird ein Beispiel für eine Datenbindung gezeigt.