Checking for existing username without page refresh in ASP.NET MVC (Remote validation)

Sheonarayan
Posted by in ASP.NET MVC category on for Advance level | Points: 250 | Views : 25130 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, we are going to learn a frequently used functionality in any web application where at the time of registration it is checked for the existing username in the database and user is alerted that this username already exists. There are few ways to do that and one of them is by using the Remote Validation in ASP.NET MVC. This article describes how to use Remote Validations in ASP.NET MVC to achieve this task.
Recommendation
Read ASP.NET MVC bibliography before this article.

Introduction


Remote Validation is a nice validation feature available in ASP.NET MVC. It is client side validation technique that invokes action method on the server to perform validation for a particular data.

This validation is completely different from the normal model validation where all the properties of the model is validated. In this type of validation, only a specific model property is validated. As part of this process, an AJAX request is made to the server to validate the data that has been requested. If it exists, a validation error is shown to the user. All this happens in the background, user doesn't have to click any button to perform this validation. As and when user keeps typing, this validation is performed and result is shown to the user.




How to achieve Remote Validation?

To achieve Remote Validation, we need to do a few changes in our Model class. Below is my changed model class.

public class PersonalDetail
    {
        [Key]
        [DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)]
        public int AutoId { get; set; }

        [StringLength(20, MinimumLength = 4, ErrorMessage = "Must be at least 4 characters long.")]
        [Remote("CheckForDuplication", "Validation")]
        public string FirstName { get; set; }
        
        public int Age { get; set; }
    }
Notice the FirstName property and its attributes (Please note that despite my Property name is FirstName, I am treating it as UserName to bring it to this context). The first attribute is to specify the maximum and minimum number of characters accepted in this field and the second attribute is the one we are talking about here. This specifies that Remote validation will be performed on this field and its parameter specifies that which action method of which controller will be used to generate URL to be called from JavaScript validation library.



My view page (.cshtml) code looks like this, there is no major changes in this because of Remote Validation.

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>PersonalDetail</legend>

        <div class="editor-label">
            Username
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


In the Controller, we have following methods
        public ActionResult RemoteValidation(PersonalDetail pd)
        {
            return View(pd);
        }

        public JsonResult CheckForDuplication(string FirstName)
        {
            var data = db.PersonalDetails.Where(p => p.FirstName.Equals(FirstName, StringComparison.CurrentCultureIgnoreCase)).FirstOrDefault();

            if (data != null)
            {
                return Json("Sorry, this name already exists", JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(true, JsonRequestBehavior.AllowGet); 
            }
        }
The first method simply, returns the RemoteValidation view with my model.

The second method gets called when user starts writing characters in the UserName text box (in my case the model property name is FirstName but I am calling this as UserName). However this method is not get called unless user enters 4 characters, this happens because of StringLength attribute on this field.


When user writes at least 4 characters, the second method gets called and in this method we are validating the FirstName in the database and if it exists; returning the error message.



If the UserName (in my case FirstName field of the database) doesn't exists, second method returns true and the validation passes.



Note that all these steps are performed using jQuery AJAX and no complete post back request is sent to the server so all these processes looks very smooth and interactive.

Conclusion

Remote Validation helps us giving quick feedback to the user for the availability of UserName (in this case FirstName) however it should be used cautiously as every key stroke in the UserName textbox after 4 characters will call the Validation method causing consumption of more bandwidth and resources of the server.

Hope this article was useful. 

Thanks for reading. Do share your comment or feedback.

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Vishvvas on: 6/23/2014 | Points: 25
This is good revelation as very few programmers are aware of this.As mentioned in the write-up, though this can be good feature, one has to embrace it with judiciously after assessing the adverse impact on performance.
Posted by: Sheonarayan on: 6/23/2014 | Points: 25
Correct. Thanks Vishvvas!
Posted by: Jayakumars on: 8/31/2015 | Points: 25
Hi
Sheo

Can you share zip format source code thats helpful to others. Some of your MVC Article not provision source but i learning purpuse found no one article nothing source from yours.

Login to post response

Comment using Facebook(Author doesn't get notification)