@using DevExtreme.NETCore.Demos.ViewModels
@model FormViewModel
<div class="long-title"><h3>Personal details</h3></div>
<div id="form-container">
@(Html.DevExtreme().Form<FormViewModel>()
.ID("form")
.ColCount(2)
.Items(items => {
items.AddGroup()
.Caption("System Information")
.Items(groupItems => {
groupItems.AddSimpleFor(m => m.ID).IsRequired(false);
groupItems.AddSimpleFor(m => m.FirstName);
groupItems.AddSimpleFor(m => m.LastName);
groupItems.AddSimpleFor(m => m.HireDate).IsRequired(false);
groupItems.AddSimpleFor(m => m.Position);
groupItems.AddSimpleFor(m => m.OfficeNo);
});
items.AddGroup()
.Caption("Personal Data")
.Items(groupItems => {
groupItems.AddSimpleFor(m => m.BirthDate)
.IsRequired(false);
groupItems.AddGroup()
.Caption("Home Address")
.Items(innerGroupItems => {
innerGroupItems.AddSimpleFor(m => m.Address);
innerGroupItems.AddSimpleFor(m => m.City);
innerGroupItems.AddSimpleFor(m => m.State);
innerGroupItems.AddSimpleFor(m => m.Zipcode);
});
});
items.AddGroup()
.Caption("Contact Information")
.Items(groupItems => {
groupItems.AddTabbed()
.TabPanelOptions(o => {
o.DeferRendering(false);
})
.Tabs(tabItems => {
tabItems.Add()
.Title("Phone")
.Items(tabItem => tabItem.AddSimpleFor(m => m.Phone));
tabItems.Add()
.Title("Skype")
.Items(tabItem => tabItem.AddSimpleFor(m => m.Skype));
tabItems.Add()
.Title("Email")
.Items(tabItem => tabItem.AddSimpleFor(m => m.Email));
});
});
})
.FormData(Model)
)
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class FormController : Controller {
public ActionResult GroupedFields() {
return View(new FormViewModel {
ID = 1,
FirstName = "John",
LastName = "Heart",
Position = "CEO",
OfficeNo = "901",
BirthDate = new DateTime(1964, 3, 16),
HireDate = new DateTime(1995, 1, 15),
Address = "351 S Hill St.",
City = "Los Angeles",
State = "CA",
Zipcode = "90013",
Phone = "+1(213) 555-9392",
Email = "jheart@dx-email.com",
Skype = "jheart_DX_skype"
});
}
}
}
#form-container {
margin: 10px;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}