StudyClues Student Learning System
Remote Validation Attribute allows us to validate properties values with server callback using AJAX. Remote Validation Attribute is available in System.Web.MVC.
Let an Example User wants to fill details in Registration Page . It contains Fields like UserId, Password, EmailId, Qualification, Mobile Number, Mean while to check whether UserId is already used or not with out submitting complete form data.Using Remote Validation Attribute we can solve this scenario.
Note: this feature is available on or after releases of MVC-4 version.
Please follow bellow steps:
- Add System.Web.Mvc namespace to Model.
- Add Remote Validation Attribute to Model Property.
- Check whether these files are existed in your scripts folder (jquery.validate.min.js & jquery.validate.unobtrusive.min.js ) if not download it from nuget package manager.
- Import these JS files into Layout page or else View Page.
- Let Create JSONResult Action to perform validation.
When ever focus out from control automatically it invokes specified action.
|
1 2 3 4 5 6 7 8 9 |
public class UserDetailsModel { [Remote("CheckUser","Account",ErrorMessage ="UserName Already Exist")] public string UserName { get; set; } public string MailId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public class DefaultController : Controller { // GET: Default public ActionResult Index() { return View(); } [HttpGet] public ActionResult Create() { return View(); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@model WebApp_RandD.Models.UserDetailsModel @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>UserDetailsModel</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.MailId, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.MailId, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.MailId, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public class AccountController : Controller { public AccountController() { UserNamesList = new List<string>(); UserNamesList.Add("ramesh"); UserNamesList.Add("suresh"); UserNamesList.Add("naresh"); } public List<string> UserNamesList { get; set; } // GET: Account public ActionResult Index() { return View(); } public JsonResult CheckUser(string userName) { var result = string.IsNullOrEmpty(UserNamesList.Find(x => x == userName)) ? false : true; return Json(result, JsonRequestBehavior.AllowGet); } } |
Screen:1
Screen:2
Screen:3
