Two-Way Data Binding

  • 3 minutes to read

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";
}

This code is equivalent to the following code:

<DxTextBox Text="@TextValue"
           TextExpression="@(() => TextValue)"
           TextChanged="@((newValue) => OnTextChanged(newValue))" />

@code {
    string TextValue { get; set; } = "Some text";

    void OnTextChanged(string newValue) {
        Text = newValue;
    }
}

When you use the @bind attribute, the Text, TextExpression properties and the TextChanged event are set internally. If you do not use two-way binding, set these properties and event explicitly. Note that the TextExpression property is used only if the editor is placed in the EditForm.

Examples

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.

    <DxDateEdit @bind-Date="@DateTimeValue" />
    @* or set Date, DateExpression, and DateChanged *@
    
    @code {
        DateTime DateTimeValue { get; set; } = DateTime.Today;
    }
    
  • DxComboBox. Use @bind-Value, or set Value, ValueExpression, and ValueChanged.

    <DxComboBox Data="@Cities" @bind-Value="@Value" />
    @* or set Value, ValueExpression, and ValueChanged *@
    
    @code {
        IEnumerable<string> Cities = new List<string>() {
            "London",
            "Berlin",
            "Paris",
        };
    
        string Value { get; set; }
    }
    
  • DxCheckBox. Use @bind-Checked, or set Checked, CheckedExpression, and CheckedChanged.

    <DxCheckBox @bind-Checked="@Value" />
    @* or set Checked, CheckedExpression, and CheckedChanged *@
    
    @code {
        bool Value { get; set; }
    }
    
  • 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.

    @* Bind to an object *@
    <DxListBox Data="@Cities" 
               @bind-Value="@Value" />
    @* or set Value, ValueChanged, and ValueExpression *@
    
    @* Bind to a collection *@
    <DxListBox Data="@Cities" 
               @bind-Values="@Values" />
    @* or set Values, ValuesChanged, and ValuesExpression *@
    @code {
        IEnumerable<string> Cities = new List<string>() {
            "London",
            "Berlin",
            "Paris",
        };
        string Value = null;
        IEnumerable<string> Values = null;
    }
    

    The ListBox Values property is strongly typed. You can use two-way binding only with IEnumerable<T> collections. If you want to store data in other collections, for example, IList, use one-way binding:

    <DxListBox @bind-Data="@Cities" @bind-Values="@Values" />
    
    @code {
       IList<string> Cities = new List<string>() {
           "London",
           "Berlin",
           "Paris",
       };
       IList<string> Values { get; set; } 
    }
    
  • DxTagBox. Use @bind-Value, or set Values, ValuesChanged, and ValuesExpression to bind to a collection.

    <DxTagBox Data="@Cities" 
              @bind-Values="@Values" />
    @* or set Values, ValuesChanged, and ValuesExpression *@
    @code {
        IList<string> Cities = new List<string>() {
            "London",
            "Berlin",
            "Paris",
        };
        IEnumerable<string> Values = null;
    }
    

    The TagBox Values property is strongly typed. You can use two-way binding only with IEnumerable<T> collections. If you want to store data in other collections, for example, IList, use one-way binding:

    <DxTagBox @bind-Data="@Cities" @bind-Values="@Values" />
    
    @code {
       IList<string> Cities = new List<string>() {
           "London",
           "Berlin",
           "Paris",
       };
       IList<string> Values { get; set; } 
    }