Lab 05: Implement ASP.NET Validation Controls for Multi-layered Data Integrity Enforcement

To Implement ASP.NET validation controls for multi-layered data integrity enforcement.

Introduction

This lab demonstrates form validation using ASP.NET Core MVC Model Validation with Data Annotations and jQuery Unobtrusive Validation [1].

Environment Setup

VS Code with C# Dev Kit Extension
.NET SDK (Latest Stable Version)
Browser (Chrome/Edge/Firefox)

File Structure


ValidationLab/
│── Controllers/
│   ├── HomeController.cs
│── Models/
│   ├── UserModel.cs
│── Views/
│   ├── Home/
│   │   ├── Index.cshtml
│   ├── Shared/
│   │   ├── _Layout.cshtml
│── wwwroot/
│   ├── css/styles.css
│── Program.cs
│── ValidationLab.csproj

Steps

1. Create a New ASP.NET Core MVC Project


dotnet new mvc -o ValidationLab
cd ValidationLab
code .

2. Define the Model (`Models/UserModel.cs`)


using System.ComponentModel.DataAnnotations;
 
namespace ValidationLab.Models;
public class UserModel
{
    [Required(ErrorMessage = "Name is required")]
    [StringLength(50, ErrorMessage = "Name cannot exceed 50 characters")]
    public string Name { get; set; }
 
    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Invalid email format")]
    public string Email { get; set; }
 
    [Required(ErrorMessage = "Age is required")]
    [Range(18, 60, ErrorMessage = "Age must be between 18 and 60")]
    public int Age { get; set; }
}

3. Create Controller (`Controllers/HomeController.cs`)


using Microsoft.AspNetCore.Mvc;
using ValidationLab.Models;
 
namespace ValidationLab.Controllers;
public class HomeController : Controller
{
    public IActionResult Index() => View(new UserModel());
 
    [HttpPost]
    public IActionResult Index(UserModel user)
    {
        if (ModelState.IsValid)
            return Content($"Valid Data: {user.Name}, {user.Email}, {user.Age}");
        return View(user);
    }
}

4. Create View (`Views/Home/Index.cshtml`)


@model ValidationLab.Models.UserModel @{ ViewData["Title"] = "Validation Form";
}
 
<h2>Validation Form</h2>
 
<form asp-action="Index" method="post">
  <div>
    <label asp-for="Name"></label>
    <input asp-for="Name" />
    <span asp-validation-for="Name" class="text-danger"></span>
  </div>
 
  <div>
    <label asp-for="Email"></label>
    <input asp-for="Email" />
    <span asp-validation-for="Email" class="text-danger"></span>
  </div>
 
  <div>
    <label asp-for="Age"></label>
    <input asp-for="Age" />
    <span asp-validation-for="Age" class="text-danger"></span>
  </div>
 
  <button type="submit">Submit</button>
</form>
 
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

5. Enable Validation Scripts (`Views/Shared/_Layout.cshtml`)

Add this before </body>:


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>

6. Run the Application


dotnet run

Visit http://localhost:5164 and test the form validation.

Additional Scopes

Add custom validation attributes (e.g., UsernameShouldBeUnique).
Implement client-side validation messages using Bootstrap styles.
Integrate validation with AJAX requests.

References

[1] Microsoft Docs: Model Validation in ASP.NET Core MVC.
[2] jQuery Validation Unobtrusive Documentation.

💡

Lab 05: Implement ASP.NET Validation Controls for Multi-layered Data Integrity Enforcement

Introduction

Environment Setup

File Structure

Steps

1. Create a New ASP.NET Core MVC Project

2. Define the Model (Models/UserModel.cs)

3. Create Controller (Controllers/HomeController.cs)

4. Create View (Views/Home/Index.cshtml)

5. Enable Validation Scripts (Views/Shared/_Layout.cshtml)