FlexGrid
FlexGrid
Unobtrusive Validation
This sample shows the basic usage of the unobtrusive validation.
Features
Id
Name
Email
Phone
Country
Industry
Birthdate
1
John
John@gmail.com
1424685445
Albania
Computers
1/1/2001
2
Mary
Mary@gmail.com
1296479754
American
Electronics
3/2/1985
3
David
David@gmail.com
1217654653
Australia
Telecom
3/1/1999
4
Sunny
Sunny@gmail.com
1756456786
Bosnia
Internet
4/3/1989
5
James
James@gmail.com
1209687543
Botswana
Accounting
3/2/1994
6
Maria
Maria@gmail.com
1543578643
Bahrain
Accounting
4/2/1998
7
Michael
Michael@gmail.com
1215457467
Argentina
Finance
2/2/2003
8
Michelle
Michelle@gmail.com
1534357546
Bulgaria
Finance
1/1/2001
Id
Name
Email
Phone
Country
Industry
Birthdate
0
Description
This sample shows the basic usage of the unobtrusive validation.
The columns have the following validations:
- Name: Required. Alphanumeric and contains 4 to 10 characters.
- Industry: Required.
- Country: Required.
- Phone: Required. 8 to 11 characters.
- Email: Required. Valid e-mail address.
- Birthdate: Required.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static List<UserInfo> users = UsersData.Users; public ActionResult UnobtrusiveValidation() { return View(users); } public ActionResult GridUpdateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData) { return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item => { string error = string.Empty; bool success = true; try { var resultItem = users.Find(u => u.Id == item.Id); var index = users.IndexOf(resultItem); users.Remove(resultItem); users.Insert(index, item); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<UserInfo> { Error = error, Success = success, Data = item }; }, () => users)); } public ActionResult GridCreateUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData) { return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item => { string error = string.Empty; bool success = true; try { users.Add(item); item.Id = users.Max(u => u.Id) + 1; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<UserInfo> { Error = error, Success = success, Data = item }; }, () => users)); } public ActionResult GridDeleteUserInfo([C1JsonRequest]CollectionViewEditRequest<UserInfo> requestData) { return this.C1Json(CollectionViewHelper.Edit<UserInfo>(requestData, item => { string error = string.Empty; bool success = true; try { var resultItem = users.Find(u => u.Id == item.Id); users.Remove(resultItem); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<UserInfo> { Error = error, Success = success, Data = item }; }, () => users)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @using MvcExplorer.Models @model List<UserInfo> @section Scripts{ <script src="~/Scripts/jquery.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>} <c1-flex-grid id="flexGrid" auto-generate-columns="false" allow-add-new="true" allow-delete="true" height="400px"> <c1-flex-grid-column binding="Id" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Name"></c1-flex-grid-column> <c1-flex-grid-column binding="Email"></c1-flex-grid-column> <c1-flex-grid-column binding="Phone"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Industry"></c1-flex-grid-column> <c1-flex-grid-column binding="Birthdate" format="M/d/yyyy"></c1-flex-grid-column> <c1-items-source source-collection="Model" create-action-url="@Url.Action("GridCreateUserInfo")" delete-action-url="@Url.Action("GridDeleteUserInfo")" update-action-url="@Url.Action("GridUpdateUserInfo")"> </c1-items-source> </c1-flex-grid> @section Summary{ @Html.Raw(FlexGridRes.UnobtrusiveValidation_Text3) } @section Description{ <p>@Html.Raw(FlexGridRes.UnobtrusiveValidation_Text0)</p> <p>@Html.Raw(FlexGridRes.UnobtrusiveValidation_Text1)</p> } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | using System; using System.ComponentModel.DataAnnotations; namespace MvcExplorer.Models { public class UserInfo { public UserInfo() { Birthdate = DateTime.Now; } public int Id { get; set; } [Required] [RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessageResourceType =typeof(Localization.ValidationRes), ErrorMessageResourceName = "Register_Name_ErrorMessage")] public string Name { get; set; } [Required] [EmailAddress] public string Email { get; set; } [Required] [MinLength(6)] [MaxLength(16)] public string Password { get; set; } [Required] [Compare("Password")] public string ConfirmPassword { get; set; } [Required] [MinLength(8)] [MaxLength(11)] public string Phone { get; set; } [Required] public string Country { get; set; } [Required] public string Industry { get; set; } [Required] public DateTime Birthdate { get; set; } [Required] public string FavoriteColor { get; set; } [Required] [MinLength(2)] [MaxLength(3)] public string[] Skills { get; set; } [Required] public string[] Hobbies { get; set; } } } |