Vertical Grid Data Validation
- 4 minutes to read
The DevExpress ASP.NET MVC VerticalGrid extension supports a model-based data validation approach, which is implemented in the ASP.NET MVC framework. This approach is based on decorating model class properties with the DataAnnotations attributes and jQuery Validation.
Note
The list of supported data annotation attributes is available in the Data Annotation Attributes topic.
This topic describes how to add a validity check to the DevExpress ASP.NET MVC VerticalGrid extension.
- Adding Validation Rules to the Model Class
- Enabling Server-Side Validation
- Enabling Unobtrusive Client Validation
- Displaying Validation Error Messages
Adding validation rules to the model class
To define validation rules for user input, add the required DataAnnotation attributes to the corresponding model class properties. You can learn more about DataAnnotation attribute usage in ASP.NET MVC validation in the following blog post: How data annotations for ASP.NET MVC validation work.
using System.ComponentModel.DataAnnotations;
namespace Validation.Models {
public class Clients {
[Required(ErrorMessage = "First name is required")]
[StringLength(15, ErrorMessage = "Must be under 15 characters")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Email is required")]
[EmailAddress(ErrorMessage = "Email is invalid")]
public string Email { get; set; }
[Required(ErrorMessage = "Age is required")]
public int Age { get; set; }
}
}
Once the data model is decorated with the data annotation attributes, you can enable the server-side validation and the unobtrusive client validation.
Enabling Server-Side Validation
Within the action method that handles VerticalGrid callbacks for batch editing, check whether or not a cell value is valid using the MVCxBatchUpdateValues<T, S>.IsValid property.
Controller code:
// Apply all changes made on the client side to a data source.
[HttpPost, ValidateInput(false)]
public ActionResult BatchEditingUpdateModel(MVCxGridViewBatchUpdateValues<Customer, object> updateValues) {
// Insert all added values.
foreach (var customer in updateValues.Insert) {
if (updateValues.IsValid(customer)) {
// Add a new item to the data source.
}
}
// Update all edited values.
foreach (var customer in updateValues.Update) {
if (updateValues.IsValid(customer)) {
// Update the edited item within the data source.
}
}
// ...
return PartialView("_VerticalGridPartial", model.ToList());
}
When an end-user submits data, the VerticalGrid sends a callback to the server, and the server validates user input. If user input is valid, data will be added to the data source. Otherwise, an error message will be displayed next to the VerticalGrid editor containing invalid data.
Enabling Unobtrusive Client Validation
With the steps described above, your application only performs server-side validation. In addition to server-side validation, you can enable client-side validation functionality. Client-side validation allows you to immediately validate user input without sending a callback to the server.
Client-side validation requires that you include the jquery-3...min.js, jquery.validate.min.js and jquery.validate.unobtrusive.min.js JavaScript references in your layout page (or in certain views that contain validation forms).
The code sample below demonstrates how to include the required JavaScript references.
<script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
Note
The JavaScript references should be added in the order they are specified in the code samples above.
To enable client-side validation for all pages in your project, add a key to Web.config.
...
<configuration>
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
</configuration>
...
To enable the client-side validation functionality for a specific view only, you can add the following code to the required view.
Partial View:
@{
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
}
Place the Partial View with the VerticalGrid’s code inside the <form> tag by using the Html.BeginForm() helper.
@using (Html.BeginForm()){
@Html.Action("VerticalGridPartial")
}
Displaying Validation Error Messages
For Server-Side Validation
The ASP.NET MVC VerticalGrid extension provides an Error Cell, which is used to display error messages. The MVCxVerticalGridEditingSettings.ShowModelErrorsForEditors option allows you to control whether or not it is required to display validation error messages for in-cell data editors. Set the MVCxVerticalGridEditingSettings.ShowModelErrorsForEditors property value to false to disable the display of model validation errors.
For Client-Side Validation
The DevExpress ASP.NET MVC Data Editors have the ShowModelErrors property, which allows (when enabled) error messages to automatically be displayed within invalid editors when validation fails. The DevExpress ASP.NET MVC Data Editors provide their own placeholder for rendering validation error messages. Using a built-in error message placeholder allows you to flexibly control how errors should be displayed within editors by using settings exposed using the editor ValidationSettings property, such as ValidationSettings.ErrorDisplayMode.
The table below demonstrates how different ErrorDisplayMode property values affect validation error message appearance.
| ErrorDisplayMode property value | Description | Image |
|---|---|---|
| ImageWithText | An error message is represented by both an error image and error text. |  |
| ImageWithTooltip | An error message is represented by an error image. The image’s tooltip displays the error text. |  |
| Text | An error message is represented by an error text only. |  |
| None | A specific error frame is displayed near the editor. |  |