Introduction:
Here I will explain how to show the progressbar during check the username availability using asp.net Ajax.
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
Here I will explain how to show the progressbar during check the username availability 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> |
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
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 Email
|
|||
|
|
18 comments :
Thank a lot Boss...
Awesome
not working with master page bro,how can i correct this,please give solution bro
Wat a nice example you have given.. very impressed sir..
very nice to post
Very Nice
xxasx
good
please change System.Threading.Thread.Sleep(2000) to System.Threading.Thread.Sleep(1000),Otherwise it is giving error timelimit expired
Everything is working fine !!! Just single query - while debugging why is in TextChanged Event twice fired ... and on second time things are getting displayed.
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.
1
please put the asp.net VB CODE of this
when you are using javascript code in master page then please wait is not working. please give me solution sir.
Please wait is not working...
nice
it is working well.thanks
Thanks boss.