Here I will explain how to show update progressbar during postbacks in asp.net
Description
In many websites we will see loading images during process of their websites how we can implement that for our website.
In Ajax we have a control called UpdateProgress control by using this control we can implement progressbar during postsbacks in asp.net.
Here we need to observe one point that is how we can findout postbacks and raise that progrssbar during postback operation in asp.net. Here we have chance to get postsbacks by using these statements
Sys.WebForms.PageRequestManager.getInstance(); Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); |
Here I will explain what the each statement is
Sys.WebForms.PageRequestManager.getInstance();
This Statement Manages partial-page updates of server updatepanel controls in the browser, and defines properties, events, and methods that can be used to customize a Web page by using client script.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
This statement Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
This Raised after an asynchronous postback is finished and control has been returned to the browser.
After that design your aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .modalPopup { background-color: #696969; filter: alpha(opacity=40); opacity: 0.7; xindex:-1; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"/> <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); //Raised before processing of an asynchronous postback starts and the postback request is sent to the server. prm.add_beginRequest(BeginRequestHandler); // Raised after an asynchronous postback is finished and control has been returned to the browser. prm.add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args) { //Shows the modal popup - the update progress var popup = $find('<%= modalPopup.ClientID %>'); if (popup != null) { popup.show(); } } function EndRequestHandler(sender, args) { //Hide the modal popup - the update progress var popup = $find('<%= modalPopup.ClientID %>'); if (popup != null) { popup.hide(); } } </script> <div> <asp:UpdateProgress ID="UpdateProgress" runat="server"> <ProgressTemplate> <asp:Image ID="Image1" ImageUrl="waiting.gif" AlternateText="Processing" runat="server" /> </ProgressTemplate> </asp:UpdateProgress> <ajaxToolkit:ModalPopupExtender ID="modalPopup" runat="server" TargetControlID="UpdateProgress" PopupControlID="UpdateProgress" BackgroundCssClass="modalPopup" /> <asp:UpdatePanel ID="pnlData" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click"/> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html> |
In code behind button click write like this
protected void btnSubmit_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); } |
Here in button click why I have used sleep statement means presently I am not doing any operations that’s why in button click I have used sleep statement to progressbar. In my demo I have implemented for user registration without this sleep statement it will raise whenever user submit his details and it will raise for each postback operation
Demo
 |
DownLoad Attached Sample here
|
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
|
|||
39 comments :
thanks thats great article and code
www.medhairklinik.com
thats really great
www.tabiret.com
i like it
www.direkhaber.com
Suresh, this code need to be inside a form?
Thanks.
Suresh, I try to do what you did here, but I have had a problem, after the image of loading my message on textbox not appear. It should show the message after I click on the button. Do you know what could be?
Thanks,
Deborah.
its really vry nice...thnks for ths great docs.mostly for ajax controls i always refer your links
How to get the page instance inside a Web Part?
hello,
thank you so much for this help,
and one more help need, how to use the web cam in asp.net
good example with detail. keep it up.
dis works fine... but, when i implement dis on dropdown..and my masterpage which contain ajax timer... then loading screen pop-up every second...
this happens due to ajax timer??
can u solve dis?
Nice Example but these examples are unable to download and not in an structural way of representation.
because most of the companies are using many structures of format of developing a code, which isn't taught in this..so..please upload in that activity then it might be good & helpful to everyone
Nice work keep it up..
Thanks!!! it works! especialy the source code if it wasnt for it, i still wouldnt be ble to make it work! thanks!
thanks thats great article and code really
it is very helpful for fresher
hi suresh, this is really helpful. one question, how can we have the same on initial page load. Meaning I have a grid with huge data that gets loaded when I login into the application.
Thankyou!! Very helpful
Thanks for Your code. But your code is not working for gridview linkbutton actually i have gridview, in which client can download file by clicking link button. Your code is working fine for all remaining buttons in page except link button. can u tell me how to solve this.
how to hide progress bar on cancle button
Dear Suresh
Thanks for your wonderful post I always come to your blog when I am in trouble.
Kindly update me where can I download the code for the registration page that you are showing as the demo that I downloaded is without registration page code.
Thanks
Really very help full to read all the articles.. but i am not able to get the output in vs 2012.. is there any other work do i need to do for getting OP?
where is the progress bar???
- aakash
thanks brother, it's help me
great tutorial suresh...keep it up
But the code is not working in the published copy....
Nice Article, we can also show the progress bar using ajax. and I think your page will be much lighter than using server controls.. Here's one example
is it possible without ajax...since i am working in visual studio 2005.. please suggest
Thanks for your post. It really works
Using this the image is always shown in the top left corner. What to do?
Hi suresh sir
i am not getting the image (gif)
wat is the problem
I didn't get the output.
coding is as it shown in above program.
Is there any way to what is the problem why proper output didn't came????
Excellent. Super. Thanks
Excellent.. and very helpful..
Thank you..
100 likes...........................
nice but problem is that progress bar not working on first postback then working properly why?????
I love how your layout works on my vertical monitor.
All the code fits in my 80 column area.
And all the annoying adds are conveniently off-screen.
-John Mark
button not getting disabled
Thanks a lot. It just solved my night mare!!
Note: Only a member of this blog may post a comment.