Implementing Remote Validation in MVC

Introduction

Remote validation is used to make server calls to validate data without posting the entire form to the server when server side validation is preferable to client side.  It's all done set up model and controller which is pretty neat.   

Suppose if any field in database table that must be unique and we want to check this uniqueness on client side(after text change of text-boxes) instead of posting whole page.

Now consider a simple example in which we have saved the catalog information into database table say "Catalog". Catalog table has columns below:

Id as PK, CatalogName, Barcode(must be unique)

Using Validation Code

Step 1: Create model for Catalog table and apply the the remote validation for the column that must be validated on client side.

Step 2: Write a method in controller to check the validation for that column. You can also send the additional parameters by adding AdditionFields attribute.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace ItemCatalog.Models
{
    public class Catalog
    {
        [Required]
        public long Id { get; set; }

        [Required]
        [Display(Name = "Item Name")]
        public string CatalogName { get; set; }

        [Required]
        [Display(Name = "Bar code")]
        [Remote("IsBarCodeUnique","Catalog",AdditionalFields="CatalogName",ErrorMessage="This {0} is already used.")]
        public string Barcode { get; set; }
    }
} 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ItemCatalog.Models;

namespace ItemCatalog.Controllers
{
    public class CatalogController : Controller
    {
        //
        // GET: /Catalog/

        public ActionResult Catalog()
        {
            Catalog catalog = new Catalog();
            return View(catalog);
        }

        public JsonResult SaveCatalog(Catalog catalog)
        {
            // Action to save the data
            return Json(true);
        }

        public JsonResult IsBarCodeUnique(Catalog catalog)
        {
            return IsExist(catalog.CatalogName, catalog.Barcode)
                ? Json(true, JsonRequestBehavior.AllowGet)
                : Json(false, JsonRequestBehavior.AllowGet);
        }

        public bool IsExist(string catalogName, string barcode)
        {
            //True:False--- action that implement to check barcode uniqueness

            return false;//Always return false to display error message
        }
    }
}
@model ItemCatalog.Models.Catalog
@{
    ViewBag.Title = "Catalog";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
    <style type="text/css">
        .row
        {
            float: left;
            width: 100%;
            padding: 10px;
        }
        .row label
        {
            width: 100px;
            float: left;
        }
        
        #success-message
        {
            color: Green;
        }
    </style>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script type="text/javascript">

        function SaveCatalogComplete(result) {
            $("#success-message").show();
        }

    </script>
}
<h2>
    Item</h2>
@using (Ajax.BeginForm("SaveCatalog", new AjaxOptions { HttpMethod = "POST", OnSuccess = "SaveCatalogComplete" }))
{ 
    
    <fieldset>
        <div class="row">
            @Html.LabelFor(x => x.CatalogName)
            @Html.TextBoxFor(x => x.CatalogName, Model.CatalogName)
            @Html.ValidationMessageFor(x => x.CatalogName)
        </div>
        <div class="row">
            @Html.LabelFor(x => x.Barcode)
            @Html.TextBoxFor(x => x.Barcode, Model.Barcode)
            @Html.ValidationMessageFor(x => x.Barcode)
        </div>
    </fieldset>
   
    <div id="success-message" style="display: none;">
        This record is successfully saved!!
    </div>
    <div>
        <input type="submit" value="Save" />
    </div>
}