One-way Data Binding
Data from the code-behind is bound in the UI in a one-way mode:
<h1 class="page-title">
Details for @FirstName @LastName
</h1>
@code
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
Or in a form control, such as an input:
<!-- changing the value of the input, changing the value in the UI will not change it in the Employee instance -->
<input type="text" class="form-control-plaintext">
@Employee.Firstname
<input>
@code
{
public Employee Employee { get; set; }
}
Two-way Data Binding
The most common form of data binding. Usually used in conjunction with forms.
If the user changes the value, it will be updated on the property (by default, when they select out of the input).
Uses the @bind directive.
Example
<!-- @bind specifies that we should bind the Employee.LastName to this Component: -->
<input id="lastName" @bind="@Employee.LastName" placeholder="Enter last name" />
Using bind-Value and bind-value-event
<!-- property value will be updated every time user types a character: -->
<input id="lastName"
@bind-Value="Employee.LastName"
@bind-Value:event="oninput"
placeholder="Enter last name" />
How Blazor Handles C# Object null Values in <select> Element Options
A <select> element option value cannot be represented as null as HTML attributes do not have null values.
If an <option> element’s value attribute is bound to a C# object whose value is null, Blazor converts the value to an empty string.