Checking username availability with Ajax using jQuery in asp.net mvc

In this article, I will show you how to check username availability for registration form validation using jQuery Ajax in asp.net mvc. Here I check the validation in jQuery for textbox change event. When a user enters username in the textbox, on change event jQuery Ajax call the checkUsername() method in a controller. Here it checks the username is available in the database or not and show the result on the page.

Step 1: Create an ado.net entity data model using table UserLogin and generate entity for that.

Step 2: Create an asp.net mvc project and right click on the controller folder and create a new controller and name it as UserLoginController. Inside the UserLoginController copy and paste the following code.

   private models db = new models();
        // GET:/Admin/UserLogin/

        public ActionResult Index()
        {
            return View(db.UserLogins.ToList());
        }
 
        public JsonResult CheckUsername(string UserName)
        {
            string retval = "";
            if (db.UserLogins.Any(r => r.Name == UserName))
            {
                retval = "true";
            }
            else
            {
                retval = "false";
            }
            return Json(retval, JsonRequestBehavior.AllowGet);
        }

Step 3: Right click on the Share folder and create a view named as index. Copy and paste the following code.

@model My_MVC.Models.UserLogin

<script type="text/javascript">
    $(document).ready(function () {
        $('#Name').on('change', function () {
            $.ajax({
                type: "POST",
                url:'@Url.Action("CheckUsername", "UserLogin", new { area = "Admin" })',//  this for calling the web method function in controller.
                data: '{UserName: "' + $("#Name").val()+ '" }',// user name value 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
        });
    });
    //function OnSuccess 
    function OnSuccess(response) {
        var msg = $("#lblStatus");
        debugger;
        switch (response) {
            case "true":
                msg.show();
                msg.css("color","red");
                msg.html("User Name already exists.");
                break;
            case "false":
                msg.show();
                msg.css("color","green");
                msg.html("User Name Available");
                break;
        }
    }
 
</script>


@Html.ValidationSummary(true)
<fieldset class="form-horizontal">
    <legend>Please Enter User <small>Details</small></legend>
    <div class="control-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label"})
        <div class="controls">
            @Html.EditorFor(model => model.Name, new { @class = "input-xlarge"})
            @Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })
                 <div  id="lblStatus" />
        </div>
    </div>
<div class="control-group">
      @Html.LabelFor(model => model.Email, new { @class = "control-label"})
      <div class="controls">
        @Html.EditorFor(model => model.Email, new { @class = "input-xlarge"})
        @Html.ValidationMessageFor(model => model.Email, null, new { @class = "help-inline" })
    </div>
        </div>
<div class="control-group">
        @Html.LabelFor(model => model.Role, new { @class = "control-label"})
        <div class="controls">
            @Html.EditorFor(model => model.Role, new { @class = "input-xlarge"})
            @Html.ValidationMessageFor(model => model.Role, null, new { @class = "help-inline" })
        </div>
    </div>
    <div class="control-group">
        @Html.LabelFor(model => model.Password, new { @class = "control-label"})
        <div class="controls">
            @Html.PasswordFor(model => model.Password, new { @class = "input-xlarge"})
            @Html.ValidationMessageFor(model => model.Password, null, new { @class = "help-inline" })
        </div>
    </div>
    <div class="control-group">
        @Html.LabelFor(model => model.MobileNo, new { @class = "control-label"})
        <div class="controls">
            @Html.EditorFor(model => model.MobileNo, new { @class = "input-xlarge"})
            @Html.ValidationMessageFor(model => model.MobileNo, null, new { @class = "help-inline" })
        </div>
    </div>
</fieldset>

JQuery validation example in asp.net mvc: