Implementing Remote Validation in MVC

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.

Hide   Shrink    Copy Code

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>
}

Step 3: Return the JsonResult object as per validation response.

Summary : 

It's easy to implement and gives the same type of error message results without writing any Ajax to call server side validation.