Your search did not match any results.

Forms - Overview

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 FormsOverview() { 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; }