Reader Level:
ARTICLE

Client Side Username Availability Checking in MVC

Posted by Abhimanyu K Vatsa Articles | ASP.NET MVC March 15, 2013
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.
  • 0
  • 0
  • 4448

It is often necessary to check a "username" in a user registration page live in web applications. Today I developed this for one of my web applications and would like to share it with you.


Let's look at the following GIF screen before looking at the code.



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 "";

}

 

In case you wish to watch the video of this article, see the following:


COMMENT USING

Trending up