Two-Way Data Binding

• Dec 04, 2024
• 4 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";
}

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

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

  Note

  If you bind a ComboBox to a data collection that stores custom objects (IEnumerable<CustomType>), you need to override the custom object’s Equals and GetHashCode() methods. Refer to Bind to Custom Object Collection for more information.

• 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 collections. If you want to store data in other collections, for example, IList, use one-way binding:

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

  Note

  If you bind a List Box to a data collection that stores custom objects (IEnumerable<CustomType>), you need to override the custom object’s Equals and GetHashCode() methods. Refer to Bind to Custom Object Collection for more information.

• 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 collections. If you want to store data in other collections, for example, IList, use one-way binding:

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

  Note

  If you bind a TagBox to a data collection that stores custom objects (IEnumerable<CustomType>), you need to override the custom object’s Equals and GetHashCode() methods. Refer to Bind to Custom Object Collection for more information.