Check Username availability using jQuery AJAX and WebService in ASP.Net

Last Reply 5 months ago By pandeyism

Posted 5 months ago

hi friends , this is my first topic in this forum ....

I have added a HTML page to my web site project. i've put a input tag as 'user name' and a label tag as result . I want to show the situation of availability of this user name for the registering process in the label tag. I searched and found a good code for this purpose.every thing is good with this code but there is one problem. In this code,if the length of entered user name is greater than 3 then the AJAX will run and the situation of availability of this user name will shown in the label tag.the problem is that there is 6 second delay since the start of AJAX to showing the situation in the label.This delay is just for the first running of AJAX and after that everything will be normal. my HTML code :

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById("txtUserName").onkeyup = function () {               
                    var userName = document.getElementById("txtUserName").value
                    if (userName.length >= 3) {
                        jQuery.ajax(
                            {
                                url: 'RegisterationService.asmx/UserNameExists',
                                method: 'post',
                                data: { userName: userName },
                                dataType: 'json',
                                success: function (data) {
                                    var divElement = document.getElementById('label')
                                    if (data.UserNameInUse) {
                                        document.getElementById('label').innerHTML = userName + ' is in Used'
                                        document.getElementById('label').style.color = 'red'
                                        document.getElementById("txtUserName").style.borderColor = "red"
                                    }
                                    else {
                                        document.getElementById('label').innerHTML = userName + ' is available'
                                        document.getElementById('label').style.color = 'green'
                                    }
                                },
                                error: function (err) {
                                    alert(err);
                                }
                            });
                    }
            }            
        });        
    </script>
</head>
<body>
    <input id="txtUserName" style="width:50%" type="text" />
    <br />
    <div style="height:30px; width:50%;">
        <label id="label" ></label>
    </div>
</body>
</html>
You are viewing reply posted by: pandeyism 5 months ago.
Posted 5 months ago

Hi pooya1072,

The speed depends on the query result, network speed, server speed and the processor.

Please refer below sample.

HTML

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById("txtUserName").onkeyup = function () {
                var userName = document.getElementById("txtUserName").value;
                var divElement = document.getElementById('label')
                if (userName.length >= 3) {
                    jQuery.ajax({
                        url: 'RegisterationService.asmx/UserNameExists',
                        type: 'POST',
                        data: "{ userName: '" + userName + "'}",
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.d) {
                                document.getElementById('label').innerHTML = userName + ' is in Used'
                                document.getElementById('label').style.color = 'red'
                                document.getElementById("txtUserName").style.borderColor = "red"
                            }
                            else {
                                document.getElementById('label').innerHTML = userName + ' is available'
                                document.getElementById('label').style.color = 'green'
                            }
                        },
                        error: function (err) {
                            alert(err);
                        }
                    });
                }
                else {
                    document.getElementById('label').innerHTML = ''
                    document.getElementById("txtUserName").style.borderColor = ""
                }
            }
        });       
    </script>
</head>
<body>
    <input id="txtUserName" style="width: 50%" type="text" />
    <br />
    <div style="height: 30px; width: 50%;">
        <label id="label">
        </label>
    </div>
</body>
</html>

Namespaces

C#

using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

VB.Net

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Data

Code (asmx WebService)

C#

[WebMethod]
public bool UserNameExists(string userName)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Name FROM Customers WHERE Name = @Name", con))
        {
            cmd.Parameters.AddWithValue("@Name", userName);
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                da.Fill(dt);

                return dt.Rows.Count > 0 ? true : false;
            }
        }
    }
}

VB.Net

<WebMethod()>
Public Function UserNameExists(ByVal userName As String) As Boolean
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT Name FROM Customers WHERE Name = @Name", con)
            cmd.Parameters.AddWithValue("@Name", userName)
            Using da As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                da.Fill(dt)
                Return If(dt.Rows.Count > 0, True, False)
            End Using
        End Using
    End Using
End Function

Screenshot