0Pricing
C# Academy · Lesson

Data Binding & Event Handling

Apply one-way and two-way data binding, handle DOM and component events, and use EventCallback.

Binding in Blazor

Blazor supports three binding directions: one-way (read-only, @expr), event-based (@onclick etc.), and two-way (@bind). Together they form the foundation of reactive UIs.

One-Way Data Binding

Simply output a C# expression inside markup using @. The value updates every time the component re-renders but the DOM cannot push values back to 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; }
}

All lessons in this course

  1. Blazor Component Model
  2. Data Binding & Event Handling
  3. Component Communication & DI
  4. State Management in Blazor
← Back to C# Academy