Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Two-Way Data Binding

  • 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.

Razor
<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.

Razor
<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.

    Razor
    <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.

    Razor
    <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.

    Razor
    <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.

    Razor
    @* 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:

    Razor
    <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.

    Razor
    <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:

    Razor
    <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.