Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 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 asp.net ajax

Mar 31, 2011
Introduction:

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

Description:
In Previous post I explained clearly how to check the username availability using asp.net 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="http://www.w3.org/1999/xhtml">
<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;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
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;
}
</script>
<div>

<asp:UpdatePanel ID="PnlUsrDetails" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
UserName:
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" ontextchanged="txtUsername_TextChanged"/>
</td>
<td>
<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>
</td>
</tr>
</table>
<div class="waitingdiv" id="loadingdiv" style="display:none; margin-left:5.3em">
<img src="LoadingImage.gif" alt="Loading" />Please wait...
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

If you observe above code I used
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
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)
{
if(!string.IsNullOrEmpty(txtUsername.Text))
{
SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
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";
System.Threading.Thread.Sleep(2000);
}
else
{
checkusername.Visible = true;
imgstatus.ImageUrl = "Icon_Available.gif";
lblStatus.Text = "UserName Available";
System.Threading.Thread.Sleep(2000);
}
}
else
{
checkusername.Visible = false;
}
}


Demo


Download sample code attached


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

Get the latest Asp.net, C#.net, 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

24 comments :

Anonymous said...

Thank a lot Boss...

Anonymous said...

Awesome

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

VICKY VERMA said...

xxasx

Anonymous said...

good

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...

1

Anonymous said...

please put the asp.net 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...

nice

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 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.