Forms and Multi-Purpose - Overview

DevExtreme ASP.NET Core Form uses jQuery for data editing with a customizable layout. It supports strongly-typed HTML helpers for client-side validation based on Data Annotations and allows configuration with Razor C# syntax. It is also compatible with Razor Pages. Other specialized UI components include Filter Builder, Range Selector, and Radio Group. Check the other demos in this section for more information.

Fluent

Generic

Was this demo helpful?

Thank you!

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!

Backend API

@using DevExtreme.NETCore.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() .Mask("+1 (000) 000-0000") .InputAttr("aria-label", "Mask") ); }); groupItems.AddSimpleFor(m => m.Notes) .ColSpan(2) .Editor(e => e .TextArea() .InputAttr("aria-label", "Notes") .Height(140) ); }); }) .FormData(Model) ) </div>

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using DevExtreme.AspNet.Mvc; using DevExtreme.AspNet.Data; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using DevExtreme.NETCore.Demos.Models.DataGrid; // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860 namespace DevExtreme.NETCore.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.NETCore.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; }