Post
Ask Question

Perform Validation on Form Using Data Annotation in MVC4 Web API

Introduction

This article explains the Data Annotation property for doing validation. Here we create a simple form for displaying the validation using Data Annotation. We know that validation is very important for any form.

Use the following procedure to create a simple form.

Step 1

Create a Web API Application as in the following:

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • Select "Installed" -> "Templates" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET MVC4 Web Application".

    Select MVC4 Web Application

  • Click on the "OK" button.
  • From the MVC4 project window select "Web API".

    Select Web API

  • Click on the "Create Project" button.

Step 2

Add a Model Class as in the following:

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select "Class".

    Add Model Class

  • Click on the "Add" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace ValidationData.Models  
  7. {  
  8.     public class UserModel  
  9.     {  
  10.         [Required(ErrorMessage = "Enter User Name")]  
  11.         public string FirstName { get; set; }  
  12.         [Required(ErrorMessage = "Enter User Last Name")]  
  13.         public string LastName { get; set; }  
  14.         [Required(ErrorMessage = "Enter USer Address")]  
  15.         public string Address { get; set; }  
  16.         [Required(ErrorMessage = "Enter User Age")]  
  17.         [Range(18, 50, ErrorMessage = "Age Sholud more the 18 and Less Than 50")]  
  18.         public int Age { get; set; }  
  19.     }  
  20. } 

Step 3

Add a Controller:

  • In the "Solution Explorer".
  • Right-click on the Controller folder, select "Add" -> "Controller".
  • From the Template select "MVC Controller".
    Add Controller

  • Click on the "Add" button.

Add the following Code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using ValidationData.Models;  
  7. namespace ValidationData.Controllers  
  8. {  
  9.     public class UsersController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Users/  
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.         [HttpPost]  
  18.         public ActionResult Detail(UserModel u)  
  19.         {  
  20.             if(!ModelState.IsValid)  
  21.             {  
  22.                 return View("Index");  
  23.             }  
  24.             else  
  25.             {  
  26.                 return Content("Valid User" + "FirstName" + u.FirstName + "LastName" + u.LastName + "Address" + u.Address + "Age" + u.Age);  
  27.             }  
  28.         }  
  29.     }  
  30. }   

Step 4

Add a View:

  • In the "EmployeeController".
  • Right-click on the "Index" action Method.
  • Select "Add View."

    Select Add View

  • After the Add View dialog box has been opened select "Strongly Typed View" and select "Model class".

    Select View setting

  • Click on the "Add" button.

Add the following code:

  1. @model ValidationData.Models.UserModel  
  2. @{  
  3.     Layout = null;  
  4. }  
  5. <!DOCTYPE html>   
  6. <html>  
  7. <head>  
  8.     <meta name="viewport" content="width=device-width" />  
  9.     <title>Index</title>  
  10. </head>  
  11. <body>  
  12.     <div>  
  13.        @using (Html.BeginForm("Detail","Users",FormMethod.Post))  
  14.        {  
  15.            @Html.ValidationSummary(true)  
  16.            <p>  
  17.                @Html.LabelFor(m=>m.FirstName)  
  18.                @Html.TextBoxFor(m=>m.FirstName)  
  19.                @Html.ValidationMessageFor(m=>m.FirstName)  
  20.            </p>  
  21.            <p>  
  22.                @Html.LabelFor(m=>m.LastName)  
  23.                @Html.TextBoxFor(m=>m.LastName)  
  24.                @Html.ValidationMessageFor(m=>m.LastName)  
  25.            </p>  
  26.            <p>  
  27.                @Html.LabelFor(m=>m.Address)  
  28.                @Html.TextBoxFor(m=>m.Address)  
  29.                @Html.ValidationMessageFor(m=>m.Address)  
  30.            </p>  
  31.            <p>  
  32.                @Html.LabelFor(m=>m.Age)  
  33.                @Html.TextBoxFor(m=>m.Age)  
  34.                @Html.ValidationMessageFor(m=>m.Age)  
  35.            </p>  
  36.            <input type="submit" value="Submit"/>  
  37.        }  
  38.     </div>  
  39. </body>  
  40. </html> 
Step 5

Execute the application and change the URL to "http://localhost:5016/Users/Index".

Display Form

Leave the TextBoxes of FirstName and Address empty and enter an age less than 18. Then it displays the following validation message.

Display Validation Message


Similar Articles