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:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

 

namespace ValidationData.Models

{

    public class UserModel

    {

        [Required(ErrorMessage = "Enter User Name")]

        public string FirstName { getset; }

        [Required(ErrorMessage = "Enter User Last Name")]

        public string LastName { getset; }

        [Required(ErrorMessage = "Enter USer Address")]

        public string Address { getset; }

        [Required(ErrorMessage = "Enter User Age")]

        [Range(18, 50, ErrorMessage = "Age Sholud more the 18 and Less Than 50")]

        public int Age { getset; }

    }

}

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:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using ValidationData.Models;

namespace ValidationData.Controllers

{

    public class UsersController : Controller

    {

        //

        // GET: /Users/

 

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Detail(UserModel u)

        {

            if(!ModelState.IsValid)

            {

                return View("Index");

            }

            else

            {

                return Content("Valid User" + "FirstName" + u.FirstName + "LastName" + u.LastName + "Address" + u.Address + "Age" + u.Age);

            }

        }

 

    }

}

 

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:

@model ValidationData.Models.UserModel

 

@{

    Layout = null;

}

<!DOCTYPE html> 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

       @using (Html.BeginForm("Detail","Users",FormMethod.Post))

       {

           @Html.ValidationSummary(true)

           <p>

               @Html.LabelFor(m=>m.FirstName)

               @Html.TextBoxFor(m=>m.FirstName)

               @Html.ValidationMessageFor(m=>m.FirstName)

           </p>

           <p>

               @Html.LabelFor(m=>m.LastName)

               @Html.TextBoxFor(m=>m.LastName)

               @Html.ValidationMessageFor(m=>m.LastName)

           </p>

           <p>

               @Html.LabelFor(m=>m.Address)

               @Html.TextBoxFor(m=>m.Address)

               @Html.ValidationMessageFor(m=>m.Address)

           </p>

           <p>

               @Html.LabelFor(m=>m.Age)

               @Html.TextBoxFor(m=>m.Age)

               @Html.ValidationMessageFor(m=>m.Age)

           </p>

           <input type="submit" value="Submit"/>

       }

    </div>

</body>

</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 then 18. Then it displays the following validation message.

Display Validation Message