Hi rajeshR2,
I have created sample code which full-fill your requirement.
HTML
<div>
<asp:TextBox ID="txtUserId" Height="30px" runat="server" />
<img src="loader.gif" id="loader" style="display: none" height="34px" alt="" />
<asp:Label ID="lblStatus" runat="server" />
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[Id*=txtUserName]').keyup(function (event) {
if ($(this).val() != "") {
$('[Id*=loader]').show();
SetData();
if (event.which === 13) {
$('[Id*=loader]').hide();
}
}
else {
$('[Id*=loader]').hide();
$('[Id*=lblStatus]').text('');
}
});
$('[Id*=txtUserId]').blur(function () {
$('[Id*=loader]').hide();
});
});
function SetData() {
var obj = {};
obj.name = $.trim($("[id*=txtUserName]").val());
$.ajax({
type: "POST",
url: "ValidateUser.asmx/ValidateUsers",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
if (r.d != '') {
$('[Id*=lblStatus]').text('Not Available...');
$('[Id*=lblStatus]').css("color", "red");
}
else {
$('[Id*=lblStatus]').text('Available');
$('[Id*=lblStatus]').css("color", "green");
}
}
});
}
</script>
</div>
WebService.asmx
[WebMethod]
public Boolean ValidateUsers(string name)
{
Boolean result = false;
string query = "SELECT CustomerId, Name FROM Customers WHERE Name='" + name + "'";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
SqlDataReader idr = cmd.ExecuteReader();
if (idr.HasRows)
{
result = true;
}
con.Close();
return result;
}
}
}