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

  You can declare DevExpressEditorsBinder as a parameter attribute on an action method: ([ModelBinder(typeof(DevExpressEditorsBinder))])

  Controller:

  C#

  [HttpPost]
      public ActionResult ModelBinding([ModelBinder(typeof(DevExpressEditorsBinder))] MyModelData myModel) {
          ...
      }
  

• Overriding the Default Model Binder

  You can assign DevExpressEditorsBinder to the ModelBinders.Binders.DefaultBinder property to replace the global default model binder.

  Global.asax:

  C#

  protected void Application_Start(){
          ...         
          ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder();
      }
  

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.

Editor	Method
CheckBoxList	CheckBoxListExtension.BindList
ComboBox	ComboBoxExtension.BindList
GridLookup	GridLookupExtension.BindList
ListBox	ListBoxExtension.BindList
RadioButtonList	RadioButtonListExtension.BindList
TokenBox	TokenBoxExtension.BindList
TrackBar	TrackBarExtension.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):

C#

<% 
    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):

C#

@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()