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