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?

Comments

  1. Why not use jQuery validator wiht ASP.NET MVC Data Annotation "Remote"?

    http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx

    ReplyDelete
  2. Is it checking with database user name as well?

    ReplyDelete
    Replies
    1. yes u can do this make the sp take input and check the count if count >0 then name exist otherwise new entry....

      Delete
  3. yr...before using WebSecurity we need to import some namespace?
    I have imported System.Web.Security....but,its not work still.

    ReplyDelete
  4. Hi Abhimanyu Kumar Vatsa !

    If I want to display information of user like model.FullName, model.Address, model.Gender by event blur of textbox. How can I do it ?

    sorry for my English.

    ReplyDelete
  5. what is WebSecurity? it is showing error.. how to use it.

    ReplyDelete
  6. hi abhimanyu..very nice article..thank you so much..but same thing i am trying in mvc2 but unable to get namespace for allowanonymus..please help me in that..system.web.hhtp is not there in reference

    ReplyDelete
  7. i want to retrive data base on enter username in textbox lostfocus in jquery

    ReplyDelete
  8. Web security throwing error..................give proper response abhimanu

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System