You may take the following actions to combine Data Annotations with a GridView in ASP.NET MVC for model validation:
Step 1: Define Your Model with Data Annotations
First, ensure that your model class includes the necessary Data Annotation attributes to enforce validation rules. For example, if you have an Employee model, it might look like this:
Step 1: Define Your Model with Data Annotations
First, ensure that your model class includes the necessary Data Annotation attributes to enforce validation rules. For example, if you have an Employee model, it might look like this:
csharp
using System.ComponentModel.DataAnnotations;
public class Employee {
[Key]
public int EmpId { get; set; }
[Required(ErrorMessage = “First Name is required”)]
[StringLength(100, MinimumLength = 2, ErrorMessage = “First Name must be between 2 and 100 characters”)]
public string EmpFirstName { get; set; }
[Required(ErrorMessage = “Last Name is required”)]
[StringLength(100, MinimumLength = 2, ErrorMessage = “Last Name must be between 2 and 100 characters”)]
public string EmpLastName { get; set; }
[Required(ErrorMessage = “Address is required”)]
[StringLength(255, ErrorMessage = “Address cannot exceed 255 characters”)]
public string Address { get; set; }
[Required(ErrorMessage = “Sex is required”)]
public string Sex { get; set; }
[Required(ErrorMessage = “Email is required”)]
[EmailAddress(ErrorMessage = “Invalid Email Address”)]
public string Email { get; set; }
[Required(ErrorMessage = “Contact Number is required”)]
[RegularExpression(@”^\d{10}$”, ErrorMessage = “Contact Number must be 10 digits”)]
public string ContactNo { get; set; }
}
Step 2: Enable Client-Side Validation
To enable client-side validation, ensure you have included the necessary JavaScript files in your layout view (e.g., _Layout.cshtml):
xml
<script src=”~/Scripts/jquery.validate.min.js”></script>
<script src=”~/Scripts/jquery.validate.unobtrusive.min.js”></script>
These scripts enable the client-side operation of the validation attributes, giving users instant feedback.
Step 3: Create the GridView with Validation Support
When using a GridView (for example, with DevExpress or Syncfusion), you need to ensure that it is set up to use the model’s validation attributes. Here’s how you can configure the GridView to display validation messages:
Example with DevExpress GridView
xml
@model IEnumerable<Employee>
@(Html.DevExpress().GridView<Employee>(“grid”)
.Bind(Model)
.Settings(settings => {
settings.SettingsEditing.ShowModelErrorsForEditors = true; // Show validation errors
})
.Columns(columns => {
columns.Add(“EmpFirstName”).Caption(“First Name”);
columns.Add(“EmpLastName”).Caption(“Last Name”);
columns.Add(“Address”).Caption(“Address”);
columns.Add(“Sex”).Caption(“Sex”);
columns.Add(“Email”).Caption(“Email”);
columns.Add(“ContactNo”).Caption(“Contact Number”);
columns.AddCommandColumn().Width(100).Caption(“Actions”);
})
.SettingsEditing(editing => {
editing.Mode(GridViewEditingMode.Popup);
})
)
Example with Syncfusion Grid
xml
@model IEnumerable<Employee>
@(Html.EJS().Grid<Employee>(“Grid”)
.DataSource(Model)
.Columns(columns => {
columns.Add(“EmpFirstName”).HeaderText(“First Name”).IsPrimaryKey(true);
columns.Add(“EmpLastName”).HeaderText(“Last Name”);
columns.Add(“Address”).HeaderText(“Address”);
columns.Add(“Sex”).HeaderText(“Sex”);
columns.Add(“Email”).HeaderText(“Email”);
columns.Add(“ContactNo”).HeaderText(“Contact Number”);
})
.EditSettings(edit => {
edit.AllowEditing(true);
edit.AllowAdding(true);
edit.AllowDeleting(true);
})
.ValidationSettings(validation => {
validation.ShowModelErrors(true); // Show validation errors
})
)
Step 4: Handle Server-Side Validation
In your controller, check if the model state is valid when processing the form submissions:
csharp
[HttpPost]
public ActionResult Create(Employee employee) {
if (ModelState.IsValid) {
// Save employee to the database
return RedirectToAction(“Index”);
}
return View(employee); // Return to the view with validation errors
}
Step 5: Display Validation Messages
Make sure validation messages are displayed in your GridView. For instance, you can enable error messages to appear next to the pertinent fields in the edit form in DevExpress by setting the ShowModelErrorsForEditors attribute to true.These steps will help you combine Data Annotations for model validation in ASP.NET MVC with a GridView. By ensuring user input validation on both the client and server sides, this configuration preserves data integrity and offers a strong user experience.
