Check Username availability in Page Load and keyup based on TextBox value using AJAX PageMethods in ASP.Net

Last Reply on Aug 17, 2017 06:44 AM By dharmendr

Posted on Aug 10, 2017 09:56 PM

 

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE dbo.CheckUsername
     @Email VARCHAR(255)
AS
BEGIN
      SET NOCOUNT ON;
      IF NOT EXISTS
            (SELECT * FROM T_Create_Profile
             WHERE Email = @Email
            )
            SELECT 'true'
      ELSE
            SELECT 'false'
END
GO


<System.Web.Services.WebMethod()> _
    Public Shared Function CheckUserName(ByVal userName As String) As String
        Dim returnValue As String = String.Empty
        Try
            Dim consString As String = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
            Dim conn As New SqlConnection(consString)
            Dim cmd As New SqlCommand("CheckUsername", conn)
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@Username", userName.Trim())
            conn.Open()
            returnValue = cmd.ExecuteScalar().ToString()
            conn.Close()
        Catch
            returnValue = "error"
        End Try
        Return returnValue
    End Function

<script type="text/javascript">
        function UsernameAvailability() {
            PageMethods.CheckUserName(document.getElementById("<%=txtUsername.ClientID%>").value, Username_OnSuccess);
        }
        function Username_OnSuccess(response) {
            var mesg = document.getElementById("Username_Check");
            
            switch (response) {
                case "true":
                    mesg.style.color = "";
                    mesg.innerHTML = "";
                    break;
                case "false":
                    mesg.style.color = "red";
                    mesg.innerHTML = "Username already taken.";
                    break;
            }
        }
        function Username_OnChange(txt) {
            document.getElementById("Username_Check").innerHTML = "";
        }
    </script>

                            
<span id="Username_Check"></span>

                            
<asp:TextBox ID="txtUsername" runat="server" onkeyup="Username_OnChange(this);UsernameAvailability();" ondrop="return false;" onpaste="return false;"></asp:TextBox>

I created a table called T_Create_Profile and in the table I added a column called Username. Then I added a data under Username called Will. Now After I run the program and typed “Will” into the textbox I was hoping to see the message saying “Username already taken” but I don’t see any message. Am I doing anything wrong?

 

By the way I tried to follow one of your tutorials titled “Check Username Availability in ASP.Net using AJAX PageMethods” but no luck. Please help. 

You are viewing reply posted by: dharmendr on Aug 17, 2017 06:44 AM.
Posted on Aug 17, 2017 06:44 AM Modified on on Aug 17, 2017 06:49 AM

Hi power,

Here i have created complete sample. Refer the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function Test() {
            PageMethods.CheckUserName(document.getElementById("<%=txtUsername.ClientID%>").value, Username_OnSuccess);
        }
        function UsernameAvailability() {
            PageMethods.CheckUserName(document.getElementById("<%=txtUsername.ClientID%>").value, Username_OnSuccess);
        }
        function Username_OnSuccess(response) {
            var mesg = document.getElementById("Username_Check");
            if (document.getElementById("<%=txtUsername.ClientID%>").value.length > 0) {
                switch (response) {
                    case "true":
                        mesg.style.color = "green";
                        mesg.innerHTML = "Available";
                        break;
                    case "false":
                        mesg.style.color = "red";
                        mesg.innerHTML = "Username already taken.";
                        break;
                }
            }
            else {
                mesg.innerHTML = "";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtUsername" onChange="UsernameAvailability()" onkeyup="UsernameAvailability()"
                    ondrop="return false;" onpaste="return false;" runat="server" Text="maria" />
                <span id="Username_Check"></span>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

C#

[System.Web.Services.WebMethod()]
public static string CheckUserName(string userName)
{
    string returnValue = string.Empty;
    try
    {
        string consString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        SqlConnection conn = new SqlConnection(consString);
        SqlCommand cmd = new SqlCommand("CheckUsername", conn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@Name", userName.Trim());
        conn.Open();
        returnValue = cmd.ExecuteScalar().ToString();
        conn.Close();
    }
    catch (Exception ex)
    {
        returnValue = "error";
    }
    return returnValue;
}

VB.Net

<System.Web.Services.WebMethod()> _
Public Shared Function CheckUserName(ByVal userName As String) As String
    Dim returnValue As String = String.Empty
    Try
        Dim consString As String = ConfigurationManager.ConnectionStrings("ConString").ConnectionString
        Dim conn As New SqlConnection(consString)
        Dim cmd As New SqlCommand("CheckUsername", conn)
        cmd.CommandType = CommandType.StoredProcedure
        cmd.Parameters.AddWithValue("@Name", userName.Trim())
        conn.Open()
        returnValue = cmd.ExecuteScalar().ToString()
        conn.Close()
    Catch
        returnValue = "error"
    End Try
    Return returnValue
End Function

Screenshot