Asp.Net Core Client Side Validation Complete Guide

Step by Step Guide to ASP.NET Core Client Side Validation

Prerequisites

• Basic knowledge of ASP.NET Core
• Visual Studio or any other code editor

Step 1: Create a New ASP.NET Core Web Application

1. Open Visual Studio.
2. Go to File > New > Project.
3. Select ASP.NET Core Web Application.
4. Name your project (e.g., AspNetCoreClientSideValidation) and click Create.
5. Choose Web Application (Model-View-Controller) and click Create.
6. Select .NET 7.0 (Long Term Support) or the latest stable version and click Create.

Step 2: Create a Model

We will create a model named Product that will be used in our forms and will have validation attributes.

1. Right-click on the Models folder and select Add > Class.
2. Name the class Product.cs and add the following code:

using System.ComponentModel.DataAnnotations;

namespace AspNetCoreClientSideValidation.Models
{
    public class Product
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "Name is required.")]
        [StringLength(100, MinimumLength = 3, ErrorMessage = "Name must be between 3 and 100 characters.")]
        public string Name { get; set; }

        [Range(0.01, 1000.00, ErrorMessage = "Price must be between $0.01 and $1000.00.")]
        public decimal Price { get; set; }

        [Required(ErrorMessage = "Category is required.")]
        public string Category { get; set; }

        [Required(ErrorMessage = "Release Date is required.")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
    }
}

Step 3: Create a Controller

Next, create a controller that will handle the form submission.

1. Right-click on the Controllers folder and select Add > Controller.
2. Choose MVC Controller with views, using Entity Framework and click Add.
3. Set Model class to Product.
4. Leave the Data context class blank as we are not using a database in this example.
5. Name the controller ProductController and click Add.

Visual Studio will scaffold some actions and views automatically. However, you can modify them to add some custom validation.

Step 4: Modify the Create Action in Controller

Open ProductController.cs and modify the Create action to add the model to the view for validation:

using Microsoft.AspNetCore.Mvc;
using AspNetCoreClientSideValidation.Models;
using System.Threading.Tasks;

namespace AspNetCoreClientSideValidation.Controllers
{
    public class ProductController : Controller
    {
        [HttpGet]
        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Name,Price,Category,ReleaseDate")] Product product)
        {
            if (ModelState.IsValid)
            {
                // You can add your logic to save the product here
                return RedirectToAction(nameof(Index));
            }

            return View(product);
        }

        public IActionResult Index()
        {
            return View();
        }
    }
}

Step 5: Create the Create View

Open Create.cshtml in the Views/Product folder and modify it to include client-side validation:

@model AspNetCoreClientSideValidation.Models.Product

@{
    ViewData["Title"] = "Create";
}

<h1>Create Product</h1>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Category" class="control-label"></label>
                <input asp-for="Category" class="form-control" />
                <span asp-validation-for="Category" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <br/>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Step 6: Add Validation Scripts

Ensure that the necessary validation scripts are included in your layout file. Open _Layout.cshtml located in Views/Shared and add the following lines before the closing </body> tag:

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js"></script>
</body>

Step 7: Test the Application

1. Run the application by pressing F5 or clicking the Start button in Visual Studio.
2. Navigate to Product/Create by clicking the appropriate link or by typing it manually in the browser.
3. Fill out the form partially or incorrectly and click Create.
4. You'll see the client-side validation error messages displaying without any page refresh.

Summary

In this guide, you learned how to set up and implement client-side validation in an ASP.NET Core web application using Data Annotations in your model and Razor views. This ensures that the client browser performs validations before sending the data to the server, improving the user experience and reducing server-side load.