@using DevExtreme.NETCore.Demos.ViewModels
@using(Html.BeginForm()) {
using(Html.DevExtreme().ValidationGroup()) {
@Html.AntiForgeryToken()
@(Html.DevExtreme().Form<EditorsViewModel>()
.ShowValidationSummary(true)
.Items(items => {
items.AddGroup()
.Caption("Credentials")
.Items(groupItems => {
groupItems.AddSimpleFor(m => m.Email);
groupItems.AddSimpleFor(m => m.Password)
.Editor(e => e.TextBox().Mode(TextBoxMode.Password));
groupItems.AddSimpleFor(m => m.ConfirmPassword)
.Editor(e => e.TextBox().Mode(TextBoxMode.Password));
});
items.AddGroup()
.Caption("Personal Data")
.Items(groupItems => {
groupItems.AddSimpleFor(m => m.Name);
groupItems.AddSimpleFor(m => m.Date);
});
items.AddGroup()
.Caption("Billing address")
.Items(groupItems => {
groupItems.AddSimpleFor(m => m.Country)
.Editor(e => e
.SelectBox()
.DataSource(d => d.Mvc().Controller("GeoNames").LoadAction("Countries"))
);
groupItems.AddSimpleFor(m => m.City)
.Editor(e => e
.Autocomplete()
.MinSearchLength(2)
.DataSource(d => d.Mvc().Controller("GeoNames").LoadAction("Cities"))
);
groupItems.AddSimpleFor(m => m.Address);
groupItems.AddSimpleFor(m => m.Phone)
.HelpText("Enter the phone number in USA phone format")
.Editor(e => e.TextBox()
.Mask("+1 (X00) 000-0000")
.MaskRules(new { X = new JS("/[02-9]/") })
.MaskInvalidMessage("The phone must have a correct USA phone format")
.UseMaskedValue(true)
);
groupItems.AddSimpleFor(m => m.Accepted)
.Label(l => l.Visible(false))
.Editor(editor => editor.CheckBox().Text("I agree to the Terms and Conditions"));
});
items.AddButton()
.HorizontalAlignment(HorizontalAlignment.Left)
.ButtonOptions(b => b.Text("Register")
.Type(ButtonType.Success)
.UseSubmitBehavior(true)
);
})
.FormData(Model)
)
}
}
<script>
function verifyAge(options) {
return options.value && new Date(Date.now()).getFullYear() - options.value.getFullYear() >= 21;
}
</script>
<p>The submitted data has been successfully accepted.</p>
<br />
@(Html.DevExtreme().Button()
.Text("Reload demo")
.Type(ButtonType.Default)
.Icon("refresh")
.OnClick(@<text>
function() {
window.location = window.location;
}
</text>)
)
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 {
[HttpGet]
public ActionResult Validation() {
return View(new EditorsViewModel() {
Name = "Peter"
});
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Validation(EditorsViewModel userInfo) {
if(ModelState.IsValid) {
return View("SuccessValidation");
}
return View(userInfo);
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Linq;
using System.Net.Http;
namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers {
[Route("api/[controller]/[action]")]
public class GeoNamesController : Controller {
[HttpGet]
public object Countries(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.Countries, loadOptions);
}
[HttpGet]
public object Cities(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.Cities, loadOptions);
}
}
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
namespace DevExtreme.NETCore.Demos.ViewModels {
public sealed class AgeVerificationAttribute : ValidationAttribute, IClientModelValidator {
public void AddValidation(ClientModelValidationContext context) {
MergeAttribute(context.Attributes, "data-val-custom-verifyage", FormatErrorMessage(context.ModelMetadata.GetDisplayName()));
MergeAttribute(context.Attributes, "data-val-custom-verifyage-validationcallback", "verifyAge");
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext) {
var date = (DateTime?)value;
if(date <= DateTime.Now.AddYears(-21)) {
return ValidationResult.Success;
}
return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
bool MergeAttribute(IDictionary<string, string> attributes, string key, string value) {
if(attributes.ContainsKey(key)) {
return false;
}
attributes.Add(key, value);
return true;
}
}
}
using DevExtreme.AspNet.Mvc;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
namespace DevExtreme.NETCore.Demos.ViewModels {
public class EditorsViewModel {
[Required(ErrorMessage = "Email is required")]
[RegularExpression(@"^[\d\w\._\-]+@([\d\w\._\-]+\.)+[\w]+$", ErrorMessage = "Email is invalid")]
[Remote("CheckEmailAddress", "Validation", ErrorMessage = "Email is already registered", HttpMethod = "POST")]
public string Email { get; set; }
[Required(ErrorMessage = "Name is required")]
[RegularExpression(@"^[^0-9]+$", ErrorMessage = "Do not use digits in the Name.")]
[StringLength(int.MaxValue, MinimumLength = 2, ErrorMessage = "Name must have at least 2 symbols")]
public string Name { get; set; }
[Required(ErrorMessage = "Password is required")]
public string Password { get; set; }
[Required(ErrorMessage = "Confirm Password is required")]
[System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "'Password' and 'Confirm Password' do not match.")]
public string ConfirmPassword { get; set; }
[RegularExpression(@"^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$", ErrorMessage = "The phone must have a correct USA phone format")]
public string Phone { get; set; }
public string Extension { get; set; }
[Required(ErrorMessage = "Country is required")]
public string Country { get; set; }
[Required(ErrorMessage = "Address is required")]
public string Address { get; set; }
public string Description { get; set; }
public int Age { get; set; }
public string Drink { get; set; }
[Required(ErrorMessage = "City is required")]
[RegularExpression("^[^0-9]+$", ErrorMessage = "Do not use digits in the City name.")]
[StringLength(int.MaxValue, MinimumLength = 2, ErrorMessage = "City must have at least 2 symbols")]
public string City { get; set; }
public IEnumerable<string> Colors { get; set; }
public IEnumerable<string> SelectedColors { get; set; }
public string Color { get; set; }
[Display(Name = "Date of birth")]
[Required(ErrorMessage = "Date of birth is required")]
[AgeVerification(ErrorMessage = "You must be at least 21 years old")]
public DateTime? Date { get; set; }
[DevExtremeRequired(ErrorMessage = "You must agree to the Terms and Conditions")]
public bool Accepted { get; set; }
}
}
form {
margin: 10px;
}