Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Collapse]Grid View
    Overview - GridView
    Main Features - GridView
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Collapse]Data Editing and Validation
      Data Editing
      Edit Modes
      Edit Form
      Batch Editing
      Validation
      Initializing New Rows
    [Expand]Export Overview
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Validation

The DevExpress ASP.NET MVC GridView extension and DevExpress ASP.NET MVC data editors support 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. You can learn more about unobtrusive client validation from the following blog post: Unobtrusive Client Validation in ASP.NET MVC 3.

Note

The list of supported data annotation attributes is available in the Supported Attributes for Model Validation topic.

This topic describes how to add a validity check to the DevExpress ASP.NET MVC GridView extension.

Expanded 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.

The code sample below demonstrates how the DataAnnotation attributes can be added to the model class properties.

Once the data model is decorated with the data annotation attributes, you can enable the server-side validation and the unobtrusive client validation.

Expanded Enabling Server-Side Validation

Within the action methods that handle GridView callbacks for adding new records and updating existing records, check whether or not the model is valid using the ModelStateDictionary.IsValid property.

Controller code:

When an end-user submits data, the grid sends a callback to the server, and the server validates the user input. If the user input is valid, the data will be added to the data source. Otherwise, an error message will be displayed next to the grid editor containing invalid data.

Expanded 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. The 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-1.*.*.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.

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.

To enable the client-side validation functionality for a specific view only, you can add the following code to the required view.

View code (Razor):

Place the Partial View with the grid's code inside the <form> tag by using the Html.BeginForm() helper.

Expanded Displaying Validation Error Messages

For Server-Side Validation

The ASP.NET MVC GridView extension provides an Error Row, which is used to display error messages. The MVCxGridViewEditingSettings.ShowModelErrorsForEditors option allows you to control whether or not it is required to display validation error messages for data editors within the edit form. Set the MVCxGridViewEditingSettings.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 via 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.

How would you rate this topic?​​​​​​​