• (2 Pages)
  • +
  • 1
  • 2

ASP.Net - AJAX with Continuous Progress Bar

#1 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 07 August 2009 - 11:31 AM

I was recently asked about getting a Progress Bar to work in ASP.Net. It didn't need to be a progress bar that had a percentage, just something that would alert a user that something is happening behind the scenes.

So I did some Google searching, and found tons of resources where people had created their own Progress Bar controls. While that was all fine and good, I wasn't looking to download somebody else's custom control, and I wasn't going to make my own. So I wanted to figure out how I could use existing ASP.Net and AJAX controls to accomplish this task.

It turned out to be easier than I thought it would be.

I knew that I needed the progress bar to show modally, so that the user would not be able to interact with the form during the postback. So I decided to use the ModalPopupExtender AJAX control.

So first, I have my Button, the ModalPopupExtender, the Panel that the extender will display, the Script Manager, and a hidden control.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div>
            <asp:Button ID="btnSubmit" onclick="btnSubmit_Click" OnClientClick="StartProgressBar()"
                     runat="server" Text="Submit Time" Width="170px" />

            <ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                     BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
                     TargetControlID="hiddenField" PopupControlID="Panel1" />

            <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
                 <img src="progressbar.gif" alt="" />
            </asp:Panel>

            <asp:HiddenField ID="hiddenField" runat="server" />
       </div>
   </ContentTemplate>
</asp:UpdatePanel>



If you notice, the TargetControlID attribute of the extender is NOT the button. The reason for this is that the default functionality of the ModalPopupExtender is to require a button click from the Panel to close it. Since I want the Panel to stay visible while the server does it's processing, I set the TargetControlID to the hidden control.

Another thing to notice is the BackgroundCssClass attribute of the ModalPopupExtender. This is REQUIRED for the extender to actual be modal. Without it, the extender is a non-modal popup.(more on this later)

Also notice that the Button has both of the click events populated. The onclick event will be the server-side event handler.

protected void btnSubmit_Click(object sender, EventArgs e)
{
     Thread.Sleep(7000);
     ProgressBarModalPopupExtender.Hide();
}



This event simply pauses server processing for 7 seconds to simulate a long running process.

The OnClientClick event will be calling a javascript function...

<script language="javascript" type="text/javascript">
	function StartProgressBar() {
		var myExtender = $find('ProgressBarModalPopupExtender');
		myExtender.show();
		return true;
	}
</script>



And last, the CSS entry for the background of the ModalPopupExtender.

If you do not already have a CSS class added to your project, you will need to add one, and link it to the page in the HEAD tag.

<link href="main.css" rel="stylesheet" type="text/css" />



Then add this entry to the CSS file.

.ModalBackground
{
	background-color:Gray;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}



If using Visual Studio 2008, you will get warnings saying that "filter" and "opacity" are not known CSS properties. This is an issue with Visual Studio. They are valid properties and they do work. The 4 properties that are listed in the CSS entry should handle the opacity for all major browsers. I have tested with IE7, Firefox 3.5, and Chrome.

And that is all you have to do. The ModalPopupExtender will show when the button is clicked, and the server will start processing the code. When the server has completed and sends the response back to the browser, it will hide the ModalPopupExtender.

Is This A Good Question/Topic? 2
  • +

Replies To: ASP.Net - AJAX with Continuous Progress Bar

#2 EvLSnoopY  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 93
  • Joined: 24-November 09

Posted 27 May 2010 - 05:50 PM

This is a nice tutorial. For anyone looking for quick loading bar .gif's I found this site through a Google search.
Thanks for the tutorial eclipsed4utoo.
Was This Post Helpful? 0
  • +
  • -

#3 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 17 June 2010 - 04:59 AM

View PostEvLSnoopY, on 27 May 2010 - 07:50 PM, said:

This is a nice tutorial. For anyone looking for quick loading bar .gif's I found this site through a Google search.
Thanks for the tutorial eclipsed4utoo.


Thanks. I actually use that site to get loading GIFs.
Was This Post Helpful? 0
  • +
  • -

#4 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Posted 22 June 2010 - 09:12 PM

Nice post :)
This is a common question

-Frinny

This post has been edited by Frinavale: 22 June 2010 - 10:15 PM

Was This Post Helpful? 0
  • +
  • -

#5 Guest_pr0ggylicious*


Reputation:

Posted 16 July 2010 - 10:32 AM

What do we need to do with the filter and opacity?
Was This Post Helpful? 0

#6 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 02 August 2010 - 01:45 PM

View Postpr0ggylicious, on 16 July 2010 - 01:32 PM, said:

What do we need to do with the filter and opacity?


nothing. I will assume you are referring to the errors that VS gives? If so, you don't have to do anything. The project will still build and will work correctly. VS just doesn't know what those properties are.
Was This Post Helpful? 0
  • +
  • -

#7 Guest_Amit Kumar*


Reputation:

Posted 26 October 2010 - 01:19 AM

View Posteclipsed4utoo, on 02 August 2010 - 12:45 PM, said:

View Postpr0ggylicious, on 16 July 2010 - 01:32 PM, said:

What do we need to do with the filter and opacity?


nothing. I will assume you are referring to the errors that VS gives? If so, you don't have to do anything. The project will still build and will work correctly. VS just doesn't know what those properties are.



This tutorial is not working in IE8, please let me know, how can we make it working in IE8. It display only image not animated.
but it is working in rest browser
Was This Post Helpful? 0

#8 Guest_Amit Kumar*


Reputation:

Posted 01 November 2010 - 10:16 PM

Hi, Your code is so good, I used it in my code , it is working but I have some issue. In my case I am using multiple file upload control for uploading more than one image.
I wants when Progress bar is going on then the corresponding file namewill be display on the pop up and the count of file like 0 of 4.

I am not getting run time file name. I used hidden field of it and assign value at server type. But according to your code it will first call java script function then server side function because it has no value at first time that it will not display the file name but second time it will display the previous file name.


Please help me, its very urgent............

I am attaching a image file of progress bar. I wants to make same look and feel.

Thanks In Advance!!!!!!!!!!!!

View Posteclipsed4utoo, on 07 August 2009 - 10:31 AM, said:

I was recently asked about getting a Progress Bar to work in ASP.Net. It didn't need to be a progress bar that had a percentage, just something that would alert a user that something is happening behind the scenes.

So I did some Google searching, and found tons of resources where people had created their own Progress Bar controls. While that was all fine and good, I wasn't looking to download somebody else's custom control, and I wasn't going to make my own. So I wanted to figure out how I could use existing ASP.Net and AJAX controls to accomplish this task.

It turned out to be easier than I thought it would be.

I knew that I needed the progress bar to show modally, so that the user would not be able to interact with the form during the postback. So I decided to use the ModalPopupExtender AJAX control.

So first, I have my Button, the ModalPopupExtender, the Panel that the extender will display, the Script Manager, and a hidden control.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div>
            <asp:Button ID="btnSubmit" onclick="btnSubmit_Click" OnClientClick="StartProgressBar()"
                     runat="server" Text="Submit Time" Width="170px" />

            <ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                     BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
                     TargetControlID="hiddenField" PopupControlID="Panel1" />

            <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
                 <img src="progressbar.gif" alt="" />
            </asp:Panel>

            <asp:HiddenField ID="hiddenField" runat="server" />
       </div>
   </ContentTemplate>
</asp:UpdatePanel>



If you notice, the TargetControlID attribute of the extender is NOT the button. The reason for this is that the default functionality of the ModalPopupExtender is to require a button click from the Panel to close it. Since I want the Panel to stay visible while the server does it's processing, I set the TargetControlID to the hidden control.

Another thing to notice is the BackgroundCssClass attribute of the ModalPopupExtender. This is REQUIRED for the extender to actual be modal. Without it, the extender is a non-modal popup.(more on this later)

Also notice that the Button has both of the click events populated. The onclick event will be the server-side event handler.

protected void btnSubmit_Click(object sender, EventArgs e)
{
     Thread.Sleep(7000);
     ProgressBarModalPopupExtender.Hide();
}



This event simply pauses server processing for 7 seconds to simulate a long running process.

The OnClientClick event will be calling a javascript function...

<script language="javascript" type="text/javascript">
	function StartProgressBar() {
		var myExtender = $find('ProgressBarModalPopupExtender');
		myExtender.show();
		return true;
	}
</script>



And last, the CSS entry for the background of the ModalPopupExtender.

If you do not already have a CSS class added to your project, you will need to add one, and link it to the page in the HEAD tag.

<link href="main.css" rel="stylesheet" type="text/css" />



Then add this entry to the CSS file.

.ModalBackground
{
	background-color:Gray;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}



If using Visual Studio 2008, you will get warnings saying that "filter" and "opacity" are not known CSS properties. This is an issue with Visual Studio. They are valid properties and they do work. The 4 properties that are listed in the CSS entry should handle the opacity for all major browsers. I have tested with IE7, Firefox 3.5, and Chrome.

And that is all you have to do. The ModalPopupExtender will show when the button is clicked, and the server will start processing the code. When the server has completed and sends the response back to the browser, it will hide the ModalPopupExtender.

Attached image(s)

  • Attached Image

Was This Post Helpful? 1

#9 tkksnow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 26-April 11

Posted 26 April 2011 - 03:38 PM

Very helpful.
Was This Post Helpful? 0
  • +
  • -

#10 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Posted 27 April 2011 - 03:05 PM

You might could also use the UpdateProgress control to display a template while an ajax event is processing.

<asp:UpdateProgress runat="server" ID="UpdateProgress1">
    <ProgressTemplate>
        <div style='position: absolute; background-color: Gray; width: 100%; height: 100%; filter: alpha(opacity=50); top: 0; left: 0;'>
        </div>
        <div style='position: absolute; width:50%; height: 30%; background-color: white; top: 30%; left: 25%;'>
            <p style='margin: 0 auto; text-align: center;'>Page is loading...(an image could be placed here instead)</p>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>



Now I put no effort into making this look decent and I just did a Thread.Sleep on the server side to mimic something actually going on, but the basic result is something like this

Spoiler

Was This Post Helpful? 0
  • +
  • -

#11 shwetamber  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-July 11

Posted 27 July 2011 - 10:28 PM

Hi,

I have try your article on downloading. When i click on download button then progress image is displaying but it will not gone when downloading is complete. I have test when i remove the UpdatePanel. If i put the Update Panel then Downloading is not working. Does i need to put something in script manager tag? Can you help me about the issue. I need to stop progress when downloading is complete.

Thanks & Regards
Shwetamber
Was This Post Helpful? 0
  • +
  • -

#12 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 28 July 2011 - 05:58 AM

Post your code.
Was This Post Helpful? 0
  • +
  • -

#13 karzelsoze  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 26-August 11

Posted 26 August 2011 - 11:34 PM

First of all , this topic is very helpful for who searching progress bar at the web forms.


I add this code my application and everything is ok . But i didn't add progressbar.gif to my site ,because of request from

client side when user download any zip or etc files from server, progress bar will showned and it is continue at the

same time zip file download progress bar will show to how much downloaded from selected file.This mean ,I need to

showing percent progress bar..how can add my webform.

Im using vs2010 , c#,asp.net4


cheers.
Was This Post Helpful? 0
  • +
  • -

#14 vesuvious  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-November 11

Posted 22 November 2011 - 10:44 AM

Is there a way to add this control to a DropDownList SelectedIndexChanged event?
Was This Post Helpful? 0
  • +
  • -

#15 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1526
  • View blog
  • Posts: 5,961
  • Joined: 21-March 08

Posted 22 November 2011 - 12:22 PM

This should work...

DropDownList1.Attributes.Add("onchange", "return StartProgressBar();") 



That would go in the code-behind in the Page_Load method.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2