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

Last Reply 5 days ago By dharmendr

Posted 12 days ago

 

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. 

Posted 6 days ago

Hi power,

You need to add the below line of code inside the script. So when the palod finish it will check the UserName availability based on the TextBox value.

window.onload = function UsernameAvailability() {
    PageMethods.CheckUserName(document.getElementById("<%=txtUsername.ClientID%>").value, Username_OnSuccess);
}

 


Posted 5 days ago Modified on 5 days ago

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

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html