Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@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 FormsAndMultiPurposeOverview() {
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;
}