title: Show a Loading Message using master pages while page loads data asp.net
body: <p>I have spent hours Googling and searching past questions but have struggled to get anywhere with those answers (be it I can't get it into my solution correctly or it isn't suitable for me as they don't have master pages).</p>
  
  <p>My question is, I have a couple of asp.net pages which can take a while to load (sometimes 5 seconds+) as there is a lot of data being requested from a database on the Page_Load method. To stop users from thinking that the page has crashed and either refreshing the page or doing something else, I want to put up a Loading message hiding everything else on the page (apart from the menu) while it loads.</p>
  
  <p>I am using ASP.Net 4.0 with master pages and coding in C#.</p>
  
  <p>The one where I get the most success is using the UpdatePanel on my master page where the content template covers the contentplaceholder, however I know this is not the best way to go about it and anyway it only shows up once, i.e. The user logs in, the loading message appears and once all the data has loaded on the home page (dashboard.aspx) the loading message disappears, which is kind of what I want. However if the user goes away from that page and then clicks home the loading message never appears again, just takes a while to load. It also never appears for any other page that takes a noticeable time to load.</p>
  
  <p>Below is the body of the master.aspx</p>
  
  <pre><code>&lt;body&gt;
  &lt;form runat="server"&gt;
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
  &lt;/asp:ScriptManager&gt;
  
  &lt;div class="page"&gt;
      &lt;div class="header"&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;
                  Header
              &lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="loginDisplay"&gt;
              &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                  &lt;AnonymousTemplate&gt;
                      [ &lt;a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt;
                      ]
                  &lt;/AnonymousTemplate&gt;
                  &lt;LoggedInTemplate&gt;
                      Welcome &lt;span class="bold"&gt;
                          &lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;
                      &lt;/span&gt;! [
                      &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                          LogoutPageUrl="~/Default.aspx" /&gt;
                      ]
                  &lt;/LoggedInTemplate&gt;
              &lt;/asp:LoginView&gt;
          &lt;/div&gt;
          &lt;div class="clear hideSkiplink"&gt;
              &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                  IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick"&gt;
                  &lt;Items&gt;
                      &lt;asp:MenuItem Text="Home" /&gt;
                      &lt;asp:MenuItem Text="About" /&gt;
                  &lt;/Items&gt;
              &lt;/asp:Menu&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
  
           &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:ContentPlaceHolder ID="MainContent" runat="server" /&gt;
  
                  &lt;asp:UpdateProgress ID="UpdateProgress1" runat="server"&gt;
                      &lt;ProgressTemplate&gt;
                          &lt;asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center"&gt;
                              &lt;asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" /&gt;
                          &lt;/asp:Panel&gt;
  
                      &lt;/ProgressTemplate&gt;
                  &lt;/asp:UpdateProgress&gt;
              &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt;
  
  
           &lt;asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender" 
               runat="server" Enabled="True" TargetControlID="UpdatePanel1"&gt;
           &lt;/asp:UpdatePanelAnimationExtender&gt;
  
  
      &lt;/div&gt;
      &lt;div class="clear"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And below is the page for the dashboard.aspx (a page which has a long loading time)</p>
  
  <pre><code>&lt;asp:Panel ID="PanelWelcome" runat="server"&gt;
      &lt;h1&gt;
          Welcome
          &lt;asp:Label ID="LabelUserName" runat="server" Text="[User Name]" /&gt;&amp;nbsp;to your
          personal Dashboard.&lt;/h1&gt;
      &lt;table width="100%" cellpadding="5px"&gt;
          &lt;tr&gt;
              &lt;td style="width: 70%" valign="top"&gt;
                  &lt;asp:Panel ID="Panel2" runat="server"&gt;
                      &lt;p&gt;
                          &amp;nbsp;&lt;/p&gt;
                      &lt;h4&gt;
                          Up and Coming &lt;/h4&gt;
                      &lt;br /&gt;
                      &lt;asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left"
                          OnRowDataBound="GridViewItin_RowDataBound"&gt;
                      &lt;/asp:GridView&gt;
                  &lt;/asp:Panel&gt;
              &lt;/td&gt;
              &lt;td style="width: 30%"&gt;
                  &lt;asp:Panel ID="PanelProfile" runat="server"&gt;
                      &lt;asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg"
                          Width="150px" /&gt;&lt;br /&gt;
                      &lt;h4&gt;
                          Name:&lt;/h4&gt;
                      &lt;asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"&gt;&lt;/asp:Label&gt;
                      &lt;h4&gt;
                          Company:&lt;/h4&gt;
                      &lt;asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"&gt;&lt;/asp:Label&gt;
                      &lt;h4&gt;
                          Date of Birth:&lt;/h4&gt;
                      &lt;asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"&gt;&lt;/asp:Label&gt;&lt;br /&gt;
                      &lt;asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click"&gt;More details...&lt;/asp:LinkButton&gt;
                  &lt;/asp:Panel&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>Could you please show me the best way to go about it and where I am going wrong? Also how I can hide the ContentTemplate when the UpdateProgress template is showing that would be great?</p>
  
  <p>Thanks.</p>