Binden von Steuerelementen an Daten in Blazor-Anwendungen

Abgeschlossen

Mit Blazor können Sie HTML-Steuerelemente an Eigenschaften binden, sodass sich ändernde Werte automatisch auf der Benutzeroberfläche (UI) angezeigt werden.

Angenommen, Sie entwickeln eine Seite, die Informationen von Kunden zu ihren Pizzavorlieben sammelt. Sie möchten die Informationen aus einer Datenbank laden und den Kunden die Möglichkeit geben, Änderungen vorzunehmen, z. B. ihre bevorzugten Beläge zu erfassen. Wenn der Benutzer eine Änderung vornimmt oder die Datenbank aktualisiert wird, sollen die neuen Werte so schnell wie möglich im UI angezeigt werden.

In dieser Lerneinheit erfahren Sie, wie Sie die Datenbindung in Blazor verwenden, um UI-Elemente mit Datenwerten, Eigenschaften oder Ausdrücken zu verknüpfen.

Was ist Datenbindung?

Wenn ein HTML-Element einen Wert anzeigen soll, können Sie Code schreiben, um die Anzeige zu ändern. Sie müssen zusätzlichen Code schreiben, um die Anzeige zu aktualisieren, wenn sich der Wert ändert. In Blazor können Sie die Datenbindung verwenden, um ein HTML-Element mit einem Feld, einer Eigenschaft oder einem Ausdruck zu verbinden. Auf diese Weise wird das HTML-Element automatisch aktualisiert, sobald sich der Wert ändert. Nach der Änderung erfolgt die Aktualisierung in der Regel schnell, und Sie müssen keinen Aktualisierungscode schreiben.

Zum Binden eines Steuerelements verwenden Sie die Anweisung @bind:

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

Auf der vorhergehenden Seite wird <input> immer dann aktualisiert, wenn sich der Wert der Variablen customerEmail ändert.

Hinweis

Steuerelemente (z. B. <input>) aktualisieren ihre Anzeige nur, wenn die Komponente gerendert wird, und nicht, wenn sich der Wert eines Felds ändert. Da Blazor-Komponenten nach jeder Ausführung von Ereignishandlercode gerendert werden, werden Aktualisierungen normalerweise schnell angezeigt.

Binden von Elementen an bestimmte Ereignisse

Die @bind-Direktive ist intelligent und versteht die von ihr verwendeten Steuerelemente. Wenn Sie beispielsweise einen Wert an ein Textfeld <input> binden, wird das value-Attribut gebunden. Ein HTML-Kontrollkästchen <input> verfügt über ein checked-Attribut anstelle eines value-Attributs. Das @bind-Attribut verwendet stattdessen automatisch dieses checked-Attribut. Standardmäßig ist das Steuerelement an das DOM-Ereignis onchange gebunden. Betrachten Sie beispielsweise die folgende Seite:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

Beim Rendern der Seite wird der Standardwert Margherita sowohl im <h1>-Element als auch im Textfeld angezeigt. Wenn Sie eine neue bevorzugte Pizza in das Textfeld eingeben, ändert sich das <h1>-Element erst, wenn Sie das Textfeld mit der Tabulatortaste verlassen oder die EINGABETASTE drücken, da das DOM-Ereignis onchange in diesem Fall ausgelöst wird.

Häufig ist dies das gewünschte Verhalten. Aber angenommen, Sie möchten, dass das <h1>-Element aktualisiert wird, sobald Sie ein Zeichen in das Textfeld eingeben. Sie können dieses Ergebnis erzielen, indem Sie stattdessen eine Bindung an das DOM-Ereignis oninput vornehmen. Für eine Bindung an dieses Ereignis müssen Sie die Direktiven @bind-value und @bind-value:event verwenden:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

In diesem Fall ändert sich der Titel, sobald Sie ein Zeichen in das Textfeld eingeben.

Formatieren von gebundenen Werten

Wenn Sie dem Benutzer Datumsangaben anzeigen, sollten Sie ein lokalisiertes Datenformat verwenden. Angenommen, Sie schreiben eine Seite speziell für Benutzer in Großbritannien, die bei Datumsangaben zuerst den Tag eingeben möchten. Sie können die @bind:format-Direktive verwenden, um eine einzelne Datumsformatzeichenfolge anzugeben:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Hinweis

Zum Zeitpunkt der Erstellung dieses Dokuments werden Formatzeichenfolgen nur für Datumswerte unterstützt. Währungsformate, Zahlenformate und andere Formate werden möglicherweise in Zukunft hinzugefügt. Die neuesten Informationen zu Bindungsformaten finden Sie unter Formatzeichenfolgen in der Blazor-Dokumentation.

Als Alternative zur Verwendung der @bind:format-Direktive können Sie C#-Code schreiben, um einen gebundenen Wert zu formatieren. Verwenden Sie die Accessoren get und set in der Memberdefinition, wie im folgenden Beispiel:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

In der nächsten Lektion wenden Sie das Gelernte an.