Your search did not match any results.

Overview

DevExtreme ASP.NET Core MVC Form is a jQuery-powered data-editing control with a customizable layout. It supports strongly-typed HTML helpers (see Form | Validation demo), which provides client-side validation based on Data Annotations by default, and can be configured with Razor C# or Razor VB syntax. In addition, DevExtreme Form can be used in Razor Pages (introduced in .NET Core 2.0). DevExtreme provides other UI components, like Filter Builder, Range Selector, Radio Group, which are more specialized. View other demos in this section to learn their application.

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 Newtonsoft.Json; 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; }