Check Username Availability with ASP.NET AJAX

Here is a little trick you can use to spice up your asp.net registration pages. I will use ASP.NET AJAX to inform the user whether the username they have entered is available. Rather than use the UpdatePanel, I will slim down the amount of data going over the wire for each ajax request. I will accomplish this using the PageMethods feature.

This tutorial assumes that you have a working knowledge of how to start an ASP.NET AJAX web application, drop a script manager control onto your form, and use the CreateUser wizard control, or another method of registering users.  A little JavaScript knowledge will help too.

In order to use PageMethods, I will need to set the EnablePageMethods property to true on my ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />

My registration page is called register.aspx. I will create a static method in the code behind for this page. The method will check to see if a username exists, and return a Boolean indicating whether the username is available or not.

[WebMethod]

public static bool IsUserAvailable(string username) 

{

    MembershipUser usr = Membership.GetUser(username);

     return (usr == null);

}

The WebMethod attribute is needed to mark this as a method that can be executed from Javascript.

Now I will go ahead and create some markup create some markup for my username field on your registration page. Something like this should do.

<asp:Label ID="lblUserName" runat="server" AssociatedControlID="UserName">Desired Username</asp:Label>

<asp:TextBox ID="UserName" runat="server" CssClass="txt" onkeyup="usernameChecker(this.value);" />

<span id="spanAvailability"></span>

There are a couple of things to take note of here. The onkeyup javascript event will be fired every keypress, and will be used to check the availability of the username entered.  Also take note of the span with an id of spanAvailability. The JavaScript will use this span to write output letting the user know whether the username is available.

Here's the last part, the Javascript that wires everything together.  I will insert this at the bottom of my register.aspx page:

<script type="text/javascript">

var usernameCheckerTimer;

var spanAvailability = $get("spanAvailability");

function usernameChecker(username) 

{

    clearTimeout(usernameCheckerTimer);

    if (username.length == 0)

        spanAvailability.innerHTML = "";

    else

    {

        spanAvailability.innerHTML = "<span style='color: #ccc;'>checking...</span>";

        usernameCheckerTimer = setTimeout("checkUsernameUsage('" + username + "');", 750);

    }

}

function checkUsernameUsage(username) 

{

    // initiate the ajax pagemethod call

    // upon completion, the OnSucceded callback will be executed

    PageMethods.IsUserAvailable(username, OnSucceeded);

}

// Callback function invoked on successful completion of the page method.

function OnSucceeded(result, userContext, methodName) 

{

    if (methodName == "IsUserAvailable")

    {

        if (result == true)

            spanAvailability.innerHTML = "<span style='color: DarkGreen;'>Available</span>";

        else

            spanAvailability.innerHTML = "<span style='color: Red;'>Unavailable</span>";

    }

}

</script>

This effect is pretty easy to do, and adds a nice value to the user experience.  I hope you are able to find use for this technique in your applications.

Update: Download a sample project here