Bind Form Layout to Data

• Jul 08, 2024
• 4 minutes to read

Overview

The FormLayout extension can be used to edit and display fields of a Model class instance or another object (for example, a ViewBag item). In this case, the FormLayout extension’s layout items are bound to data source fields. Each layout item can contain a nested MVC extension that provides the capability to edit and display the corresponding fields’ values.

The code sample below demonstrates how to bind the FormLayout to a strongly-typed View’s Model.

C#

@model MyWebApplication.Models.Employee

@Html.DevExpress().FormLayout(settings =>
{
    settings.Name = "FormLayout1";

    // Creating layout items bound to the Model class properties
    settings.Items.Add(i => i.FullName); // Value type: String. Nested extension: TextBox
    settings.Items.Add(i => i.Photo); // Value type: byte[]. Nested extension: BinaryImage
    settings.Items.Add(i => i.Age); // Value type: Int32. Nested extension: SpinEdit
    settings.Items.Add(i => i.HireDate); // Value type: DateTime. Nested extension: DateEdit
    ...
}).GetHtml()

The FormLayout automatically nests data editors that provide the capability to display and edit the corresponding fields’ values. The image below shows the result.

The table below lists which DevExpress Data Editors are automatically nested in the FormLayout for different field value types. Nullable types are also supported.

Value Type	Automatically Nested Data Editor
byte[]	BinaryImage
String, Char	TextBox
Byte, SByte, Int16, UInt16, Int32, UInt32, Int64, UInt64, Single, Double, Decimal	SpinEdit
Enum	ComboBox
Boolean	CheckBox
DateTime	DateEdit

You can nest other data editors if required. The FormLayout also allows you to nest DevExpress Data Editors or third-party data editors.

Using a Custom Nested Control

You can use any extension (or third-party extensions) that is bound to a data source to edit and display data source fields.

The code sample below demonstrates how to use the standard TextBox and ValidationMessage helpers to edit the “FirstName” and “LastName” fields of the data Model to which the FormLayout is bound.

C#

@model MyWebApplication.Models.Customer

@Html.DevExpress().FormLayout(settings =>
{
    settings.Name = "FormLayout1";

    // Creating layout items bound to the Model class's properties
    settings.Items.Add(i => 
    {
        i.Caption = "First Name";
        i.SetNestedContent(() =>
        {
            ViewContext.Writer.Write(Html.TextBoxFor(m => m.FirstName)); // Using standard TextBox
            ViewContext.Writer.Write(Html.ValidationMessageFor(m => m.FirstName)); // Using standard ValidationMessage
        });
    }); 
    settings.Items.Add(i => 
    {
        i.Caption = "Last Name";
        i.SetNestedContent(() =>
        {
            ViewContext.Writer.Write(Html.TextBoxFor(m => m.LastName)); // Using standard TextBox
            ViewContext.Writer.Write(Html.ValidationMessageFor(m => m.LastName)); // Using standard ValidationMessage
        });
    });
    ...
}).GetHtml()

Binding to a non-Model Object

The FormLayout supports automatically and manually binding to a non-Model class instance such as a ViewBag item. This functionality can be useful when you need to bind the FormLayout to an object within a non-strongly-typed View.

Automatic

To bind the FormLayout to an object automatically, pass this object as a parameter to the FormLayoutExtension<ModelType>.Bind method. The FormLayout automatically retrieves all object fields and creates layout items bound to these object fields.

C#

@Html.DevExpress().FormLayout( settings => {
    settings.Name = "FormLayout1";
}).Bind(ViewBag.MyObject).GetHtml()  

Manual

When binding the FormLayout to an object manually, you can define each item’s settings. You can also populate the FormLayoutSettings<ModelType>.Items collection with unbound items, gather items into groups, and fully customize the look and feel of the FormLayout. Refer to the Item Manipulation topic to learn how to customize the layout.

Note

The Form Layout item’s Name property shouldn’t be used when the Form Layout is bound to an object.

The code sample below demonstrates how to bind the FormLayout extension to an object manually.

C#

@Html.DevExpress().FormLayout(settings =>
{
    settings.Name = "FormLayout1";

    // Creating layout items bound to the ViewBag.Employee object's properties 
    settings.Items.Add(i => i.FieldName = "FirstName"); 

    settings.Items.Add(i => 
    {
        i.FieldName = "LastName";
        // Defining the item's help text
        i.HelpText = "Enter the Last Name";
    });
    ...
}).Bind(ViewBag.MyObject).GetHtml()

Note

• When binding the FormLayout extension to a list of objects (IEnumerable<T>, IQueryable<T>, etc.), the first element in the list is retrieved automatically.
• Use the PreRender method as illustrated in the E4125 online sample to bind the CheckBoxList or ListBoxList object to a collection of items within the Form Layout item.

GitHub Example

View Example: How to edit database records