Showing update progress with file upload control in asp.net

Most of us use file upload control in our applications. The problem with the file upload control is you cannot use it inside update panel. And as a consequence you cannot show update progress while the file is being uploaded. Below is the workaround solution for this problem.

1) Add a Scriptmanager and a timer to the page.

2) Set the Enabled flag of the timer to FALSE.

3) In the Page_Init event of the page, add a isCalled key with value as "yes" to the ViewState like this
    ViewState["isCalled"] = "Yes";

4) On the click event of the Upload button (or the button which will start the upload of your file), do these steps
 (i) Set the viewState isCalled Value as "no":

     ViewState["isCalled"] = "No";


 (ii) Make your Waiting panel/image visible.Make sure the panel is inside an update panel :

       this.pnlWait.Visible = true;

 (iii) Enable your timer.

            Timer1.Enabled = true;

5) Now your timer is enabled and it will start ticking. So create the timer_tick event for your timer and write the following code in it.

   Timer1.Enabled = false;// disable the timer so that it is not called again 
    if (ViewState["isCalled"].ToString() == "No")
   {
     this.pnlWait.Visible = false; // hide your loading panel
      ViewState["isCalled"] = "Yes";      
     StartUpload(); //start your upload process

     }


And you are done. Let me know if you find any issues in it

Display update progress on whole page as modal popup

If you have a page where you want to disable all the control while some server side processing is going on, you might want to display the update progress for an updatepanel as a modal popup. You can do that by adding the below code in your update progress.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel1"DisplayAfter="0">
<ProgressTemplate>
<div style="background-color: Gray; filter: alpha(opacity=60); opacity: 0.60; width: 100%;top: 0px; left: 0px; position: fixed; height: 100%;">
</div>
<div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100);opacity: 1; font-size: small; vertical-align: middle; top: 45%; position: fixed;right: 45%; color: #275721; text-align: center; background-color: White; height: 100px;">
<table style="background-color: White; font-family: Sans-Serif; text-align: center;border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style="text-align: inherit;">
   <img src="../../Images/loading.gif" alt="Loading" />
</td>
<td style="text-align: inherit;">
  <span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">
    Please Wait...</span>
 </td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

Showing update progress over modal popup

If you have an update progress that covers your entire page(If you want one, let me know). And you have a modal popup panel that has controls that causes post back, like a button or a drop down. You might end up in a situation where your update progress appears behind the modal pop up panel. To get out of this situation, you  just need a few changes.

1. Set the style, z-index = 1 for the modal pop up panel.
2. Set the style, z-index = 99999 for the update progress.

You are all done. Go ahead and try it out. 

DefaultButton Property of a Panel in Asp.net

Ever wondered whats the DefaultButton property for a Panel. It was of no use untill I started using the modal popup extender. Well the basic use of this property is to assign the Ok button for a panel. So when you hit the enter key while you are working inside this panel, it fires button click event for the button specified in the default button property.

If you are working on a screen with multiple modal popups and multiple buttons,you might the face the issue of opening multiple modal popups on the hitting the Enter key. To avoid this, just set the default panel property of each of your modal popup panels and you will be just fine.