<div class="title">Edit Profile</div>
<div class="editors">
<div class="editors-container">
<div class="left">
@(Html.DevExtreme().TextBox()
.ID("name")
.Value("Olivia Peyton")
.Width("100%")
.Placeholder("Type...")
.Label("Name")
)
@(Html.DevExtreme().TextBox()
.ID("place")
.Width("100%")
.Placeholder("Type...")
.Label("Address")
)
</div>
<div class="right">
@(Html.DevExtreme().DateBox()
.ID("birthDate")
.Value(new DateTime(1981, 6, 3))
.Width("100%")
.Placeholder("Select...")
.Label("Birth Date")
)
@(Html.DevExtreme().SelectBox()
.ID("state")
.Items(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"
})
.Width("100%")
.Placeholder("Select...")
.Label("State")
)
</div>
</div>
<div class="center">
@(Html.DevExtreme().TagBox()
.ID("position")
.Items(new[] {
"HR Manager",
"IT Manager",
"CEO",
"Controller",
"Sales Manager",
"Support Manager",
"Shipping Manager"
})
.Value(new[] { "Support Manager" })
.Multiline(false)
.Width("100%")
.Placeholder("Select...")
.Label("Position")
)
</div>
<div class="editors-container">
<div class="left">
@(Html.DevExtreme().TextBox()
.ID("phone")
.Width("100%")
.Label("Phone")
.Mask("+1 (X00) 000-0000")
.MaskRules(new { X = new JS("/[02-9]/") })
)
</div>
<div class="right">
@(Html.DevExtreme().DateBox()
.ID("hireDate")
.Width("100%")
.Placeholder("Select...")
.Label("Hire Date")
)
</div>
</div>
<div class="center">
@(Html.DevExtreme().TextArea()
.ID("textArea")
.Value("Olivia loves to sell. She has been selling DevAV products since 2012.")
.Width("100%")
.Placeholder("Type...")
.Label("Notes")
)
</div>
<div class="center">
@(Html.DevExtreme().Button()
.ElementAttr("class", "validate")
.Text("Save")
.Type(ButtonType.Default)
.OnClick("saveClick")
)
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<label>Styling Mode</label>
@(Html.DevExtreme().SelectBox()
.Items(new[] { "outlined", "filled", "underlined" })
.Value(new JS("stylingMode"))
.OnValueChanged("stylingModeChanged")
)
</div>
<div class="option">
<label>Label Mode</label>
@(Html.DevExtreme().SelectBox()
.Items(new[] { "static", "floating", "hidden" })
.Value(new JS("labelMode"))
.OnValueChanged("labelModeChanged")
)
</div>
</div>
<script>
var storageKey = "stylingMode";
var stylingMode = readStylingMode() || "filled";
var labelMode = "static";
DevExpress.config({
editorStylingMode: stylingMode
});
function saveClick(e) {
var result = e.validationGroup.validate();
if(result.isValid) {
DevExpress.ui.notify("The task was saved successfully.", "success");
} else {
DevExpress.ui.notify("The task was not saved. Please check if all fields are valid.", "error");
}
}
function readStylingMode() {
var mode = localStorage.getItem(storageKey);
localStorage.removeItem(storageKey);
return mode;
}
function stylingModeChanged(e) {
localStorage.setItem(storageKey, e.value);
window.location.reload(true);
}
function labelModeChanged(e) {
const name = $("#name").dxTextBox("instance");
const place = $("#place").dxTextBox("instance");
const phone = $("#phone").dxTextBox("instance");
const birthDate = $("#birthDate").dxDateBox("instance");
const hireDate = $("#hireDate").dxDateBox("instance");
const position = $("#position").dxTagBox("instance");
const state = $("#state").dxSelectBox("instance");
const notes = $("#textArea").dxTextArea("instance");
[name, place, birthDate, position, hireDate, state, phone, notes].forEach((editor) => {
editor.option("labelMode", e.value);
});
}
$(function() {
["name", "place", "birthDate", "position", "hireDate", "state", "phone"].forEach((editorId) => {
$("#" + editorId).dxValidator({
validationRules: [{ type: "required" }]
});
});
});
</script>
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 EditorAppearanceVariants() {
return View();
}
}
}
.title {
padding: 20px 0 20px 0;
font-size: 18px;
font-weight: 500;
}
.editors {
margin-right: 320px;
height: 570px;
}
.editors .left {
padding: 0 10px 0 0;
}
.editors .right {
padding: 0 0 0 10px;
}
.editors .left,
.editors .right {
flex-grow: 1;
}
.editors .left > div,
.editors .right > div,
.editors .center > div {
margin-bottom: 20px;
}
.editors .center {
padding: 0 27px 0 0;
}
.validate {
float: right;
}
.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: 20px;
}
.editors-container {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 27px;
}