Bind Data Editors to Data

• Sep 30, 2023
• 3 minutes to read

You can bind DevExpress MVC data editors to data in the following ways:

• Call the Bind(Object) method to bind an editor to a value.

  @Html.DevExpress().TextBox(settings => {
      settings.Name = "ProductName";
      // ...
  }).Bind(Model.ProductName).GetHtml()
  

• Call the Bind(Object, String) method to bind an editor to a specific property of a data object (Model).

• Use lambda expressions to bind strongly typed data editors to model properties.

  @Html.LabelFor(m => m.FirstName)
  @Html.DevExpress().TextBoxFor(m => m.FirstName).GetHtml()
  
  @Html.LabelFor(m => m.BirthDate)
  @Html.DevExpress().DateEditFor(m => m.BirthDate).GetHtml()
  
  @Html.LabelFor(m => m.Age)
  @Html.DevExpress().SpinEditFor(m => m.Age).GetHtml()
  

Important

To bind DevExpress MVC editors, you must use the DevExpressEditorsBinder model binder instead of the default model binder. For more information, see the following section: Specify a Model Binder for Editors

Bind List Editors to Item Lists

List editors implement the BindList method that allows you to bind an editor to an item list.

Editor	Method
CheckBoxList	CheckBoxListExtension.BindList
ComboBox	ComboBoxExtension.BindList
GridLookup	GridLookupExtension.BindList
ListBox	ListBoxExtension.BindList
RadioButtonList	RadioButtonListExtension.BindList
TokenBox	TokenBoxExtension.BindList
TrackBar	TrackBarExtension.BindList

View Example: Combo Box for ASP.NET MVC - How to filter a large data source and automatically select the first item

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

Set an Initial Editor Value

Data editors use values from bound model properties. Setting initial values at the control settings level does not work.

Set an initial value for such editors at the model level.

Specify a Model Binder for Editors

DevExpress MVC editors may contain multiple input elements. The default model binder does not correctly match posted editor values with model properties. Use the DevExpressEditorsBinder model binder instead to correctly transfer values from editors back to corresponding data model fields. Otherwise, model properties can have incorrect values when they submit a form with MVC editors.

Tip

DevExpressEditorsBinder is automatically defined as a default model binder when you create a project based on DevExpress MVC templates.

Override the Global Default Model Binder

Assign DevExpressEditorsBinder to the ModelBinders.Binders.DefaultBinder property to replace the global default model binder:

C# (Global.asax)

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

Specify the Model Binder in an Action Method

Declare DevExpressEditorsBinder as a parameter attribute in an action method:

C# (Controller)

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

Unbound Mode

You can use MVC editors in unbound mode. Assign a custom value to the Name property.

@Html.DevExpress().TextBox(settings =>{  
    settings.Name = "PropertyName";  
}).Bind(Model.PropertyName).GetHtml()  

You can use this name to access the editor’s client-side programmatic object in the JavaScript code.

var text = PropertyName.GetText(); 

Use the following methods to retrieve the editor values on the server:

• GetValue for a single-value editor.
• GetSelectedValues for multi-select editors.

DevExpress.Web.Mvc.EditorExtension.GetValue<string>("PropertyName");  

View Example: Data Editors for ASP.NET MVC - How to use data editors to edit Model fields