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 postbacks in asp.net

Oct 31, 2010
Introduction

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 RSS subscribe by email Subscribe by Email

39 comments :

saç ekimi said...

thanks thats great article and code
www.medhairklinik.com

rüya tabiri said...

thats really great
www.tabiret.com

haber said...

i like it
www.direkhaber.com

Anonymous said...

Suresh, this code need to be inside a form?

Thanks.

Anonymous said...

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.

pallavi said...

its really vry nice...thnks for ths great docs.mostly for ajax controls i always refer your links

Anonymous said...

How to get the page instance inside a Web Part?

Unknown said...

hello,
thank you so much for this help,
and one more help need, how to use the web cam in asp.net

Anonymous said...

good example with detail. keep it up.

PrateekNaPster said...

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?

Anonymous said...

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

SAGAR PRAKASH said...

Nice work keep it up..

Anonymous said...

Thanks!!! it works! especialy the source code if it wasnt for it, i still wouldnt be ble to make it work! thanks!

Anonymous said...

thanks thats great article and code really

Anonymous said...

it is very helpful for fresher

Anonymous said...

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.

Anonymous said...

Thankyou!! Very helpful

Anonymous said...

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.

Anonymous said...

how to hide progress bar on cancle button

Unknown said...

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

DEBASIS JENA said...

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?

Anonymous said...

where is the progress bar???

- aakash

master said...

thanks brother, it's help me

Anonymous said...

great tutorial suresh...keep it up

ravi said...

But the code is not working in the published copy....

Unknown said...

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

Anonymous said...

is it possible without ajax...since i am working in visual studio 2005.. please suggest

Anonymous said...

Thanks for your post. It really works

Unknown said...

Using this the image is always shown in the top left corner. What to do?

Anonymous said...

Hi suresh sir
i am not getting the image (gif)
wat is the problem

Anonymous said...

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

Anonymous said...

Excellent. Super. Thanks

Unknown said...

Excellent.. and very helpful..
Thank you..

Anonymous said...

100 likes...........................

Unknown said...

nice but problem is that progress bar not working on first postback then working properly why?????

John said...

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

Unknown said...

button not getting disabled

Vasanth said...

Thanks a lot. It just solved my night mare!!

Unknown said...
This comment has been removed by the author.

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.