blazor-402330-common-concepts-data-binding-two-way-data-binding.md
DevExpress Blazor components support two-way data binding (refer to ASP.NET Core Blazor data binding). This means you can use the @bind attribute to implement binding between a component’s property and a data field.
The following code uses the @bind-Text attribute to bind a text editor’s Text property to a TextValue data field. When the editor is rendered, the property’s value comes from the bound field. When a user changes the input value and removes focus, the property’s value is updated.
<DxTextBox @bind-Text="@TextValue" />
@code {
string TextValue { get; set; } = "Some text";
}
When you use the @bind attribute, the component sets Text, TextExpression, and TextChanged internally. If you use the @bind attribute and handle the TextChanged event simultaneously, the following error occurs: The component parameter ‘TextChanged’ is used two or more times for this component….
To react to text changes, specify the Text property without the @bind attribute and handle the TextChanged event explicitly. You must also specify the TextExpression property if the editor is displayed in an EditForm.
<DxTextBox Text="@TextValue"
TextExpression="@(() => TextValue)"
TextChanged="@((newValue) => OnTextChanged(newValue))" />
@code {
string TextValue { get; set; } = "Some text";
void OnTextChanged(string newValue) {
TextValue = newValue;
// Perform other actions here
}
}
You can use two-way data binding for DevExpress Blazor components that have a <PropertyName> property and a <PropertyName>Changed event, for example:
DxDateEdit. Use @bind-Date, or set Date, DateExpression, and DateChanged.
DxComboBox. Use @bind-Value, or set Value, ValueExpression, and ValueChanged.
DxCheckBox. Use @bind-Checked, or set Checked, CheckedExpression, and CheckedChanged.
DxListBox. Use @bind-Value, or set Value, ValueChanged, and ValueExpression to bind to a single object. Analogically, use @bind-Values, or set Values, ValuesChanged, and ValuesExpression for a collection.
DxTagBox. Use @bind-Value, or set Values, ValuesChanged, and ValuesExpression to bind to a collection.