Awesome ASP.net Core and MVC Controls

Unobtrusive Validation Demo

Awesome controls are designed to support jquery.validate and unobtrusive validation.
The default date format and decimal separator are set in utils.js init method (if jquery.validate is referenced, utils.init is called by Html.Awe().Init() in _Layout.cshtml).
 
  •  
Yes
No

click the submit button to see the validation

Unobtrusive/Index.cshtml
@using (Html.BeginForm())
{
@Html.EditorFor(o => o.Name)
@Html.EditorFor(o => o.Number)
@Html.EditorFor(o => o.MealAuto)
@Html.EditorFor(o => o.Date)
@Html.EditorFor(o => o.Categories)
@Html.EditorFor(o => o.Category2)
@Html.EditorFor(o => o.CategoryFo)
@Html.EditorFor(o => o.Meal)
@Html.EditorFor(o => o.Meals)
@Html.EditorFor(o => o.MealsOdd)
@Html.EditorFor(o => o.CategoryBgrId)
@Html.EditorFor(o => o.CategoriesBgcIds)
@Html.EditorFor(o => o.CategoriesMultiIds)
@Html.EditorFor(o => o.ColorId)
@Html.EditorFor(o => o.MealComboId)
@Html.EditorFor(o => o.Organic)
@Html.EditorFor(o => o.Organic2)
@Html.EditorFor(o => o.Organic3)
@Html.EditorFor(o => o.OrganicSim)
@Html.AntiForgeryToken()
<div class="esubmit">
<input type="submit" value="submit" class="awe-btn" />
</div>
}
<h4>click the submit button to see the validation</h4>
ViewModels/Input/UnobtrusiveInput.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

using Omu.AwesomeMvc;

namespace AwesomeMvcDemo.ViewModels.Input
{
public class UnobtrusiveInput
{
[Required]
[AdditionalMetadata("placeholder", "write something")]
[AdditionalMetadata("maxLength", 13)]
[DisplayName("Textbox")]
public string Name { get; set; }

[Required]
[AdditionalMetadata("placeholder", "only numbers here")]
[AdditionalMetadata("decimals", 2)]
[DisplayName("Numeric textbox")]
public float? Number { get; set; }

[Required]
[UIHint("Autocomplete")]
[AdditionalMetadata("placeholder", "try Mango")]
[AdditionalMetadata("controller", "MealAutocomplete")]
[DisplayName("Autocomplete")]
public string MealAuto { get; set; }

[Required]
[AdditionalMetadata("Placeholder", "pick a date")]
[DisplayName("DatePicker")]
public DateTime? Date { get; set; }

[Required]
[UIHint("AjaxCheckboxList")]
[AweUrl(Action = "GetCategories", Controller = "Data")]
[DisplayName("CheckboxList")]
public IEnumerable<int> Categories { get; set; }

[Required]
[UIHint("AjaxRadioList")]
[AweUrl(Action = "GetCategories", Controller = "Data")]
[DisplayName("RadioList")]
public int? Category2 { get; set; }

[Required]
[DisplayName("Dropdown")]
[AweUrl(Action = "GetCategoriesFirstOption", Controller = "Data")]
[UIHint("AjaxDropdown")]
public int? CategoryFo { get; set; }

[Required]
[UIHint("Lookup")]
[AdditionalMetadata("ClearButton", true)]
[DisplayName("Lookup")]
public int? Meal { get; set; }

[Required]
[UIHint("MultiLookup")]
[AdditionalMetadata("ClearButton", true)]
[DisplayName("MultiLookup")]
public IEnumerable<int> Meals { get; set; }

[Required]
[UIHint("Odropdown")]
[DisplayName("Odropdown")]
[AweUrl(Action = "GetAllMeals", Controller = "Data")]
public int? MealsOdd { get; set; }

[Required]
[UIHint("ButtonGroupRadio")]
[DisplayName("ButtonGroup")]
[AweUrl(Action = "GetCategories", Controller = "Data")]
public int? CategoryBgrId { get; set; }

[Required]
[UIHint("ButtonGroupCheckbox")]
[DisplayName("ButtonGroup Multi")]
[AweUrl(Action = "GetCategories", Controller = "Data")]
public int[] CategoriesBgcIds { get; set; }

[Required]
[UIHint("Multiselect")]
[DisplayName("Multiselect")]
[AweUrl(Action = "GetCategories", Controller = "Data")]
public int[] CategoriesMultiIds { get; set; }

[Required]
[UIHint("ColorDropdown")]
[DisplayName("ColorPicker")]
public string ColorId { get; set; }

[Required]
[UIHint("Combobox")]
[DisplayName("Combobox")]
[AweUrl(Action = "GetAllMeals", Controller = "Data")]
public string MealComboId { get; set; }

[DisplayName("Checkbox")]
public bool Organic { get; set; }

[UIHint("ChkEmpVal")]
[Required(ErrorMessage = "This must be checked, in order to submit the form")]
[DisplayName("Checkbox (Required)")]
public bool Organic2 { get; set; }

[UIHint("TogglEmpVal")]
[Required(ErrorMessage = "This must be Yes, in order to submit the form")]
[DisplayName("Toggle Button")]
public bool Organic3 { get; set; }

[UIHint("SchkEmpVal")]
[Required(ErrorMessage = "This must be checked, in order to submit the form")]
public bool OrganicSim { get; set; }
}
}



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.