C# Academy · Lezione

Data binding e gestione degli eventi

Applichi il data binding a senso unico e bidirezionale, gestisca gli eventi del DOM e dei componenti e usi EventCallback.

Data binding e gestione degli eventi è una lezione C# Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento C# Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso C# Academy include 4 lezioni in totale.

Binding in Blazor

Blazor supporta tre modalità di binding: unidirezionale (sola lettura, @expr), basata sugli eventi (@onclick e così via) e bidirezionale (@bind). Insieme costituiscono la base delle interfacce reattive.

Binding dei dati unidirezionale

Inserisca semplicemente un'espressione C# nel markup utilizzando @. Il valore viene aggiornato ogni volta che il componente esegue nuovamente il rendering, ma il DOM non può trasferire i valori nuovamente a C#.

<!-- 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; }
}

Binding bidirezionale con @bind

@bind collega un elemento di input a un campo utilizzando sia l'impostazione della proprietà sia gli eventi di modifica. Funziona con testo, numeri, date, caselle di controllo ed elenchi a discesa.

<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 con un evento personalizzato

Per impostazione predefinita, @bind utilizza l'evento onchange. Utilizzi @bind:event per modificarlo: ad esempio, oninput viene attivato a ogni battuta per implementare la ricerca in tempo reale.

@* 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));
}

Gestione degli eventi con @onclick

Utilizzi @onclick (e le altre direttive per gli eventi DOM) per associare delegati C# agli eventi DOM. Sono supportati sia i metodi sincroni sia le attività asincrone.

<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--;
    }
}

Argomenti degli eventi

Gli eventi DOM forniscono oggetti con gli argomenti dell'evento. Dichiari il tipo di argomento appropriato nel gestore per accedere a coordinate, codici dei tasti, valori di input e così via.

<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 per la comunicazione tra componente figlio e padre

EventCallback è il meccanismo di Blazor per la comunicazione dal componente figlio a quello padre. A differenza di un normale Action/Func, attiva automaticamente StateHasChanged nel componente padre e gestisce correttamente le eccezioni.

@* 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
    }
}

Prevenzione dell'azione predefinita e interruzione della propagazione

Utilizzi @onclick:preventDefault per annullare l'azione predefinita del browser e @onclick:stopPropagation per interrompere la propagazione dell'evento.

@* 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>

Binding bidirezionale con @bind-Value sui componenti personalizzati

Implementi il modello Value/ValueChanged in un componente personalizzato per supportare @bind-Value dal componente padre: il contratto standard di binding bidirezionale di 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" />

Debouncing degli eventi di input

Per le operazioni costose attivate dall'input dell'utente (chiamate API, filtri complessi), esegua il debouncing dell'evento utilizzando un CancellationTokenSource per ritardare l'esecuzione finché l'utente non smette di digitare.

@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();
}

Verifica rapida

Qual è il vantaggio di EventCallback rispetto ad Action/Func per gli eventi dal componente figlio a quello padre in Blazor?

Riepilogo: binding dei dati e gestione degli eventi

Concetti chiave:

Binding unidirezionale: visualizzi le espressioni C# con @expr
Binding bidirezionale: utilizzi @bind sugli input; @bind:event modifica l'evento di attivazione
Eventi DOM: @onclick, @oninput, @onkeydown con argomenti degli eventi tipizzati
EventCallback<T>: comunicazione dal componente figlio a quello padre con StateHasChanged automatico
Implementi Value/ValueChanged per il binding bidirezionale dei componenti personalizzati
Esegua il debouncing delle operazioni costose per ridurre le chiamate API non necessarie

Domande Frequenti

La lezione «Data binding e gestione degli eventi» è gratuita?

Sì — il testo completo di «Data binding e gestione degli eventi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso C# Academy, passa a CoddyKit PRO. Il corso C# Academy include 4 lezioni in totale.

Cosa imparerò in «Data binding e gestione degli eventi»?

Applichi il data binding a senso unico e bidirezionale, gestisca gli eventi del DOM e dei componenti e usi EventCallback. Eserciti C# Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare C# Academy?

Non è richiesta alcuna esperienza precedente. C# Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Data binding e gestione degli eventi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione C# Academy?

Sì. Ogni lezione C# Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a C# Academy