Enabling JQuery Unobtrusive Validation and Data Annotation in MVC FlexGrid
Data Validation plays an essential part in maintaining data integrity, and the data annotation feature of ASP.NET MVC makes it easy to propagate validations defined in the model to the view. Let's walk through an ASP.NET Core example using data annotation and jQuery unobtrusive validation to validate user inputs inside a FlexGrid.
Download C1Studio MVC Edition
Getting Started with MVC Data Annotation and JQuery Unobtrusive Validation
First, create a ASP.NET Core MVC project using "C1 ASP.NET Core MVC Application(.Net Framework)" template and name it "FlexValidation." You could use the standard ASP.NET Core Web Application template to create the project, but, you'd need to perform some additional steps to configure it to use C1 Controls.
Data Model
Create a UserInfo model class inside the Models folder. You'll need to import the DataAnnotations namespace. Notice how the attributes are applied in this model class: for example, the Email field has a "Required" and "EmailAddress" applied. When user enters their email, it's be a mandatory field and will be checked for the correct email formatting.
using System.ComponentModel.DataAnnotations;
public class UserInfo
{
public int Id { get; set; }
[Required]
[RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessage = "The username must be alphanumeric and contains 4 to 10 characters.")]
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; }
}
Create a UserData class to return a list of UserInfo objects.
public class UsersData
{
public static List Users
{
get
{
return new List()
{
new UserInfo(){Id=1, Name="John", Email="John@gmail.com", Phone="1424685445", Country="Albania", Industry="Computers", Birthdate= DateTime.Parse("2001/1/1")},
new UserInfo(){Id=2, Name="Mary", Email="Mary@gmail.com", Phone="1296479754", Country="American", Industry="Electronics", Birthdate= DateTime.Parse("1985/3/2")},
new UserInfo(){Id=3, Name="David", Email="David@gmail.com", Phone="1217654653", Country="Australia", Industry="Telecom", Birthdate= DateTime.Parse("1999/3/1")},
new UserInfo(){Id=4, Name="Sunny", Email="Sunny@gmail.com", Phone="1756456786", Country="Bosnia", Industry="Internet", Birthdate= DateTime.Parse("1989/4/3")},
new UserInfo(){Id=5, Name="James", Email="James@gmail.com", Phone="1209687543", Country="Botswana", Industry="Accounting", Birthdate= DateTime.Parse("1994/3/2")},
new UserInfo(){Id=6, Name="Maria", Email="Maria@gmail.com", Phone="1543578643", Country="Bahrain", Industry="Accounting", Birthdate= DateTime.Parse("1998/4/2")},
new UserInfo(){Id=7, Name="Michael", Email="Michael@gmail.com", Phone="1215457467", Country="Argentina", Industry="Finance", Birthdate= DateTime.Parse("2003/2/2")},
new UserInfo(){Id=8, Name="Michelle", Email="Michelle@gmail.com", Phone="1534357546", Country="Bulgaria", Industry="Finance", Birthdate= DateTime.Parse("2001/1/1")}
};
}
}
}
Add a Controller
Add a controller named UserInfoController to the Controllers folder by right clicking on the Controllers > New Controller > Select MVC Controller > Empty. Add the following code to the controller. This code creates CRUD methods for the FlexGrid:
public partial class UserController : Controller
{
private static List<UserInfo> users = UsersData.Users;
public ActionResult UserInfo()
{
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));
}
}
View
- Add a UserInfo folder under Views.
- Next, add a view named Index.cshtml inside the UserInfo folder.
- Declare FlexGrid (see code below):
@using FlexValidation.Models
@model List<UserInfo>
<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"></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>
For unobtrusive validation to work, these jQuery script files are required:
- jquery.js
- jquery.validate.js
- jquery.validate.unobtrusive.js
These script files are already present in the lib folder under wwwroot/js folder, so you don't need to add anything. Run the application and navigate to /userInfo. Edit the fields to see the validations in action: 
Data Validation in MVC FlexGrid Unobtrusive validation is supported in FlexGrid and Input controls of MVC Edition, and the feature is available in both HtmlHelpers and TagHelpers. This feature is dependent on jQuery, but the controls themselves are free from external dependency.
See Documentation
GrapeCity