Post
Ask Question

How to Check User Name or Email Availability Using ASP.NET, Ajax and jQuery

Today every website has a registration page. So I created a registration page in which the user enters user information like name, username or email, password, address and so on. The registration page must validate that the username or email is unique. So it must check the username or email the user entered. When this validation is done for the submit button click it is not good for the user, he fully fills in the form then clicks. If something does not exist then the user again fills in the form. So I do the validation on the entering of data into the TextBox (OnTextChanged event). Here I am getting the problem that after entering a username into the TextBox I am getting the data from the database and showing the result on the page, like whether or not that username is available but at that time the page gets a post-back and sometimes loses the values entered into the textboxes and all this because I used an Ajax jQuery to check the username or email availability.

Now first create the user table in the database.

  1. Create table tbl_User(Name varchar(100), UserNameorEmail varchar(100), Address varchar(500))  
And insert some records into the table:
  1. Insert into tbl_User(Name, UserNameorEmail, Address) values('Jitendra', 'Jitendra1', 'demo address')  
  2. Insert into tbl_User(Name, UserNameorEmail, Address) values('Ram', '[email protected]', 'demo address')  
  3. Insert into tbl_User(Name, UserNameorEmail, Address) values('Rohan', 'Rohan123', 'demo address')  
  4. Insert into tbl_User(Name, UserNameorEmail, Address) values('Shyam', '[email protected]', 'demo address')  
  5. Insert into tbl_User(Name, UserNameorEmail, Address) values('Rahim', 'Rahim987', 'demo address')  
After creating the table, create the application: New --> website.

creayte new website

Give the name “CheckUsernameEmailAvailabilityUsingAjax”.

web form

Then create a new item name “registration”.

add new item

add webform

Your aspx page likes this.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head id="Head1" runat="server">  
  3.     <title>Check Username/Email availability Using Ajax and JQuery</title>  
  4. </head>  
  5. <body>  
  6.     <form id="form1" runat="server">  
  7.   
  8.         <div>  
  9.   
  10.             <table>  
  11.                 <tr>  
  12.                     <td>Name:  
  13.                     </td>  
  14.                     <td>  
  15.                         <asp:TextBox ID="txtName" runat="server" />  
  16.                     </td>  
  17.                     <td>                         
  18.                     </td>  
  19.                 </tr>  
  20.                 <tr>  
  21.                     <td>User Or Email Name:  
  22.                     </td>  
  23.                     <td>  
  24.                         <asp:TextBox ID="txtUsernameOrEmail" runat="server" onchange="UserOrEmailAvailability()" />  
  25.                     </td>  
  26.                     <td>  
  27.                         <div id="checkusernameoremail" runat="server">                             
  28.                             <asp:Label ID="lblStatus" runat="server"></asp:Label>  
  29.                         </div>  
  30.                     </td>  
  31.                 </tr>  
  32.                 <tr>  
  33.                     <td>Address</td>  
  34.                     <td>  <asp:TextBox ID="txtAddress" TextMode="MultiLine" runat="server" /></td>  
  35.                 </tr>  
  36.             </table>  
  37.   
  38.         </div>  
  39.     </form>  
  40.   
  41.     <script src="Scripts/jquery-1.7.1.min.js"></script>  
  42.   
  43.     <script type="text/javascript">  
  44.   
  45.         function UserOrEmailAvailability() { //This function call on text change.             
  46.             $.ajax({  
  47.                 type: "POST",  
  48.                 url: "registration.aspx/CheckEmail", // this for calling the web method function in cs code.  
  49.                 data: '{useroremail: "' + $("#<%=txtUsernameOrEmail.ClientID%>")[0].value + '" }',// user name or email value  
  50.                 contentType: "application/json; charset=utf-8",  
  51.                 dataType: "json",  
  52.                 success: OnSuccess,  
  53.                 failure: function (response) {  
  54.                     alert(response);  
  55.                 }  
  56.             });  
  57.         }  
  58.   
  59.         // function OnSuccess  
  60.         function OnSuccess(response) {  
  61.             var msg = $("#<%=lblStatus.ClientID%>")[0];  
  62.             switch (response.d) {  
  63.                 case "true":  
  64.                     msg.style.display = "block";  
  65.                     msg.style.color = "red";  
  66.                     msg.innerHTML = "User Name Or Email already exists.";  
  67.                     break;  
  68.                 case "false":  
  69.                     msg.style.display = "block";  
  70.                     msg.style.color = "green";  
  71.                     msg.innerHTML = "User Name Or Email Available";  
  72.                     break;  
  73.             }  
  74.         }  
  75.   
  76.     </script>  
  77.   
  78. </body>  
  79. </html>  
Now add a “using System.Data.SqlClient;” reference in the code behind and write the following code to check whether or not the Username or Email exists in the database.
  1. [System.Web.Services.WebMethod]  
  2. public static string CheckEmail(string useroremail)  
  3. {  
  4.     string retval = "";  
  5.     SqlConnection con = new SqlConnection("data source=LENOVO;initial catalog=Test;UID=sa;PWD=connect");  
  6.     con.Open();  
  7.     SqlCommand cmd = new SqlCommand("select UserNameorEmail from tbl_User where UserNameorEmail=@UserNameorEmail", con);  
  8.     cmd.Parameters.AddWithValue("@UserNameorEmail", useroremail);  
  9.     SqlDataReader dr = cmd.ExecuteReader();  
  10.     if (dr.HasRows)  
  11.     {  
  12.         retval = "true";            
  13.     }  
  14.     else  
  15.     {  
  16.         retval = "false";            
  17.     }  
  18.   
  19.   return retval;  
  20. }  
Add a jQuery library reference to the aspx page:
  1. <script src="Scripts/jquery-1.7.1.min.js"></script>  
See the database table:

result

Test the page:

Test the page

registration

 


Similar Articles