C# Academy · Lección

Enlace de datos y gestión de eventos

Aplique enlaces de datos unidireccionales y bidireccionales, gestione eventos del DOM y de componentes, y use EventCallback.

Enlace de datos y gestión de eventos es una lección gratuita de C# Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de C# Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de C# Academy incluye 4 lecciones en total.

Enlace de datos en Blazor

Blazor admite tres direcciones de enlace: unidireccional (solo lectura, @expr), basado en eventos (@onclick, etc.) y bidireccional (@bind). En conjunto, constituyen la base de las interfaces reactivas.

Enlace de datos unidireccional

Muestre una expresión de C# en el marcado mediante @. El valor se actualiza cada vez que el componente se vuelve a renderizar, pero el DOM no puede enviar valores de vuelta 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; }
}

Enlace bidireccional con @bind

@bind conecta un elemento de entrada a un campo mediante la asignación de propiedades y los eventos de cambio. Funciona con texto, números, fechas, casillas de verificación y listas desplegables.

<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 personalizado

De forma predeterminada, @bind usa el evento onchange. Use @bind:event para cambiarlo; por ejemplo, oninput se activa con cada pulsación de tecla para realizar búsquedas en tiempo real.

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

Gestión de eventos con @onclick

Use @onclick (y otras directivas de eventos del DOM) para asociar delegados de C# a eventos del DOM. Funcionan tanto los métodos síncronos como las tareas asíncronas.

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

Argumentos de eventos

Los eventos del DOM proporcionan objetos con los argumentos del evento. Declare el tipo de argumento adecuado en el controlador para acceder a coordenadas, códigos de teclas, valores de entrada, etc.

<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 para la comunicación entre componentes principales y secundarios

EventCallback es el mecanismo de Blazor para la comunicación del componente secundario con el principal. A diferencia de un Action/Func normal, activa automáticamente StateHasChanged en el componente principal y gestiona las excepciones correctamente.

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

Cómo evitar la acción predeterminada y detener la propagación

Use @onclick:preventDefault para cancelar la acción predeterminada del navegador y @onclick:stopPropagation para detener la propagación del 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>

Enlace bidireccional con @bind-Value en componentes personalizados

Implemente el patrón Value/ValueChanged en un componente personalizado para admitir @bind-Value desde el componente principal: el contrato estándar de enlace bidireccional de 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" />

Aplicación de debounce a los eventos de entrada

Para operaciones costosas desencadenadas por la entrada del usuario (llamadas a API, filtrado pesado), aplique un debounce al evento mediante un CancellationTokenSource para retrasar la ejecución hasta que el usuario deje de escribir.

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

Comprobación rápida

¿Qué ventaja ofrece EventCallback frente a Action/Func para los eventos del componente secundario al principal en Blazor?

Resumen: enlace de datos y gestión de eventos

Aspectos clave:

Enlace unidireccional: muestre expresiones de C# con @expr
Enlace bidireccional: use @bind en los elementos de entrada; @bind:event cambia el evento que lo activa
Eventos del DOM: @onclick, @oninput, @onkeydown con argumentos de evento tipados
EventCallback<T>: comunicación del componente secundario con el principal con StateHasChanged automático
Implemente Value/ValueChanged para el enlace bidireccional de componentes personalizados
Aplique debounce a las operaciones costosas para reducir las llamadas innecesarias a las API

Preguntas frecuentes

¿La lección «Enlace de datos y gestión de eventos» es gratis?

Sí — el texto completo de «Enlace de datos y gestión de eventos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de C# Academy, actualiza a CoddyKit PRO. El curso de C# Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Enlace de datos y gestión de eventos»?

Aplique enlaces de datos unidireccionales y bidireccionales, gestione eventos del DOM y de componentes, y use EventCallback. Practicas C# Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar C# Academy?

No se requiere experiencia previa. C# Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Enlace de datos y gestión de eventos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de C# Academy?

Sí. Cada lección de C# Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a C# Academy