Overview - ASP.NET Core Form Demo (2024)

Generic Light

Generic Dark

Generic Light Compact

Generic Dark Compact

@model DevExtreme.NETCore.Demos.Models.ActiveCompany<div id="form-demo"> <div class="widget-container"> <div id="companySelectText">Select company:</div> @(Html.DevExtreme().SelectBox() .ID("companySelectBox") .DisplayExpr("Name") .InputAttr("aria-label", "Company") .Label("Select company") .LabelMode(EditorLabelMode.Floating) .DataSource(d => d.Mvc().LoadAction("GetCompanies").Key("ID")) .Value(1) .OnValueChanged("selectBox_valueChanged") ) @(Html.DevExtreme().Form() .ID("form") .ColCount(2) .FormData(Model) .LabelMode(FormLabelMode.Floating) .LabelLocation(FormLabelLocation.Left) .MinColWidth(300) .ReadOnly(false) .ShowColonAfterLabel(true) ) </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Label mode:</span> @(Html.DevExtreme().SelectBox() .InputAttr("aria-label", "Label Mode") .DataSource(new[] { "outside", "static", "floating", "hidden" }) .Value("floating") .OnValueChanged("labelMode_changed") ) </div> <div class="option"> <span>Label location:</span> @(Html.DevExtreme().SelectBox() .DataSource(new[] { "left", "top" }) .Value("left") .InputAttr("aria-label", "Label Location") .OnValueChanged("labelLocation_changed") ) </div> <div class="option"> <span>Columns count:</span> @(Html.DevExtreme().SelectBox() .InputAttr("aria-label", "Column Count") .DataSource(new object[] { "auto", 1, 2, 3 }) .Value(2) .OnValueChanged("colCount_changed") ) </div> <div class="option"> <span>Min column width:</span> @(Html.DevExtreme().SelectBox() .DataSource(new[] { 150, 200, 300 }) .InputAttr("aria-label", "Min Column Width") .Value(300) .OnValueChanged("minColWidth_changed") ) </div> <div class="option"> <span>Form width:</span> @(Html.DevExtreme().NumberBox() .Value(null) .Max(550) .InputAttr("aria-label", "Width") .OnValueChanged("formWidth_changed") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("readOnly") .Value(false) .OnValueChanged("readOnly_changed") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("showColonAfterLabel") .Value(true) .OnValueChanged("showColonAfterLabel_changed") ) </div> </div></div><script> function getFormInstance() { return $("#form").dxForm("instance"); } function selectBox_valueChanged(data) { getFormInstance().option("formData", data.value); } function labelMode_changed(data) { getFormInstance().option("labelMode", data.value); const $companySelectText = $("#companySelectText"); const companySelectBox = $("#companySelectBox").dxSelectBox("instance"); if(data.value === "outside") { companySelectBox.option("labelMode", "hidden"); $companySelectText.show(); } else { companySelectBox.option("labelMode", data.value); $companySelectText.hide(); } } function labelLocation_changed(data) { getFormInstance().option("labelLocation", data.value); } function colCount_changed(data) { getFormInstance().option("colCount", data.value); } function minColWidth_changed(data) { getFormInstance().option("minColWidth", data.value); } function formWidth_changed(data) { getFormInstance().option("width", data.value); } function readOnly_changed(data) { getFormInstance().option("readOnly", data.value); } function showColonAfterLabel_changed(data) { getFormInstance().option("showColonAfterLabel", data.value); }</script>

using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class FormController : Controller { public ActionResult Overview() { return View(SampleData.ActiveCompanies.First()); } [HttpGet] public object GetCompanies(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.ActiveCompanies, loadOptions); } }}

using System.Collections.Generic;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<ActiveCompany> ActiveCompanies = new[] { new ActiveCompany() { ID = 1, Name = "Super Mart of the West", Address = "702 SW 8th Street", City = "Bentonville", State = "Arkansas", ZipCode = 72716, Phone = "(800) 555-2797", Fax = "(800) 555-2171", Website = "", Active = true }, new ActiveCompany() { ID = 2, Name = "Electronics Depot", Address = "2455 Paces Ferry Road NW", City = "Atlanta", State = "Georgia", ZipCode = 30339, Phone = "(800) 595-3232", Fax = "(800) 595-3231", Website = "", Active = true }, new ActiveCompany() { ID = 3, Name = "K&S Music", Address = "1000 Nicllet Mall", City = "Minneapolis", State = "Minnesota", ZipCode = 55403, Phone = "(612) 304-6073", Fax = "(612) 304-6074", Website = "", Active = true }, new ActiveCompany() { ID = 4, Name = "Tom's Club", Address = "999 Lake Drive", City = "Issaquah", State = "Washington", ZipCode = 98027, Phone = "(800) 955-2292", Fax = "(800) 955-2293", Website = "", Active = true } }; }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models { public class ActiveCompany { public int ID { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public int ZipCode { get; set; } public string Phone { get; set; } public string Fax { get; set; } public string Website { get; set; } public bool Active { get; set; } }}

.widget-container { margin-right: 320px; padding: 20px; max-width: 550px; min-width: 300px;}#form { margin-top: 25px;}#companySelectText { display: none;}.options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15);}.caption { font-size: 18px; font-weight: 500;}.option { margin-top: 10px;}