aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

how to show the progressbar during check the username availability or how to implement username check availabilty like yahoo using ajax

Mar 31, 2011

Here I will explain how to show the progressbar during check the username availability using Ajax or 
how to implement username check availabilty like yahoo using ajax.

In Previous post I explained clearly how to check the username availability using ajax Now I will explain how to show the progressbar during check the username from database just like checking the username in yahoo if you observe yahoo registration page after enter username and click on check button at that time we will see progress image during get the data from database after that result will display now we will implement the same thing in our application.

Now we can see how to show progressbar during check username availability in our application without postback for that First add AjaxControlToolkit reference to your application and add 
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this

<html xmlns="">
<head runat="server">
<title>Check Username availability Using Ajax</title>
<style type="text/css">
.waitingdiv {
background-color: #F5F8FA;
border: 1px solid #5A768E;
color: #333333;
font-size: 93%;
margin-bottom: 1em;
margin-top: 0.2em;
padding: 8px 12px;
width: 8.4em;

<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server">
<script type="text/javascript">
function BeginRequestHandler(sender, args) {
var state = document.getElementById('loadingdiv').style.display;
if (state == 'block') {
document.getElementById('loadingdiv').style.display = 'none';
} else {
document.getElementById('loadingdiv').style.display = 'block';
args.get_postBackElement().disabled = true;

<asp:UpdatePanel ID="PnlUsrDetails" runat="server">
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" ontextchanged="txtUsername_TextChanged"/>
<div id="checkusername" runat="server"  Visible="false">
<asp:Image ID="imgstatus" runat="server" Width="17px" Height="17px"/>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
<div class="waitingdiv" id="loadingdiv" style="display:none; margin-left:5.3em">
<img src="LoadingImage.gif" alt="Loading" />Please wait...

If you observe above code I used
This statement Rose before processing of an asynchronous postback starts and the postback request is sent to the server. 

Check this post here I explained clearly how to use this add_beginRequest handler to handle events during postback how to disable button during postback

Now add using System.Data.SqlClient; reference in codebehind and write the following code to get the username from database

protected void txtUsername_TextChanged(object sender, EventArgs e)
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
SqlCommand cmd = new SqlCommand("select * from UserInformation where UserName=@Name", con);
cmd.Parameters.AddWithValue("@Name", txtUsername.Text);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
checkusername.Visible = true;
imgstatus.ImageUrl = "NotAvailable.jpg";
lblStatus.Text = "UserName Already Taken";
checkusername.Visible = true;
imgstatus.ImageUrl = "Icon_Available.gif";
lblStatus.Text = "UserName Available";
checkusername.Visible = false;


Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

Thank a lot Boss...

Anonymous said...


bosco said...

not working with master page bro,how can i correct this,please give solution bro

RaViNdRa PaRcHa said...

Wat a nice example you have given.. very impressed sir..

Unknown said...

very nice to post

Anonymous said...

Very Nice



Anonymous said...


Unknown said...

please change System.Threading.Thread.Sleep(2000) to System.Threading.Thread.Sleep(1000),Otherwise it is giving error timelimit expired

Anonymous said...

Everything is working fine !!! Just single query - while debugging why is in TextChanged Event twice fired ... and on second time things are getting displayed.

Anonymous said...

What should i say!!!!
you are leader my Boss.
Thanks much Suresh.
Your blog helps those persons who are new for .NET & when they learn something then u can guess their feelings.

Anonymous said...


Anonymous said...

please put the VB CODE of this

Anonymous said...

when you are using javascript code in master page then please wait is not working. please give me solution sir.

Anonymous said...

Please wait is not working...

Anonymous said...


Unknown said...

it is working well.thanks

Anonymous said...

Thanks boss.

Anonymous said...

very nice article and your browsing output also good can u explain how to make this image file

Irtekaz Ahmed Khan said...

Real Post Thanks Sir

Anonymous said...

gr8 post.

Unknown said...

suresh i m getting one problem ,, after submittimg form how can we get that form in disable mode,,
example ibps fee paid form

Tranquil said...

hey actually i want to restrict the user from entering space how is it possible

Anonymous said...

Why it is not working?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.