A Blazor application's data exists in two forms. The first form is the Model, which represents the whole of the application's stored data. The model is usually made accessible via a carefully designed (Web) API of permitted operations. The second form is known as a View Model. View models comprise only the data required for a specific view, or segment of UI within the application, which is represented by a component. The actual process of marrying up view model data to the UI is called Data Binding, and takes one of two forms:
- One Way data binding, which is the process of working with read-only data
- Two Way data binding, which refers to data that you want to allow the user to change.
One Way Data Binding
Binding data in read-only form is achieved using basic Razor syntax, i.e. prefixing the data item with an @ character. This is used to render values that can change dynamically which are not intended to be edited:
The time is @DateTime.Now
Two Way Data Binding
The bind attribute is used to effect two way data binding in Blazor. The following example demonstrates both one way and two way data binding. The name property is bound to the span in read-only form, while the input features two way binding.
<input @bind=name /> <span>@name</span>
@code {
string name;
}
The @bind syntax assigns the value of the name field to the value attribute of the input, and sets up a handler for the onchange event of the input that updates the value of the name property when it has been changed.
When the component first renders, the input gets its value from the name field. When the user changes the value of the input, the onchange event of the input fires and all instances of the name field are updated to reflect those changes. The bind attribute in the default case is the equivalent to the following syntax:
<input value="@name" @onchange=@(e => name = e.Value.ToString()) /> <span>@name</span>
When you use two-way databinding, it is not possible to add your own onchange even handler. If you try to add your own, you get a Razor compiler error:
RZ10008 The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case->insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.
Bind To Other Events
You are not restricted to binding to the onchange event of an element. You can use thebind:event syntax to specify other events to bind to. In the next example, the changes to the name property are updated in the span in real time because the property is bound to the oninput event of the input, which fires for every alteration to the input's value:
<input @bind=name @bind:event=oninput /> <span>@name</span>
@code {
string name;
}
For form inputs, only onchange and oninput are supported. Binding to other events has no effect.
Formatting Bound Values
You can use the bind:format syntax to specify a format string for the bound value (currently only works with the DateTime datatype):
<input type="date" bind="@DateOfBirth" format="yyyy-MM-dd" />
@code {
public DateTime DateOfBirth{ get; set; }
}
