Post
Ask Question

UserID Verification Using Ajax in C#

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).
 
Design Page
  1. <table>  
  2. <tr>  
  3. <td>  
  4. Name:  
  5. </td>  
  6. <td>  
  7. <asp:TextBox ID="txtName" runat="server" />  
  8. </td>  
  9. <td>  
  10. </td>  
  11. </tr>  
  12. <tr>  
  13. <td>  
  14. User Or Email Name:  
  15. </td>  
  16. <td>  
  17. <asp:TextBox ID="txtUsernameOrEmail" runat="server" onchange="UserOrEmailAvailability()"  
  18. onblur="UserOrEmailAvailability()" />  
  19. </td>  
  20. <td>  
  21. <div id="checkusernameoremail" runat="server">  
  22. <asp:Label ID="lblStatus" runat="server"></asp:Label>  
  23. </div>  
  24. </td>  
  25. </tr>  
  26. <tr>  
  27. <td>  
  28. Address  
  29. </td>  
  30. <td>  
  31. <asp:TextBox ID="txtAddress" TextMode="MultiLine" runat="server" />  
  32. </td>  
  33. </tr>  
  34. </table>  
  35.    
  36.    
  37. <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  
  38. <script type="text/javascript">  
  39. function UserOrEmailAvailability() { //This function call on text change.  
  40. $.ajax({  
  41. type: "POST",  
  42. url: "registration.aspx/CheckEmail", // this for calling the web method function in cs code.  
  43. data: '{useroremail: "' + $("#<%=txtUsernameOrEmail.ClientID%>")[0].value + '" }', // user name or email value  
  44. contentType: "application/json; charset=utf-8",  
  45. dataType: "json",  
  46. success: OnSuccess,  
  47. failure: function (response) {  
  48. alert(response);  
  49. }  
  50. });  
  51. return true;  
  52. }  
  53. // function OnSuccess  
  54. function OnSuccess(response) {  
  55. var msg = $("#<%=lblStatus.ClientID%>")[0];  
  56. switch (response.d) {  
  57. case "true":  
  58. msg.style.display = "block";  
  59. msg.style.color = "red";  
  60. msg.innerHTML = "User Name Or Email already exists.";  
  61. //("#txtUsernameOrEmail").focus();  
  62. document.getElementById("txtUsernameOrEmail").focus();  
  63. break;  
  64. case "false":  
  65. msg.style.display = "block";  
  66. msg.style.color = "green";  
  67. msg.innerHTML = "User Name Or Email Available";  
  68. break;  
  69. }  
  70. }  
  71. </script>  
Code Behind
  1. [System.Web.Services.WebMethod]  
  2. public static string CheckEmail(string useroremail)  
  3. {  
  4. string retval = "";  
  5. SqlConnection con = new SqlConnection("data source=VINOD-PC\\sql20080;initial catalog=VinodTesting;UID=sa;PWD=123");  
  6. con.Open();  
  7. SqlCommand cmd = new SqlCommand("select City from tbl_Employee where City=@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. return retval;  
  19. }