Back to Devexpress

Binding Data Editors to Data

aspnet-11784-aspnet-mvc-extensions-data-editors-extensions-common-concepts-binding-data-editors-to-data.md

latest4.8 KB
Original Source

Binding Data Editors to Data

  • Oct 29, 2020
  • 2 minutes to read

To bind a DevExpress editor to a value, use the editor’s EditorExtension.Bind method. It has two overloads, allowing you to bind an editor either directly to its value or to a specific property of a data object (Model).

Note, that you can use strongly typed data editors that can be bound to a model’s property using a lambda expression.

Binding to Model

When DevExpress editors are bound to data model fields (by using Bind(dataObject, propertyName) methods or using strongly typed helpers), the DevExpressEditorsBinder model binder must be used instead of the default model binder to correctly transfer values from DevExpress editors back to corresponding data model fields.

You can specify DevExpressEditorsBinder as a model binder in the following manners.

  • Decorating the Parameter of Action Method

  • Overriding the Default Model Binder

Note

Starting with v2012 vol 1, DevExpressEditorsBinder is automatically defined as a default model binder within projects created with the help of DevExpress MVC project templates.

List Editors Binding

List editors additionally implement the BindList method. It allows you to provide list editors with item list data.

The table below contains links to list editor related BindList methods.

EditorMethod
CheckBoxListCheckBoxListExtension.BindList
ComboBoxComboBoxExtension.BindList
GridLookupGridLookupExtension.BindList
ListBoxListBoxExtension.BindList
RadioButtonListRadioButtonListExtension.BindList
TokenBoxTokenBoxExtension.BindList
TrackBarTrackBarExtension.BindList

Example

The code below demonstrates how the Bind and BindList methods can be used to bind the TextBox and ComboBox (see GridView - External Edit Form online demo for more code).

View Code - “EditingForm” (ASPX):

csharp
<% 
    Html.DevExpress().TextBox(
        settings => {
            settings.Name = "ProductName";
            ...
        }
    )
    .Bind(Model.ProductName)
    .Render();
%>
...
<% 
    Html.DevExpress().ComboBox(
        settings => {
            settings.Name = "CategoryID";
            settings.Properties.TextField = "CategoryName";
            settings.Properties.ValueField = "CategoryID";
            settings.Properties.ValueType = typeof(int);
        }
    )
    .BindList(((GridViewController)ViewContext.Controller).GetCategories())
    .Bind(Model.CategoryID)
    .Render();
%>

View Code - “EditingForm” (Razor):

csharp
@Html.DevExpress().TextBox(
    settings => {
        settings.Name = "ProductName";
        ...
    }
).Bind(Model.ProductName).GetHtml()
...
@Html.DevExpress().ComboBox(
    settings => {
        settings.Name = "CategoryID";
        settings.Properties.TextField = "CategoryName";
        settings.Properties.ValueField = "CategoryID";
        settings.Properties.ValueType = typeof(int);
    }
).BindList(((GridViewController)ViewContext.Controller).GetCategories())
.Bind(Model.CategoryID).GetHtml()

See Also

Strongly-Typed Editor Types