In this article I will explain with an example, how to check whether UserName already exists in database or not using JavaScript XmlHttp and AJAX in ASP.Net with C# and VB.Net.
 
 

Database

I have made use of the following table Users with the schema as follow.
Check whether username already exists
 
I have already inserted few records in the table.
Check whether username already exists
 
Note: You can download the database table SQL by clicking the download link below.
            Download SQL file
 
 

Stored Procedure

The following Stored Procedure will be used to check whether the supplied UserName exists in the SQL Server database or not.
It will return TRUE if the UserName does not exists in SQL Server database i.e. it is available and it will return FALSE if the UserName exists in the SQL Server database i.e. it is already in use.
CREATE PROCEDURE [dbo].[CheckUserAvailability]
    @UserName VARCHAR(50)
AS
BEGIN
    SET NOCOUNT ON;
    IF NOT EXISTS (SELECT UserNameFROM Users
                   WHERE UserName = @UserName)
    BEGIN
        SELECT 'TRUE'
    END
    ELSE
    BEGIN
        SELECT 'FALSE'
    END
END
GO
 
 

HTML Markup

The HTML Markup consists of following elements:
TextBox – For capturing UserName.
The HTML TextBox has been assigned with an onkeyup event handler which triggers the ClearMessage JavaScript function.
Button – For checking availability of entered UserName.
The HTML Button has been assigned with an onclick event handler which triggers the CheckAvailability JavaScript function.
SPAN – For displaying message.
Username:
<input id="txtUsername" type="text" onkeyup="ClearMessage()" />
<input id="btnCheck" type="button" value="Show Availability" onclick="CheckAvailability()" />
<br />
<span id="message"></span>
 
 

Client Side PageMethod implementation

CheckAvailability JavaScript function

When the Button is clicked, the CheckAvailability JavaScript function gets called.
Inside this function, an AJAX call is made to the CheckUserName WebMethod (explained later) using JavaScript XmlHttp function which accepts the UserName as parameter.
Note: For more details on calling WebMethod using XmlHttp, please refer AJAX Calls Using JavaScript And XMLHTTP in ASP.Net.
 
When the response is received, based on whether the UserName is available or in use, an appropriate message is set into the HTML SPAN element.

ClearMessage JavaScript function

The ClearMessage JavaScript function gets called when user types in the TextBox, it simply clears the message set in the HTML SPAN element.
<script type="text/javascript">
    function CheckAvailability() {
        var username = document.getElementById("txtUsername").value;
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if  (request != null) {
            var url = "Default.aspx/CheckUserName";
            request.open("POST", url, false); 
            var sendStr = "{username: '" + username + "'}";
            request.setRequestHeader("Content-Type", "application/json");
             request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    var messages = document.getElementById("message");
                    if (JSON.parse(request.responseText).d) {
                        //Username available.
                        message.style.color = "green";
                        message.innerHTML = "Username is available";
                    }
                    else {
                        //Username not available.
                        message.style.color = "red";
                        message.innerHTML = "Username is NOT available";
                    }
                }
            };
            request.send(sendStr);
        }
    }
 
    function ClearMessage() {
        document.getElementById("message").innerHTML = "";
    };
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
 
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
 
 

Server Side WebMethod implementation

The CheckUserName WebMethod will be called from the Client side using jQuery AJAX function.
The WebMethod calls the CheckUserAvailability Stored Procedure and returns the value returned from the Stored Procedure back to the Client.
C#
[WebMethod]
public static bool CheckUserName(string username)
{
    bool status = false;
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("CheckUserAvailability", con))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@UserName", username);
            con.Open();
            status = Convert.ToBoolean(cmd.ExecuteScalar());
            con.Close();
        }
    }
    return status;
}
 
VB.Net
<WebMethod>
Public Shared Function CheckUserName(ByVal username As String) As Boolean
    Dim status As Boolean = False
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("CheckUserAvailability", con)
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@UserName", username)
            con.Open()
            status = Convert.ToBoolean(cmd.ExecuteScalar())
            con.Close()
        End Using
    End Using
    Return status
End Function
 
 

Screenshot

Check whether username already exists
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code