Client Side Username Availability Checking in MVC

It is often required live ‘username’ checking on user registration page in web applications. Today I developed this for my one of the web application and would like to share that with you.

Let’s look at the gif screen before looking at the code.

Now, to develop this you just need make an Ajax GET call to a method sitting inside ‘Account’ controller.

Here is the Register.cshtml code, I highlighted the changed made.

@model MvcApplication1.Models.RegisterModel

@{

    ViewBag.Title = "Register";

}

<hgroup class="title">

    <h1>@ViewBag.Title.</h1>

    <h2>Create a new account.</h2>

</hgroup>

@using (Html.BeginForm()) {

    @Html.AntiForgeryToken()

    @Html.ValidationSummary()

    <fieldset>

        <legend>Registration Form</legend>

        <ol>

            <li>

                @Html.LabelFor(m => m.UserName)

                @Html.TextBoxFor(m => m.UserName)

                <span id="result" />

            </li>

            <li>

                @Html.LabelFor(m => m.Password)

                @Html.PasswordFor(m => m.Password)

            </li>

            <li>

                @Html.LabelFor(m => m.ConfirmPassword)

                @Html.PasswordFor(m => m.ConfirmPassword)

            </li>

        </ol>

        <input type="submit" value="Register" />

    </fieldset>

}

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/jscript">

        $('#UserName').blur(function () {

            var url = "/Account/CheckUserName";

            var name = $('#UserName').val();

            $.get(url, { input: name }, function (data) {

                if (data == "Available") {

                    $("#result").html("<span style='color:green'>Available</span>");

                    $("#UserName").css('background-color', '');

                }

                else {

                    $("#result").html("<span style='color:red'>Not Available</span>");

                    $("#UserName").css('background-color', '#e97878');

                }

            });

        })

    </script>

}

Now, look at the method sitting inside Account controller.

[AllowAnonymous]

public string CheckUserName(string input)

{

    bool ifuser = WebSecurity.UserExists(input);

    if (ifuser == false)

    {

        return "Available";

    }

    if (ifuser == true)

    {

        return "Not Available";

    }

    return "";

}

In case, if you wish to watch the video of this article?