Datenbindung und Ereignisse

Abgeschlossen

Wir untersuchen, wie Sie Komponentenrenderinglogik definieren und UI-Ereignisse behandeln.

Rendern von C#-Ausdruckswerten

Wenn Sie den Wert eines C#-Ausdrucks in Razor rendern möchten, verwenden Sie ein anführendes @-Zeichen. Beispielsweise kann eine Counter-Komponente den Wert des Felds currentCount wie folgt rendern:

<p role="status">Current count: @currentCount</p>

Razor kann in der Regel herausfinden, wann ein C#-Ausdruck endet und Sie zum Schreiben von HTML zurückwechseln. Sie können jedoch auch explizit über den Anfang und das Ende des Ausdrucks mithilfe von eckigen Klammern sprechen.

<p role="status">Current count: @(currentCount)</p>

Ablaufsteuerung hinzufügen

Sie können ihrer Komponentenrenderinglogik mithilfe normaler C#-Anweisungen den Steuerungsflow hinzufügen. Sie können z. B. einige Inhalte bedingt mit einer C#-If-Anweisung rendern, z. B. wie folgt:

@if (currentCount > 3)
{
    <p>You win!</p>
}

Sie können auch C# verwenden, um Daten zu durchlaufen und eine Liste von Elementen zu rendern:

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Behandeln von Ereignissen

Blazor-Komponenten behandeln häufig UI-Ereignisse. Um einen Ereignisrückruf für ein Ereignis aus einem UI-Element anzugeben, verwenden Sie ein Attribut, das mit @on beginnt und mit dem Ereignisnamen endet. Sie können die IncrementCount-Methode beispielsweise als Handler für ein Schaltflächenklickereignis mithilfe des Attributs @onclick angeben, z. B. wie folgt:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Sie können auch C#-Ereignishandler für andere HTML-Ereignisse angeben, z. B. @onchange, @oninput, usw. Ereignishandlermethoden können synchron oder asynchron sein. Sie können Ereignishandler auch inline mit C#-Lambdaausdrücken definieren:

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

Ereignishandlermethoden können optional ein Ereignisargument mit Informationen zum Ereignis verwenden. Sie können beispielsweise auf den Wert eines Eingabeelements zugreifen, das sich wie folgt geändert hat:

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

Nachdem ein Ereignishandler ausgeführt wurde, rendert Blazor die Komponente automatisch mit dem neuen Zustand, sodass die Meldung nach den Eingabeänderungen angezeigt wird.

Datenbindung

Häufig soll der Wert eines UI-Elements an einen bestimmten Wert im Code gebunden werden. Wenn sich der Wert des UI-Elements ändert, sollte der Codewert geändert werden, und wenn der Codewert das UI-Element ändert, sollte der neue Wert angezeigt werden. Blazors Datenbindungsunterstützung erleichtert das Einrichten dieser Art von bidirektionaler Datenbindung.

Sie binden ein UI-Element an einen bestimmten Wert im Code mithilfe des @bind-Attributs. Beispiel:

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Wenn Sie den Wert der Eingabe ändern, wird das text-Feld mit dem neuen Wert aktualisiert. Und wenn Sie den Wert des text-Felds ändern, indem Sie auf die Schaltfläche „Löschen“ klicken, wird der Wert der Eingabe ebenfalls gelöscht.

Razor-Direktiven

Razor-Direktiven sind reservierte Schlüsselwörter in der Razor-Syntax, die beeinflussen, wie eine Razor-Datei kompiliert wird. Razor-Direktiven beginnen immer mit dem @-Zeichen. Einige Razor-Direktiven erscheinen am Anfang einer neuen Zeile, wie @page und @code, während andere Attribute als Attribute auf Elemente angewendet werden können, z. B. @bind. Eine vollständige Liste der Razor-Direktiven finden Sie in der Referenz zur Razor-Syntax.

Aktivieren von Interaktivität

Um UI-Ereignisse aus einer Komponente zu behandeln und die Datenbindung zu verwenden, muss die Komponente interaktiv sein. Blazor-Komponenten werden standardmäßig statisch vom Server gerendert, was bedeutet, dass sie HTML als Reaktion auf Anforderungen generieren und andernfalls keine UI-Ereignisse verarbeiten können. Sie erstellen eine Komponente interaktiv, indem Sie einen interaktiven Rendermodus mithilfe der @rendermode-Direktive anwenden.

Sie können die @rendermode-Direktive auf eine Komponentendefinition anwenden:

@rendermode InteractiveServer

Oder zu einer Komponenteninstanz:

<Counter @rendermode="InteractiveServer" />

Die Counter-Komponente ist derzeit die einzige interaktive Komponente in unserer App und verwendet interaktives Serverrendering. Das interaktive Serverrendering verarbeitet UI-Ereignisse vom Server über eine WebSocket-Verbindung mit dem Browser. Blazor sendet UI-Ereignisse über diese Verbindung an den Server, damit die Komponenten der App sie verarbeiten können. Blazor behandelt dann die Aktualisierung des Browser-DOM mit den gerenderten Updates.

Alternativ können Blazor-Komponenten den InteractiveWebAssembly-Rendermodus verwenden, um interaktiv vom Client zu rendern. In diesem Modus wird der Komponentencode in den Browser heruntergeladen und clientseitig mithilfe einer webAssembly-basierten .NET-Laufzeit ausgeführt.

Welchen interaktiven Rendermodus Sie verwenden möchten, hängt von den Anforderungen Ihrer App ab. Derzeit ist unser Blazor-Projekt nur für das serverbasierte Rendering eingerichtet, daher verwenden wir für dieses Modul das statische und interaktive Serverrendering.