Forms ▸ Overview

@using DevExtreme.MVC.Demos.ViewModels
@model FormViewModel

<div id="form">
    @(Html.DevExtreme().Form<FormViewModel>()
        .ID("form")
        .Items(items => {
            items.AddGroup()
                .CssClass("first-group")
                .ColCount(4)
                .Items(groupItems => {
                    groupItems.AddSimple().Template("<div class='form-avatar'></div>");
                    groupItems.AddGroup().ColSpan(3).Items(secondGroupItems => {
                        secondGroupItems.AddSimpleFor(m => m.FirstName);
                        secondGroupItems.AddSimpleFor(m => m.LastName);
                        secondGroupItems.AddSimpleFor(m => m.BirthDate)
                            .Editor(e => e
                                .DateBox()
                                .InputAttr("aria-label", "Date")
                                .Width("100%")
                            )
                            .IsRequired(false);
                    });
                });


            items.AddGroup()
                .CssClass("second-group")
                .ColCount(2)
                .Items(groupItems => {
                    groupItems.AddGroup().Items(secondGroupItems => {
                        secondGroupItems.AddSimpleFor(m => m.Address);
                        secondGroupItems.AddSimpleFor(m => m.City);
                        secondGroupItems.AddSimpleFor(m => m.Position)
                            .Editor(e => e
                                .SelectBox()
                                .InputAttr("aria-label", "Position")
                                .DataSource(new[] {
                                        "HR Manager",
                                        "IT Manager",
                                        "CEO",
                                        "Controller",
                                        "Sales Manager",
                                        "Support Manager",
                                        "Shipping Manager"
                                    }
                                )
                                .Value("")
                            );
                    });
                    groupItems.AddGroup().Items(secondGroupItems => {
                        secondGroupItems.AddSimpleFor(m => m.State)
                            .Editor(e => e
                                .SelectBox()
                                .InputAttr("aria-label", "State")
                                .DataSource(new[] {
                                        "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA",
                                        "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD",
                                        "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ",
                                        "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC",
                                        "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"
                                    }
                                )
                            );
                        secondGroupItems.AddSimpleFor(m => m.Zipcode).Label(l => l.Text("Zip Code"));
                        secondGroupItems.AddSimpleFor(m => m.Phone)
                            .Editor(e => e
                                .TextBox()
                                .InputAttr("aria-label", "Mask")
                                .Mask("+1 (000) 000-0000")
                            );
                    });

                    groupItems.AddSimpleFor(m => m.Notes)
                        .ColSpan(2)
                        .Editor(e => e
                            .TextArea()
                            .InputAttr("aria-label", "Notes")
                            .Height(140)
                        );
                });
        })
        .FormData(Model)
    )
</div>

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class CommonController : Controller {

        public ActionResult FormsOverview() {
            return View(new FormViewModel {
                ID = 1,
                FirstName = "John",
                LastName = "Heart",
                Position = "CEO",
                BirthDate = DateTime.Parse("1964 /03/16"),
                HireDate = DateTime.Parse("1995 /01/15"),
                Notes = "John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.",
                Address = "351 S Hill St.",
                City = "Los Angeles",
                State = "CA",
                Zipcode = "90013",
                Phone = "555-684-1335",
                Email = "jheart@dx-email.com",
                Skype = "jheart_DX_skype",
            });
        }

    }
}

using System;
using System.Collections.Generic;

namespace DevExtreme.MVC.Demos.ViewModels {
    public class FormViewModel {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Position { get; set; }
        public string OfficeNo { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zipcode { get; set; }
        public string Phone { get; set; }
        public string Email { get; set; }
        public string Skype { get; set; }
        public string Notes { get; set; }
    }
    public class DynamicFormViewModel {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public List<string> Phones { get; set; }
    }
}

.first-group,
.second-group {
    padding: 20px;
}

.second-group {
    background-color: rgba(191, 191, 191, 0.15);
}

.form-avatar {
    height: 128px;
    width: 128px;
    margin-right: 10px;
    border: 1px solid #d2d3d5;
    border-radius: 50%;
    background-image: url('../../images/petersmith.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}