Kolumne: .NETversum
Steuerung der Datenbindung in Blazor
Eine mit @bind definierte Zwei-Wege-Datenbindung erfolgt in Eingabeformularen in Blazor erst, wenn das Steuerelement vom Benutzer der Webseite verlassen wird. Das kann der Softwareentwickler aber bei Bedarf ändern.
Datenbindung beim Verlassen des Felds
Listing 1 zeigt mehrere Varianten der Datenbindung einer Property Name an ein HTML-Texteingabefeld. Dabei ist in die Property der Setter so implementiert, dass bei jeder Wertänderung eine Ausgabe in die Browserkonsole erfolgt (mit der Hilfsmethode Util.Log(), die sowohl in Blazor WebAssembly als auch in Blazor Server funktioniert und in dieser Kolumne bereits in Ausgabe 7.21 vorgestellt wurde). Zudem wird der jeweils aktuelle Inhalt der Property Name auch in der Rubrik Ausgabe per @Name ausgegeben. Abbildung 1 zeigt die Wirkung der Standardbindung mit @bind: Da der Benutzer das Eingabefeld noch nicht verlassen hat, wurde der Inhalt noch nicht an die Property Name gesendet.
Abb. 1: Datenbindung mit @bindListing 1: Varianten der Datenbindung in Blazor
@page "/Demos/Datenbindung"
<h3>Datenbindung</h3>
<hr />
@using ITVisions.Blazor
@inject BlazorUtil Util
@code {
public string _Name;
public string Name
{
get => _Name;
set
{
_Name = value;
Util.Log("Name=" + _Name);
}
}
void OnInputHandler(ChangeEventArgs args)
{
Util.Log("Name=" + _Name + "/args = " + args.Value);
}
public void OnKeyUpHandler(KeyboardEventArgs args)
{
Util.Log("Name=" + _Name + "/args = " + args.Key + " (" + args.Code + ")");
if (args.Key == "Enter")
{
Util.Log("Enter gedrückt!");
}
}
}
<h4>Bindung mit @@bind</h4>
<input type="text" id="C_Name" @bind="Name" class="form-control" />
<h4>Bindung mit @@bind-value="Name" @@bind-value:event="onchange"</h4>
<input type="text" id="C_Name" @bind-value="Name" @bind-value:event="onchange" class="form-control" />
<h4>Bindung mit @@bind-value="Name" @@bind-value:event="oninput"</h4>
<input type="text" id="C_Name" @bind-value="Name" @bind-value:event="oninput" class="form-control" />
<h4>Bindung mit @@bind-value="Name" @@oninput</h4>
<input type="text" id="C_Name" @bind="Name" @oninput="OnInputHandler" class="form-control" />
<h4>Bindung mit @@bind-value="Name" @@onkeyup</h4>
<input type="text" id="C_Name" @bind="Name" @onkeyup="OnKeyUpHandler" class="form-control" />
<h4>Ausgabe</h4>
Name = @NameDatenbindung bei jeder Änderung
Der Datenbindungsausdruck
@bind="Property"ist eine Kurzform der Kombination:
@bind-value="Property" @bind-value:event="onchange"Das heißt also, dass @bind dafür sorgt, dass die ...