C# Academy · Lektion

Datenbindung und Ereignisbehandlung

Wenden Sie ein- und zweiseitige Datenbindung an, behandeln Sie DOM- und Komponentenereignisse und verwenden Sie EventCallback.

Datenbindung und Ereignisbehandlung ist eine kostenlose C# Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des C# Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der C# Academy-Kurs umfasst insgesamt 4 Lektionen.

Datenbindung in Blazor

Blazor unterstützt drei Bindungsarten: einseitig (schreibgeschützt, @expr), ereignisbasiert (@onclick usw.) und zweiseitig (@bind). Zusammen bilden sie die Grundlage reaktiver Benutzeroberflächen.

Einseitige Datenbindung

Geben Sie einfach einen C#-Ausdruck innerhalb des Markups mit @ aus. Der Wert wird bei jedem erneuten Rendern der Komponente aktualisiert, aber das DOM kann keine Werte zurück an C# übergeben.

<!-- One-way: C# -> DOM -->
<p>Count: @_count</p>
<p>Full name: @($"{_firstName} {_lastName}")</p>
<p>Price: @Price.ToString("C")</p>

@code {
    private int _count = 0;
    private string _firstName = "Alice";
    private string _lastName = "Smith";
    [Parameter] public decimal Price { get; set; }
}

Zweiseitige Bindung mit @bind

@bind verknüpft ein Eingabeelement über das Setzen der Eigenschaft und Änderungsereignisse mit einem Feld. Dies funktioniert mit Texten, Zahlen, Datumsangaben, Kontrollkästchen und Auswahllisten.

<input @bind="_name" placeholder="Enter name" />
<input type="number" @bind="_quantity" />
<input type="date" @bind="_dueDate" />
<input type="checkbox" @bind="_isActive" />

<p>Name: @_name | Qty: @_quantity | Active: @_isActive</p>

@code {
    private string _name = "";
    private int _quantity = 1;
    private DateTime _dueDate = DateTime.Today;
    private bool _isActive = true;
}

@bind mit einem benutzerdefinierten Ereignis

Standardmäßig verwendet @bind das Ereignis onchange. Verwenden Sie @bind:event, um dies zu ändern – beispielsweise wird oninput bei jedem Tastendruck ausgelöst und eignet sich für die Live-Suche.

@* Updates on every keystroke instead of on focus-loss *@
<input @bind="_search"
       @bind:event="oninput"
       placeholder="Live search..." />

<ul>
    @foreach (var item in Filtered)
    {
        <li>@item</li>
    }
</ul>

@code {
    private string _search = "";
    private string[] Items = { "Apple", "Banana", "Cherry", "Avocado" };
    private IEnumerable<string> Filtered =>
        Items.Where(i => i.Contains(_search, StringComparison.OrdinalIgnoreCase));
}

Ereignisbehandlung mit @onclick

Verwenden Sie @onclick (und andere DOM-Ereignisdirektiven), um C#-Delegates an DOM-Ereignisse zu binden. Sowohl synchrone Methoden als auch asynchrone Tasks funktionieren.

<button @onclick="Increment">+</button>
<button @onclick="DecrementAsync">-</button>
<button @onclick="() => _count = 0">Reset</button>
<p>Count: @_count</p>

@code {
    private int _count = 0;

    private void Increment() => _count++;

    private async Task DecrementAsync()
    {
        await Task.Delay(200); // simulate async work
        _count--;
    }
}

Ereignisargumente

DOM-Ereignisse stellen Objekte mit Ereignisargumenten bereit. Geben Sie in Ihrem Handler den passenden Argumenttyp an, um auf Koordinaten, Tastencodes, Eingabewerte usw. zuzugreifen.

<input @onkeydown="OnKeyDown" @onfocus="OnFocus" />
<div @onmousemove="OnMouseMove">Move here</div>
<p>@_info</p>

@code {
    private string _info = "";

    private void OnKeyDown(KeyboardEventArgs e)
        => _info = $"Key: {e.Key} (Ctrl={e.CtrlKey})";

    private void OnFocus(FocusEventArgs e)
        => _info = "Input focused";

    private void OnMouseMove(MouseEventArgs e)
        => _info = $"Mouse: ({e.ClientX}, {e.ClientY})";
}

EventCallback für die Kommunikation zwischen über- und untergeordneten Komponenten

EventCallback ist in Blazor der vorgesehene Weg für die Kommunikation von untergeordneten zu übergeordneten Komponenten. Anders als ein reguläres Action/Func löst es automatisch StateHasChanged auf der übergeordneten Komponente aus und behandelt Ausnahmen korrekt.

@* Child: ProductCard.razor *@
<button @onclick="() => OnBuy.InvokeAsync(Product)">Buy</button>

@code {
    [Parameter] public Product Product { get; set; } = default!;
    [Parameter] public EventCallback<Product> OnBuy { get; set; }
}

@* Parent: *@
<ProductCard Product="p" OnBuy="HandleBuy" />

@code {
    private async Task HandleBuy(Product p)
    {
        await CartService.AddAsync(p);
        // Parent re-renders automatically
    }
}

Standardaktionen verhindern und Weitergabe stoppen

Verwenden Sie @onclick:preventDefault, um die Standardaktion des Browsers abzubrechen, und @onclick:stopPropagation, um das Bubbling des Ereignisses zu stoppen.

@* Prevent form submission *@
<form @onsubmit="HandleSubmit" @onsubmit:preventDefault>
    <input @bind="_value" />
    <button type="submit">Save</button>
</form>

@* Stop click from bubbling to parent div *@
<div @onclick="ParentClicked">
    <button @onclick="ChildClicked"
            @onclick:stopPropagation>
        Click me
    </button>
</div>

Zweiseitige Bindung mit @bind-Value für benutzerdefinierte Komponenten

Implementieren Sie das Value/ValueChanged-Muster in einer benutzerdefinierten Komponente, um @bind-Value von der übergeordneten Komponente zu unterstützen – der Standardvertrag für zweiseitige Bindung in Blazor.

@* RatingInput.razor *@
@for (int i = 1; i <= 5; i++)
{
    int star = i;
    <span class="@(star <= Value ? "filled" : "")"
          @onclick="() => ValueChanged.InvokeAsync(star)">★</span>
}

@code {
    [Parameter] public int Value { get; set; }
    [Parameter] public EventCallback<int> ValueChanged { get; set; }
}

@* Usage: *@
<RatingInput @bind-Value="_rating" />

Eingabeereignisse entprellen

Bei aufwendigen Vorgängen, die durch Benutzereingaben ausgelöst werden (API-Aufrufe, umfangreiche Filterung), entprellen Sie das Ereignis mit einer CancellationTokenSource, um die Ausführung zu verzögern, bis der Benutzer mit der Eingabe aufhört.

@code {
    private string _query = "";
    private CancellationTokenSource? _cts;

    private async Task OnSearchInput(ChangeEventArgs e)
    {
        _query = e.Value?.ToString() ?? "";
        _cts?.Cancel();
        _cts = new CancellationTokenSource();

        try
        {
            await Task.Delay(300, _cts.Token); // wait 300ms
            Results = await SearchService.SearchAsync(_query);
        }
        catch (TaskCanceledException) { /* user still typing */ }
    }

    private List<string> Results = new();
}

Kurze Überprüfung

Welchen Vorteil bietet EventCallback gegenüber Action/Func bei Ereignissen von untergeordneten zu übergeordneten Komponenten in Blazor?

Zusammenfassung: Datenbindung und Ereignisbehandlung

Wichtigste Erkenntnisse:

Einseitige Bindung: C#-Ausdrücke mit @expr ausgeben
Zweiseitige Bindung: @bind für Eingaben verwenden; @bind:event ändert den Auslöser
DOM-Ereignisse: @onclick, @oninput, @onkeydown mit typisierten Ereignisargumenten
EventCallback<T>: Kommunikation von untergeordneten zu übergeordneten Komponenten mit automatischem StateHasChanged
Value/ValueChanged für die zweiseitige Bindung benutzerdefinierter Komponenten implementieren
Aufwendige Vorgänge entprellen, um unnötige API-Aufrufe zu reduzieren

Häufig gestellte Fragen

Ist die Lektion „Datenbindung und Ereignisbehandlung“ kostenlos?

Ja — der vollständige Text von „Datenbindung und Ereignisbehandlung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des C# Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der C# Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Datenbindung und Ereignisbehandlung“?

Wenden Sie ein- und zweiseitige Datenbindung an, behandeln Sie DOM- und Komponentenereignisse und verwenden Sie EventCallback. Du übst C# Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um C# Academy zu starten?

Keine Vorkenntnisse erforderlich. C# Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Datenbindung und Ereignisbehandlung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser C# Academy-Lektion Code schreiben und ausführen?

Ja. Jede C# Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu C# Academy