@model DevExtreme.MVC.Demos.Models.Company
<div id="form-demo">
<div class="widget-container">
<div>Select company:</div>
@(Html.DevExtreme().SelectBox()
.DisplayExpr("Name")
.DataSource(d => d.Mvc().LoadAction("GetCompanies").Key("ID"))
.Value(1)
.OnValueChanged("selectBox_valueChanged")
)
@(Html.DevExtreme().Form()
.ID("form")
.ColCount(2)
.FormData(Model)
.LabelLocation(FormLabelLocation.Top)
.MinColWidth(300)
.ReadOnly(false)
.ShowColonAfterLabel(true)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Label location:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] { "left", "top" })
.Value("top")
.OnValueChanged("labelLocation_changed")
)
</div>
<div class="option">
<span>Columns count:</span>
@(Html.DevExtreme().SelectBox()
.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 int[] { 150, 200, 300 })
.Value(300)
.OnValueChanged("minColWidth_changed")
)
</div>
<div class="option">
<span>Form width:</span>
@(Html.DevExtreme().NumberBox()
.Value(null)
.Max(550)
.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 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.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using Newtonsoft.Json;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FormController : Controller {
public ActionResult Overview() {
return View(SampleData.Companies.First());
}
[HttpGet]
public ActionResult GetCompanies(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Companies, loadOptions)), "application/json");
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static List<Company> Companies = new List<Company> {
new Company {
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 = "http://www.nowebsitesupermart.com"
},
new Company {
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 = "http://www.nowebsitedepot.com"
},
new Company {
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 = "http://www.nowebsitemusic.com"
},
new Company {
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 = "http://www.nowebsitetomsclub.com"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.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; }
}
}
.widget-container {
margin-right: 320px;
padding: 20px;
max-width: 550px;
min-width: 300px;
}
#form {
margin-top: 25px;
}
.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;
}