Thursday, 11 April 2013

Client Side Username Availability Checking in MVC





 Now, to develop this you just need to make an Ajax GET call to a method in the "Account" controller.

Here is the Register.cshtml code, I highlighted the changes.

@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 in the 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 "";
}