Geeks With Blogs
Amit's Blog Sharing Thoughts and Learning

While visiting the Asp.net Ajax forum I found quite a few post on the User Name Checking when creating an User. This is very common request and it is available in many Websites, So I decided to create a small sample. The following shows the full code listing:

<%@ Page Language="C#"%>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace="System.Web.Security" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [WebMethod()]
    public static bool CheckUserName(string userName)
    {
        return (Membership.GetUser(userName) != null);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Create User</title>
    <script type="text/javascript">

    var _txtUserName;
    var _divStatus;
    var _timerHandle;

    function pageLoad()
    {
        _txtUserName = $get('<%= CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName").ClientID %>');
        _divStatus = $get('<%= CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("divStatus").ClientID %>');
        $addHandler(_txtUserName, "keyup", onKeyUp);
    }

    function pageUnload()
    {
        $removeHandler(_txtUserName, "keyup", onKeyUp);
        clearTimer();
    }

    function onKeyUp(e)
    {
        setupTimer();
    }

    function setupTimer()
    {
        clearTimer();
        _timerHandle = window.setTimeout(checkUserName, 500)
    }

    function clearTimer()
    {
        if (_timerHandle != null)
        {
            window.clearTimeout(_timerHandle);
            _timerHandle = null;
        }
    }

    function checkUserName()
    {
        if (_txtUserName.value.length > 2)
        {
            _divStatus.innerHTML = 'Checking...';
            _divStatus.style.color = 'black';
            PageMethods.CheckUserName(_txtUserName.value, OnCheckUserNameComplete, OnCheckUserNameError, _txtUserName.value);
        }
    }
    
    function OnCheckUserNameComplete(result, userContext)
    {
        if (result == true)
        {
            _divStatus.innerHTML = String.format('\'{0}\' is already taken', userContext);
            _divStatus.style.color = 'red';
        }
        else
        {
            _divStatus.innerHTML = String.format('\'{0}\' is available', userContext);
            _divStatus.style.color = 'green';
        }
    }

    function OnCheckUserNameError(e)
    {
        _divStatus.innerHTML = e.get_message();
        _divStatus.style.color = 'red';
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager  ID="theScriptManager" runat="server" EnablePageMethods="true">
            </asp:ScriptManager>
            <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
                <WizardSteps>
                    <asp:CreateUserWizardStep runat="server">
                        <ContentTemplate>
                            <table border="0">
                                <tr>
                                    <td align="center" colspan="2">Sign Up for Your New Account</td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                        <div id="divStatus" runat="server"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Email" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">Security Question:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Question" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question" ErrorMessage="Security question is required." ToolTip="Security question is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Security Answer:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer" ErrorMessage="Security answer is required." ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2">
                                        <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2" style="color: red">
                                        <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                        <CustomNavigationTemplate>
                            <table border="0" cellspacing="5" style="width: 100%; height: 100%;">
                                <tr align="right">
                                    <td align="right" colspan="0">
                                        <asp:Button ID="StepNextButton" runat="server" CommandName="MoveNext" Text="Create User" ValidationGroup="CreateUserWizard1" />
                                    </td>
                                </tr>
                            </table>
                        </CustomNavigationTemplate>
                    </asp:CreateUserWizardStep>
                    <asp:CompleteWizardStep runat="server">
                    </asp:CompleteWizardStep>
                </WizardSteps>
            </asp:CreateUserWizard>
        </div>
    </form>
</body>
</html>

The steps are very simple:

  1. Add a CreateUserWizard Control and then Convert the Steps to Custom Template.
  2. Add a Div Tag right beside the User Name textbox.
  3. Create a Static method which accepts UserName and checks the Membership Provider for the existence.
  4. In the ClientSide hook the keydown event of the User name text box.
  5. Create a Timer so that we do not have to invoke the Server Side method upon each key press.
  6. Call the Server side method  to check the whether the user name is available.

For the clarity i have created a single page example instead of creating Code behind file and Web service.

You can download it from this link: CreateUser.aspx

kick it on DotNetKicks.com

Posted on Saturday, June 30, 2007 8:32 PM Asp.net Ajax , Tips/Tricks | Back to top


Comments on this post: Check User Name in Ajax way

# Links (7/1/2007)
Requesting Gravatar...
.NET Dynamic Strongly-Typed Configuration in C# C#: How to allow only one instance of an application
Left by Member Blogs on Jul 02, 2007 7:27 AM

# re: Check User Name in Ajax way
Requesting Gravatar...
I have been looking for this, Thank you. The one concern I have is addressing security. It would be easy for a hacker to use cross scripting to find usernames. Any ideas?

Brian
Left by Brian on Dec 13, 2007 11:25 PM

# re: Check User Name in Ajax way
Requesting Gravatar...
Do you guys have any idea on how to propose a username that does not yet exists in the database ?
I mean like hotmail does
Left by iPhone on Jun 12, 2008 9:17 AM

# re: Check User Name in Ajax way
Requesting Gravatar...
Hi,

Nice example.....

Cheers!!!

Ujjwal B Soni

<baroda>

<gujarat>

<india>
Left by ujjwal b soni on Dec 17, 2008 7:05 PM

Your comment:
 (will show your gravatar)


Copyright © Kazi Manzur Rashid | Powered by: GeeksWithBlogs.net | Join free