Blazor Data Binding and Event Handling
Data binding in Blazor connects your UI and data models seamlessly. Combined with event handling, it enables responsive and interactive web applications written entirely in C#.
One-Way Binding
One-way binding displays data in the UI. It updates the UI when the data changes, but not the other way around.
<p>Product Name: @ProductName</p>
@code {
string ProductName = "Blazor Book";
}Two-Way Binding with @bind
Use @bind to synchronize input fields with variables:
<input @bind="UserName" />
<p>Hello, @UserName!</p>
@code {
string UserName = "";
}Handling Events
Blazor supports C# methods for events like onclick, oninput, onsubmit etc.
<button @onclick="ShowAlert">Click Me</button>
@code {
void ShowAlert()
{
Console.WriteLine("Button clicked!");
}
}Binding to Complex Objects
Use @bind to bind form fields to object properties:
@code {
class Person
{
public string Name { get; set; }
}
Person person = new();
}
<input @bind="person.Name" />
<p>Name: @person.Name</p>Form Submit Handling
Use EditForm with a model and event callbacks:
@code {
Person person = new();
void HandleSubmit()
{
Console.WriteLine("Submitted: " + person.Name);
}
}
<EditForm Model="person" OnValidSubmit="HandleSubmit">
<InputText @bind-Value="person.Name" />
<button>Submit</button>
</EditForm>Blazor’s powerful data binding and event handling features help you create rich, interactive UIs quickly. In the next lesson, we’ll explore how to call JavaScript functions from Blazor using JS Interop.