Blazor Basics: Data Binding in Blazor

Data binding is a foundational feature of Blazor development used to bind data from the C# code to the user interface. Let’s take a look at one-way, two-way and event binding.

Data binding is a key feature of Blazor and allows developers to synchronize data between the user interface and the underlying C# data model.

Data binding also allows reacting to events the user or the browser triggers.

One-Way Binding—Property Binding

Property binding or data rendering is the most basic approach used to put the content of a C# property or variable on screen.

<h1>@Title</h1>

@code {
	public string Title { get; set; }
}

In this component, we have a simple <h1> HTML element. We want to use the Title property from the code section as the value for the heading.

Rendering data is very simple in Blazor. All we have to do is use the @ symbol followed by the property name or variable name.

The mechanism is simple too. Whenever the content of the Title property changes, the user interface will automatically be updated to reflect the new value.

We can use the same approach to provide the value of a property as an argument to a component parameter.

@page "/MyPage"
<MyComponent Title="@Name" />

@code {
    public string Name { get; set; }
}

In this page component, we render the MyComponent child component and provide the Name property as an argument for the Title parameter.

Two-Way Data Binding

We can bind a property to an input field through two-way data binding.

When using two-way data binding, data flows from the data model to the user interface and in the opposite direction. That’s why it’s called two-way or bidirectional data binding.

<input @bind="Username" />

@code {
    public string Username { get; set; }
}

In this component, we have an input field and bind the Username property to the value property of the input element.

The @bind syntax is a shorthand. Every component has a default property bound when using the shorthand syntax. We could also use the longer form and explicitly bind the value property.

<input @bind-value="Username" />

@code {
    public string Username { get; set; }
}

In this example, we use bind-value to explicitly bind the Username property to the value property of the input element.

<InputText @bind-Value="Username" />

One word of caution here. The spelling of the bind expression is important. For example, when using the pre-defined InputText component, we need to use an uppercase “V” for the Value property because the component exposes the Value parameter.

The rule of thumb I use is that the bindings usually need lowercase for standard HTML elements and uppercase for Blazor components.

Event Binding

In addition to one-way and two-way data binding, we can bind a C# method to an event.

The following code shows a more sophisticated Blazor component containing an HTML form with a text field to enter a username.

<h3>User</h3>

<EditForm Model="@Model" OnSubmit="@Save">
	<InputText @bind-Value="Model.Username" />
	<input type="submit" value="Submit" />
</EditForm>


@code {
	public User Model { get; set; } = new User();

	public void Save()
	{
		// Save the User model
	}

	public class User
	{
		public string Username { get; set; }
	}
}

In this example, we bind the Model property to the Model parameter of the built-in EditForm component.

We also bind the Value property of the InputText component to the Username property of the User class.

In the code section of the component, we have a Save method that we bind to the OnSubmit event of the EditForm component.

Whenever the user submits the form using the submit button, the OnSubmit event is triggered, and the Save method is called.

Within the Save method, we can access the username using the Model property and, for example, save it to the database.

The following code shows an event binding for an HTML element.

<input type="button" @onclick="Save" />

In this example, we use lowercase letters to bind the Save method to the onclick event of the button element.

Again, the spelling slightly differs when binding to Blazor components versus binding to HTML elements.

Conclusion

Data binding is a foundational feature of Blazor development.

We use it for pages and individual components to bind the data within the C# code to user interface elements rendered in the browser.

One-way, two-way and event binding each have slightly different syntax but use the @ symbol to introduce references to C# code within the HTML template.