Tuesday, October 23, 2012

Check UserName Availability Using XmlHttp in ASP.NET


Most email service providers like gmail, yahoo and hotmail provide live username availability checks. And this trend has been followed by other websites also. This is pretty simple in asp.net to check username availability before user submits the credentials. This saves time as well as increases user interactivity. In this article, I am going to show the simple username availability check mechanism using xmlhttp.

Fig 1: UserName availability check using xmlhttp in asp.net web page
Let's define a simple user registration page. I am just showing the two fields: username and email for demonstration. Please note that this is not a complete code snippet. And I haven't implemented any other validation, for instance there could be one for email validation.
RegisterUser.aspx (add this markup after form element)

  1. <table cellpadding="0" cellspacing="2">  
  2.   
  3.     <tr>  
  4.   
  5.         <td>User Name:</td>  
  6.   
  7.         <td>  
  8.   
  9.             <asp:TextBox ID="txtUserName" runat="server" onkeydown="CheckUserNameAvailability();"></asp:TextBox>  
  10.   
  11.             <asp:Label ID="lblMsg" runat="server"></asp:Label>  
  12.   
  13.         </td>  
  14.   
  15.     </tr>  
  16.   
  17.     <tr>  
  18.   
  19.         <td>Email:</td>  
  20.   
  21.         <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>  
  22.   
  23.     </tr>  
  24.   
  25.     <tr>  
  26.   
  27.         <td></td>  
  28.   
  29.         <td><asp:Button ID="btnRegister" runat="server" Text="Register" /></td>  
  30.   
  31.     </tr>      
  32.   
  33.    </table>  

Now we add the required xmlhttp snippet in the page. This code is to be added before head section of RegisterUser.aspx page.

  1.   

Here goes the page that checks if the username already exists in the database and returns true (if the username does not exists) or false (if the username is already in use).

CheckUserAvailabilityUsingXMLHTTP.aspx


  1. //page load event  
  2.    protected void Page_Load(object sender, EventArgs e)  
  3.    {  
  4.        CheckUserNameAvailability();  
  5.    }  
  6.   
  7.    //checks if the username is available  
  8.    //for demo, usename has been checked against the asp.net membership system  
  9.    public void CheckUserNameAvailability()  
  10.    {  
  11.        if (Request.Params.Get("UserName") != null)  
  12.        {  
  13.            string username = Request.Params.Get("username");  
  14.            string result = "False";  
  15.            MembershipUser user = Membership.GetUser(username);  
  16.            if (user != null)  
  17.            {  
  18.                result = "False";  
  19.            }  
  20.            else  
  21.            {  
  22.                result = "True";  
  23.            }  
  24.   
  25.            Response.Clear();  
  26.            Response.Write(result);  
  27.            Response.End();  
  28.        }  
  29.    }  

Please note the CheckUserNameAvailability.aspx page being called by the xmlhttp code in RegisterUser.aspx page. That's it. Happy Programming!