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.