Remote Validation in ASP.NET MVC

Introduction

Most developers encounter a situation where it is necessary to check whether a user name already exists in the database before creating a new one, in other words we need to create a unique username in an application. All developers have a solution for this situation using a different approach but ASP.NET MVC has the feature of remote validation that solves such kinds of problems. 

Remote validation makes an ajax request that could be either GET or POST, calls a method that has at least one parameter and returns a result in JSON format. The parameter value is the model's property value on which the remote validation is implemented and returns a JSON value that can be either false or true. If it is true then it's not valid otherwise it's valid.

I would like to recommend more articles on ASP.NET MVC validation so that you could have a strong knowledge in this area. Other articles are:

1. ASP.NET MVC Server-Side Validation
2. ASP.NET MVC Client-Side Validation
3. ASP.Net MVC Validation Using Fluent Validation
4. Fluent Validation in ASP.Net MVC

Using the Code

To implement remote validation in an application we have two scenarios, one is without an additional parameter and the other is with an additional parameter. First we create an example without an additional parameter. In this example we check whether a username exists or not. If the username exists then that means the input user name is not valid. We create a view model class "UserViewModel" under the Models folder and that code is:

using System.Web.Mvc;
namespace RemoteValidation.Models
{
    public class UserViewModel
    {
        public string UserName
        {
            get;
            set;
        }
        public string Email
        {
            get;
            set;
        }
    }
}

 

Now we create a static data source, in other words we create a static list of UserViewModel in which we could check whether a username exists or not. You can also use the database rather than a static list. The following code snippet is for StaticData.

using RemoteValidation.Models;
using System.Collections.Generic;

namespace RemoteValidation.Code
{
    public static class StaticData
    {
        public static List < UserViewModel > UserList
        {
            get {
                return new List < UserViewModel >
                {
                    new UserViewModel
                    {
                        UserName = "Sandeep", Email = "[email protected]"
                    },
                    new UserViewModel
                    {
                        UserName = "Raviendra", Email = "[email protected]"
                    }
                }
            }
        }
    }
}

Now we create a controller "ValidationController" in which we create an action method to check whether a user name exists or not and return a result as a JSON format. If the username exists then it returns false so that the validation is implemented on the input field. The following code snippet shows ValidationController under the Controllers folder.

using RemoteValidation.Code;
using System.Linq;
using System.Web.Mvc;

namespace RemoteValidation.Controllers
{
    public class ValidationController: Controller
    {
        [HttpGet]
        public JsonResult IsUserNameExist(string userName)
        {
            bool isExist = StaticData.UserList.Where(u = > u.UserName.ToLowerInvariant().Equals(userName.ToLower())).FirstOrDefault() != null;
            return Json(!isExist, JsonRequestBehavior.AllowGet);
        }
    }
}

Now we add remote validation on the UserName of the UserViewModel property as in the following code snippet.

using System.Web.Mvc;

namespace RemoteValidation.Models
{
    public class UserViewModel
    {
        [Remote("IsUserNameExist", "Validation", ErrorMessage = "User name already exist")]
        public string UserName
        {
            get;
            set;
        }
        public string Email
        {
            get;
            set;
        }
    }
}

As in the preceding code snippet, the IsUserNameExist is a method of ValidationController that is called on the blur of an input field using a GET request. Now we create UserController under the Controllers folder to render a view on the UI.

using RemoteValidation.Models;
using System.Web.Mvc;

namespace RemoteValidation.Controllers
{
    public class UserController: Controller
    {
        [HttpGet]
        public ActionResult AddUser()
        {
            UserViewModel model = new UserViewModel();
            return View(model);
        }
    }
}

Now we add jquery.validate.js and jquery.validate.unobtrusive.js to the project and create a bundle as in the following code snippet.

using System.Web.Optimization;

namespace RemoteValidation.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/css/bootstrap.css",
                "~/Content/css/font-awesome.css",
                "~/Content/css/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));
        }
    }
}

Thereafter we add the following keys in the web.config file.

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Thereafter we create a view for the AddUser action method. The following code snippet is for the AddUser view.

@model RemoteValidation.Models.UserViewModel

< div class = "panel panel-primary" > < div class = "panel-heading panel-head" > Add User < /div>
    <div class="panel-body">
        @using (Html.BeginForm())
        {
            <div class="form-horizontal">
                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, new { @class = "col-lg-2 control-label" })
                    <div class="col-lg-9">
                        @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.UserName)
                    </div > < /div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Email, new { @class = "col-lg-2 control-label" })
                    <div class="col-lg-9">
                        @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Email)
                    </div > < /div>
                <div class="form-group">
                    <div class="col-lg-9"></div > < div class = "col-lg-3" > < button class = "btn btn-success"
                     id = "btnSubmit"
                     type = "submit" > Submit < /button>
                    </div >
               < /div>
            </div >
} < /div>
</div >
@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

Let's run the application and put values into the user name field to execute the remote validation as in the following image.


Figure 1: Remote validation on user name

Now we move to another option, we pass an additional parameter in the remote validation. We pass both the user name and email as a parameter and check whether the username and email combination exist or not on the email input. That's why we add one more method in ValidationController as in the following code snippet for it.

[HttpGet]
public JsonResult IsUserExist(string email, string userName)
{
    bool isExist = StaticData.UserList.Where(u = > u.UserName.ToLowerInvariant().Equals(userName.ToLower()) && u.Email.ToLowerInvariant().Equals(email.ToLower())).FirstOrDefault() != null;
    return Json(!isExist, JsonRequestBehavior.AllowGet);
}

Now we call this method on the Email property of UserViewModel as in the following code snippet.

using System.Web.Mvc;

namespace RemoteValidation.Models
{
    public class UserViewModel
    {
        [Remote("IsUserNameExist", "Validation", ErrorMessage = "User name already exist")]
        public string UserName
        {
            get;
            set;
        }
        [Remote("IsUserExist", "Validation", ErrorMessage = "User already exist", AdditionalFields = "UserName")]
        public string Email
        {
            get;
            set;
        }
    }
}

As in the preceding code snippet, we are passing an additional field using AdditionalFields in Remote. If we must pass more than one parameter then these will be comma-separated. Now run the application and the result will be as shown in the following image.


Figure 2: Remote validation with additional field