@using DevExtreme.MVC.Demos.ViewModels
@model FormViewModel
<div class="long-title"><h3>Employee Details</h3></div>
<div id="form-container">
@(Html.DevExtreme().Form<FormViewModel>()
.ID("form")
.ColCount(2)
.Items(items => {
items.AddSimpleFor(m => m.FirstName)
.Editor(e => e
.TextBox()
.Disabled(true)
);
items.AddSimpleFor(m => m.Position)
.Editor(e => e
.SelectBox()
.DataSource(new[] {
"HR Manager",
"IT Manager",
"CEO",
"Controller",
"Sales Manager",
"Support Manager",
"Shipping Manager"
})
.SearchEnabled(true)
.Value("")
)
.ValidationRules(r => r
.AddRequired()
.Message("Position is required")
);
items.AddSimpleFor(m => m.LastName)
.Editor(e => e
.TextBox()
.Disabled(true)
);
items.AddSimpleFor(m => m.HireDate)
.Editor(e => e
.DateBox()
.Value(new JS("null"))
.Width("100%")
)
.ValidationRules(r => r
.AddRequired()
.Message("Hire date is required")
);
items.AddSimpleFor(m => m.BirthDate)
.Editor(e => e
.DateBox()
.Disabled(true)
.Width("100%")
)
.IsRequired(false);
items.AddSimpleFor(m => m.Address);
items.AddSimpleFor(m => m.Notes)
.ColSpan(2)
.Editor(e => e
.TextArea()
.Height(90)
);
items.AddSimpleFor(m => m.Phone)
.Editor(e => e
.TextBox()
.Mask("+1 (X00) 000-0000")
.MaskRules(new { X = new JS("/[02-9]/") })
);
items.AddSimpleFor(m => m.Email);
})
.OnContentReady(@<text>
function(e) {
e.component.validate();
}
</text>)
.FormData(Model)
)
</div>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FormController : Controller {
public ActionResult CustomizeItem() {
return View(new FormViewModel {
ID = 1,
FirstName = "John",
LastName = "Heart",
Phone = "360-684-1334",
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\n\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., Los Angeles, CA",
Email = "jheart@dx-email.com"
});
}
}
}
#form-container {
margin: 10px 10px 30px;
}
#button {
float: right;
margin-top: 20px;
}
.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;
}