Data Binding in Razor Components

Data binding in Blazor is a feature that allows us to bind data from C# objects to HTML or Razor markup. This allows us to display the most up-to-date value to the user or modify the value by using interactive markup elements on the page.

Blazor supports both simple and more advanced data binding scenarios. Broadly speaking, the types of data binding supported by Blazor are as follows:

• Basic data binding: This type of data binding consists of the following categories:

  • Simple one-way binding: Displaying the value of a C# data field anywhere in HTML markup.

  • Basic two-way data binding: Reading C# data into interactive HTML elements and writing data from these elements.

  • Razor component markup binding: Associating C# data with Razor component markup elements.

• Advanced data binding: Using special keywords to apply additional logic during data binding.

  • Using the after event: Triggering a method in the code once the field value is updated.

  • Using getters and setters: Applying custom logic while reading the data into the field and writing updated value back into the bound object

  • ...