Post
Ask Question

Programmatically Implement Wait Progress For All Update Panel In Web Page In ASP.NET

I just thought to share my experience with implementing page loading or wait progress in ASP.NET. In ASP.NET we use Update Panel in order to apply Ajax behavior where sometimes we also set several properties in Update Panel and Update Progress control to enable the wait progress feature. Applying for few Update Panels in web pages is not a big problem but when we have several update panels then we need to set same properties many times which is little hard and boring job.

To overcome this issue I was thinking something like doing programmatically irrespective of any number of Update Panels and after spending some time with the code I got one solution which I am sharing here.

  1. First of all we need user controls which will have ASP .Net Update Progress Control.
    1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProUpdateProgress.ascx.cs" Inherits="UpdateProgressCS.Controls.ProUpdateProgress" %>  
    2. <asp:UpdateProgress ID="MasterUpdateProgress" runat="server" DisplayAfter="5" >  
    3.     <ProgressTemplate>  
    4.         <div class="modal1">  
    5.             <div class="center">  
    6.                 <img alt="" src="../Images/loader.gif" />  
    7.             </div>  
    8.         </div>  
    9.     </ProgressTemplate>  
    10. </asp:UpdateProgress>  

  2. And then we will have a base class which will use as parent class for web pages whereever we are required to implement Update Progress feature,
    1. public class BaseForm : System.Web.UI.Page  
    2.     {  
    3.         private List<UpdatePanel> UpdatePanleControl = new List<UpdatePanel>();  
    4.   
    5.         private void GetControl(ControlCollection Controls)  
    6.         {  
    7.             foreach (Control ctrl in Controls)  
    8.             {  
    9.                 if (ctrl is UpdatePanel)  
    10.                 {  
    11.                     UpdatePanleControl.Add((ctrl as UpdatePanel));  
    12.                 }  
    13.                 GetControl(ctrl.Controls);  
    14.             }  
    15.         }  
    16.   
    17.         private void SetUpdateProgress()  
    18.         {  
    19.             GetControl(this.Controls);  
    20.   
    21.             if (UpdatePanleControl != null && UpdatePanleControl.Count > 0)  
    22.             {  
    23.                 foreach (UpdatePanel ctrl in this.UpdatePanleControl)  
    24.                 {  
    25.                     var UpdatePanel = ctrl as UpdatePanel;  
    26.                     var ProUpdateProgress = Page.LoadControl("~/Controls/ProUpdateProgress.ascx");  
    27.                     UpdateProgress MasterUpdateProgress = ProUpdateProgress.FindControl("MasterUpdateProgress") as UpdateProgress;  
    28.                     MasterUpdateProgress.AssociatedUpdatePanelID = UpdatePanel.ID;  
    29.                     MasterUpdateProgress.ID = "MasterUpdateProgress" + UpdatePanel.ID;  
    30.                     MasterUpdateProgress.ClientIDMode = ClientIDMode.Static;  
    31.                     if (this.FindControl("ProUpdateProgress" + UpdatePanel.ID) == null)  
    32.                     {  
    33.                         ProUpdateProgress.ID = "ProUpdateProgress" + UpdatePanel.ID;  
    34.                         ctrl.Parent.Controls.Add(ProUpdateProgress);  
    35.                     }  
    36.                 }  
    37.             }  
    38.         }  
    39.   
    40.   
    41.   
    42.         protected void Page_Init(object sender, EventArgs e)  
    43.         {  
    44.             if (!Page.IsPostBack)  
    45.             {  
    46.                 SetUpdateProgress();  
    47.             }  
    48.         }  
    49.   
    50.     }  
  3. Then we will register user controls in web config file such as,
    1. <configuration>  
    2.   <system.web>  
    3.     <compilation debug="true" targetFramework="4.5" />  
    4.     <httpRuntime targetFramework="4.5" />  
    5.     <pages autoEventWireup="true" enableSessionState="true">  
    6.       <controls>  
    7.         <add tagPrefix="ProUpdateProgress" src="~/Controls/ProUpdateProgress.ascx" tagName="ProUpdateProgress" />  
    8.       </controls>  
    9.     </pages>  
    10.   </system.web>  
    11. </configuration>  

  4. And at last we will inherit base class for every web page such as,
    1. public partial class Index : BaseForm  
    2.     {  
    3.         protected void Page_Load(object sender, EventArgs e)  
    4.         {  
    5.   
    6.         }  
    7.   
    8.         protected void btntest_Click(object sender, EventArgs e)  
    9.         {  
    10.             System.Threading.Thread.Sleep(10000);  
    11.         }  
    12.   }  

TEST

Notes:

  1. Easy to use code in ASP .Net web application.

  2. Scope to modify code to have this as Optional feature where we can set which Update Panel needs to skip from this feature. As we know for File Upload we need full post back where we can arrange some java script code to mimic this feature.

  3. It will apply this feature on all Update Panel on web page.

  4. Adjust CSS as per your need as example code does not have any CSS.


Similar Articles