What is Data Annotations in ASP.NET MVC?. The Complete ASP.NET MVC Developer Course 2022 [Videos].

In this Video, I am going to give you a brief introduction to Data Annotation in MVC Application which is used for validating the data of a model. Please watch our previous section where we discussed Attributes in ASP.NET MVC Application.

Why do we need Data Annotation Attributes in ASP.NET MVC?

Now a days, its a challenging job for a web developer to validate the user input for any Web application. As web developers, we not only validate the business logic at the client-side that is in the browser, but also we need to validate the business logic running on the Server. That means as a developer we need to validate the business logic both at the client-side as well as server-side.

The client-side validation of the business logic gives the users immediate feedback on the information they entered into a web page and which is an expected feature in todays web applications. Along the same line, the server-side validation logic is in place because we never trust the information coming from the network. 

What are the Validations?

In simple terms, we can say that validations are nothing but some rules set by the developer on the input fields of a web page so as to satisfy the business rules for that particular input field in order have to maintain the proper data in a system. There are two types of validations:

1. Server-side Validations
2. Client Side Validations

While doing validations, as a developer we need to take care of not only the proper validation but also ensure that the validation meets the business rule as per the requirement. From the security point of view, it is also possible that some hackers may bypass client-side validation and insert some vulnerable data into the server.

When we talk about the validation in the ASP.NET MVC framework, we primarily focus on validating the model value. That means has the user provided a required value? Is the value in the required range? Is the value in a proper format etc.?

In ASP.NET MVC web applications, we can do the following three types of validations:

1. HTML validation / JavaScript validation (i.e. Client-Side Validation)
2. ASP.NET MVC Model validation (i.e. Server-side Validation)
3. Database validation (i.e. Server-side Validation)

Among the above three, the most secure validation is the ASP.NET MVC model validation. In HTML/JavaScript validation, the validation can break easily by disabling the javascript in the client machine, but the model validation cant break.

ASP.NET MVC Framework provides a concept called Data Annotation which is used for model validation. Its inherited from System.ComponentModel.DataAnnotations assembly.

That means ASP.NET MVC Framework uses Data Annotation attributes to implement model validations. The Data Annotation Attributes include built-in validation attributes for different validation rules, which can be applied to the model class properties.

The ASP.NET MVC framework will automatically enforce the validation rules and then display proper validation messages in the view if validation fails.

The System.ComponentModel.DataAnnotations assembly has many built-in validation attributes, for example:

1. Required
2. Range
3. RegularExpression,
4. Compare
5. StringLength
6. Data type

Along with the above build-in validation attributes, there are also many data types the user can select to validate the input. Using this data type attribute, the user can validate the exact data type as in the following:

1. Credit Card number
2. Currency
3. Custom
4. Date
5. DateTime
6. Duration
7. Email Address
8. HTML
9. Image URL
10. Multiline text
11. Password
12. Phone number
13. Postal Code
14. Upload

Lets create an empty ASP.NET MVC application with the name DataAnnotationInMVC.

Next, add the Employee.cs file to the Models folder and copy-paste the following code

Adding EmployeeContoller

Now Add EmployeeContoller to the Controllers folder and copy-paste the following code. In the below controller, we have created three action methods i.e. Index and Create action method with Get and Post HTTP Verb.

Create the Create.cshtml view

Right-click on the Create action method of the Home Controller class from the context menu and click on Add View. Once you click on the Add View option then it will show you the below popup.

Then click on the Add button which will create the Create.cshtml view in Home Folder which is inside the Views folder. Copy and paste the following code in the Create.cshtml view

We have added Create.cshtml view to create the Action Method when we run the application and go to the “/Employee/Create” URL it will look as shown below:

Enabling Client-Side Validation in ASP.NET MVC Application:

The Validation attributes in ASP.NET MVC Framework provide both the client-side and server-side validation. There are 2 simple steps to enable the client-side validation in the ASP.NET MVC application. In the First step, we need to Enable ClientValidation and UnobtrusiveJavaScript in the web.config file. Add the following two keys within the appSettings section of your web config file.

In the second step, we need to include the references to the following javascript files. Add the following javascript files in sequence in the _Layout.cshtml view which is inside the shared folder as our create.cshtml view uses _Layout.cshtml view

In real-time we need to include the references to the javascript files in the master page which avoids the need to reference them on each and every view where we need the validation. The order in which the script files are referenced is also important. jquery.validate is dependent on jquery and /jquery.validate.unobtrusive is dependent on jquery.validate, so they should be referenced in the above order. Otherwise, client-side validation will not work as expected. In short, JavaScript is parsed “top-down”, so all dependencies need to be referenced before the dependent reference.

With the above 2 changes, validation should now happen on the client-side without a round trip to the server. If the client disables javascript in the browser, then client-side validation does not work, but the server-side validation will continue to work as expected.