Determine Whether a User Name is Available Using jQuery and Ajax

Introduction

Hi friends, I hope everything is well. In this article you can quickly learn how to determine whether or not a username is available without a complete page reload. If you had done the entire process in a Button click event then I think that after waiting a bit of time you will get a result.

Suppose you enter ten User Names in the TextBox then every time you will get a result in about fifteen seconds. A complete process takes one hundred and fifty seconds. If we use it in jQuery and Ajax then we can save one hundred twenty minutes. You think, how is that possible? It is possible, read this article carefully. If you encounter any problem then provide your problem in the comments box, you will get a solution ASAP.

Ajax

AJAX stands for Asynchronous JavaScript and XML.

Ajax is special types of techniques that get data without a complete page reload, only a portion is reloaded, like Facebook, Gmail , YouTube and many other sites.

 

JavaScript

A scripting language is a lightweight programming language. It's called a client-side script. It works only on the client side, in other words it does not execute on the server side. JavaScript code can be inserted into any HTML page, and it can be executed by all web browsers. JavaScript is easy to learn.

 

 

Ok that is the basic concepts of JavaScript and Ajax; if you want more information about the JavaScript and Ajax then check out this link:

w3schools

Source HTML Code:

<form id="form1" runat="server">
User Name :
<asp:TextBox ID="txtUserName" onblur="return checkuser()" runat="server"></asp:TextBox>

</form>
You can see above I take a single textbox and create a Onblur event in the TxtUserName. When the focus out from the textbox Onblur event fire search the Checkuser() function. This function written in JavaScript code like this of
function checkuser() {

JavaScript Code

function checkuser() { //This function call when the user focus out the TextBox.
var uname = $("#<%=txtUserName.UniqueID%>");
if (uname.val().length > 5) { //if the textbox values is less then five error message will User Name is Short try again.
$.ajax({
type: "POST", // Request Type is Post here
url: "Register.aspx/CheckUserName", // In this example most important thing is Testing is Static Method name like this:--- public static string Testing(string testing) and also parameter name is match other wise no error expection fire and
no result accourate.
data: "{'args': '" + uname.val() + "'}", //Send the data in code behind.
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) { //if success then this funcation call other wise some error message fire. code behind method reaten a String type value this value hold is msg.
if (msg.d == 'Available') {
uname.removeClass("notavailablecss");
uname.addClass("availablecss");
// msgbox.html('<img src="Images/a.png"> <font color="Green"> Available </font>');
}
else {
uname.removeClass("availablecss");
uname.addClass("notavailablecss");
// msgbox.html(msg.d);
}
}
});
}
else {
uname.addClass("notavailablecss");
alert(“plz enter the valid username “);
// msgbox.html('<font color="#cc0000">User Name must be more than 5 characters</font>');
}
}
</script>

Code Behind

[System.Web.Services.WebMethod]
public static string CheckUserName(string args) //args hold the user enter value
{
string returnValue = string.Empty;
SqlConnection sqlConn = new SqlConnection("Data Source=.;Initial Catalog=jogi;Integrated Security=True");
try
{
SqlCommand sqlCmd = new SqlCommand("select count(*) from Dep where Name='"+args +"'", sqlConn);
sqlConn.Open();
int success = int.Parse((sqlCmd.ExecuteScalar().ToString()));
if (success == 1) // User Name Not Available
{
returnValue = "<img src='Images/n.png'> <font color='#cc0000'><b>'" + args + "'</b> is already in use.</font></img>";
}
else if (success == 0)//User_Name is available
{
returnValue = "Available";
}}
Catch
{
//Handle Error
}
finally
{
sqlConn.Close();
}
return returnValue;
}

Add jQuery Library reference in HTML page:

<script src="script/jquery-1.4.4.js" type="text/javascript"></script>
<script src="script/jquery-1.4.4.min.js" type="text/javascript"></script>

Note: if you can't add the reference then you can't be successful with your program.

User Name Available

 

 

 

 

User Name Not Available