Check username availability with Gaia

Using Ajax, it is possible to provide real time validation to let a user whether his or her desired username is available. The previous article "Check username availability with ASP.NET AJAX" described how to accomplish this task with MS AJAX. This article explains how to accomplish the same task with Gaia and ASP.NET

As discussed in the previous article, Gaia Web Widgets Framework is an alternative to MS AJAX for creating Ajax-enabled applications. In the article "Check username availability with ASP.NET AJAX", we examined how using ASP.NET and MS AJAX we can indicate to a user whether or not the desired username is available, as well as if the email address has already been used to register an account.

In this article, we will see how we can use Gaia to add the check username functionality ot a form without coding a single line of javascript. The Gaia controls that will be used are the gaia:textbox and gaia:label.

To use Gaia you first need to download it from http://www.ajaxwidgets.com. There are two versions: 1) the GPL licensed version and the 2) the commercial version. The information on their website can help you decide which version to use. For this article you can download the GPL version for development on your local machine. Once you have downloaded Gaia and unzipped the file, you will need to add Gaia.WebWidgets.dll to the toolbox.

Create a new WebForm and instead of adding asp:textbox controls to the registration form, use the gaia:textbox control instead. Add the gaia:label control next to the textbox; this label will show the message whether the username is available or not. Your form shold look similiar to the example below. Also in this example i am setting the Font-Bold property on the gaia:label; in practice you should use CSS to control the font. I just used Font-Bold so i did not have to create an extra style in my stylesheet. On the Username textbox, the AutoPostBack property has been set to true, and the OnTextChanged event has been set as well. By setting the AutoPostBack to true the CheckUserName method will fire onblur (when the textbox loses focus).

<ul>
<li><label for="Email" id="lblEmail" runat="server">Email</label><gaia:TextBox
            ID="Email" CssClass="txtboxes" runat="server" /> </li>

    <li><label for="Username" id="lblUsername" runat="server">Username</label><gaia:TextBox
            ID="Username" AutoPostBack="true" OnTextChanged="CheckUserName" CssClass="txtboxes" runat="server"></gaia:TextBox><gaia:Label ID="lblAvailable" Font-Bold="true" runat="server"></gaia:Label></li>

    <li><label for="Password" id="lblPassword" runat="server">Password</label><gaia:TextBox
            ID="Password" CssClass="txtboxes" runat="server" /> <asp:requiredfieldvalidator runat="server" controltovalidate="Password" errormessage="Password is required" Display="dynamic" id="reqvalPassword" /></li>

    <li><label for="txtReenter" id="lblReenter" runat="server">Reenter Password</label><gaia:TextBox ID="txtReenter" CssClass="txtboxes" runat="server" /</li>
</ul>

In the code behind, we need to add the appropriate code to see if the username is available or not. The code below should be self-explanatory. If the username is not available we set the gaia:label's text to "Username not available" and make the text red and we do the reverse if the username is available. Please note that you should use CSS to the gaia:label's color rather than in code behind.

Public Sub CheckUserName(ByVal sender As Object, ByVal e As System.EventArgs)
        If CheckUsernameAvail(Username.Text) = True Then
            lblAvailable.ForeColor = Drawing.Color.Red 'Use CSS instead to control the gaia:label's color
            lblAvailable.Text = "Username not available"
        ElseIf CheckUsernameAvail(Username.Text) = False Then
            lblAvailable.ForeColor = Drawing.Color.Green 'Use CSS instead to control the gaia:label's color
            lblAvailable.Text = "Username available"
        End If
    End Sub
    Private Function CheckUsernameAvail(ByVal username As String) As Boolean
        If (Membership.GetUser(username) IsNot Nothing) Then
            Return True
        Else : Return False
        End If
    End Function

Using Gaia we can add check username functionality to any registration form very easily with a minimum of effort. In contrast to "Check username availability with ASP.NET AJAX", we have used no javascript, do not need a script manager control on the page, and have not had to preface any function with WebMethod. With Gaia we have fewer lines of code, and less time was spent adding this functionality to our registration form.

I should present another approach using MS AJAX - one that uses an updatepanel to accomplish the same task. Dave Ward describes this in detail. However he does state that this approach with the update panel will be heavier than an approach in which the necessary javascript is manually coded. An MSDN Magazine article also mentions the fact the UpdatePanel while easy and simple to use is inefficient and bandwidth intensive. By comparison, the folks behind Gaia say that their framework is lighter and consumes less bandwith than other ajax frameworks.

Overall, after spending the last two days working with Gaia, I must say that I am suitably impressed with Gaia. Gaia truly does live up to the tagline: "Code Less, Create More" .

You can see the live demo here.

Are there any Ajax tasks you want to see implemented using Gaia? Send an Email.