Your search did not match any results.

Overview

DevExtreme JavaScript Form is a jQuery-powered control for displaying data as a collection of label-editor pairs, where editors depend on the data type. It can be configured using strongly-typed HTML helpers (see Forms | Validation demo), which provides client-side validation based on Data Annotations by default. You can choose between Razor C# and Razor VB syntax and use lambda expressions when configuring it. DevExtreme also provides more specialized controls, such as Filter Builder, Range Selector, Radio Group, and many more. See other demos in this section to learn how to add and configure these controls.

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 Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.DataGrid; 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; }