Remote Validation in ASP.NET MVC
ASP.NET is an open-source server-side Web application framework designed for Web development to produce dynamic Web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup. 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.
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 = "User1", Email = "[email protected]"
},
new UserViewModel
{
UserName = "User2", 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.
