Data binding connects your C# data to the HTML UI. Blazor supports both one-way and two-way binding with clean declarative syntax.

One-Way Binding

Use @ to render a C# expression in the UI:

<p>Hello, @name!</p>

@code {
    private string name = "World";
}

Two-Way Binding with @bind

@bind links an input element to a C# variable. When the user types, the variable updates; when the variable changes, the input updates:

<input @bind="username" />
<p>You typed: @username</p>

Bind on Every Keystroke

By default @bind fires on onchange (focus lost). To bind on every keystroke use @bind:event="oninput":

<input @bind="searchTerm" @bind:event="oninput" />

Why It Matters

Data binding is the foundation for forms, filters, live search, and any UI that reacts to user input. Master this early.

Reference:

Wikipedia: Data Binding

https://en.wikipedia.org/wiki/Data_binding