title: Why does an UpdatePanel triggering cause all other content to disappear?
body: <p>I'm writing an ASP.Net Web Forms application that has a couple of slow back-end operations, so I'm attempting to use UpdatePanels to perform the operations asynchronously.</p>
  
  <p>I want these operations to be only executable one at a time, and inform other users when someone is performing one of these operations. As a quick and dirty way of doing this, I want to put up a simple modal dialog with a mask behind it, disabling access to the site while an operation is taking place. I do this in the MasterPage shared across all pages of the site.</p>
  
  <p>I stuck the modal in an UpdatePanel, and put a timer on it to check a global variable (from ApplicationState) for current status. If it's executing a task, display the modal, otherwise disable it by setting Visibility = False. I only want that content to update, so I ensure EnablePartialRendering="true" in my ScriptManager and set UpdateModel="Contitional" on the UpdatePanel. I even call .Update() in the Timer's Tick event.</p>
  
  <p>Sounds pretty good to me. To test, I get the modal to turn on and off randomly. So far, the timer works a treat and the modal displays and hides like a champion. Only problem is, after the second time the modal is hidden, EVERYTHING disappears.</p>
  
  <p>So... to being, the modal is hidden, the main page displays fine. Then the timer triggers, the modal is shown, overlaying the main page beautifully. The timer triggers again, and the modal disappears, but so does everything else!</p>
  
  <p>I check the active html source behind by 'inspect element' in Chrome and the content has disappeared!</p>
  
  <p>I'm missing something very obvious here...</p>
  
  <p>This is my code:</p>
  
  <pre><code>    &lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="OPTH.DesktopRollout.Website.SiteMaster" %&gt;
  
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
      &lt;head runat="server"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
          &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;    
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form runat="server"&gt;
              &lt;asp:ScriptManager ID="MainSM" runat='server' EnablePartialRendering="True" /&gt;        
  
              &lt;asp:Timer runat="server" ID="CheckTimer" Interval="500" OnTick="CheckTimer_Tick"&gt;&lt;/asp:Timer&gt;
  
              &lt;asp:UpdatePanel runat="server" ID="ModalUp" UpdateMode="Conditional" RenderMode="Block" &gt;
                  &lt;Triggers&gt;
                      &lt;asp:AsyncPostBackTrigger controlid="CheckTimer" eventname="Tick" /&gt;
                  &lt;/Triggers&gt;
              &lt;ContentTemplate&gt;            
                  &lt;asp:Panel id="modalPnl" runat="server"&gt;
                      &lt;div class="modalPopup"&gt;
                          &lt;div id="modalContent"&gt;Currently performing task: '&lt;asp:Literal runat="server" ID="TaskNameLtr" /&gt;'. Please wait till it has completed before continuing.&lt;/div&gt;                
                      &lt;/div&gt;
                      &lt;div class="modalOverlay" /&gt;    
                  &lt;/asp:Panel&gt;                        
              &lt;/ContentTemplate&gt;
              &lt;/asp:UpdatePanel&gt;
  
      //... other content is here... just static html and a ContentPlaceHolder for basepage.
  </code></pre>
  
  <p>Backend code:</p>
  
  <pre><code>    protected void CheckTimer_Tick(object sender, EventArgs e)
      {
  
          modalPnl.Visible = IsExecutingTask; //Returns a random true or false based on time.
          TaskNameLtr.Text = DateTime.Now.ToShortDateTimeString();
          ModalUp.Update();
      }
  </code></pre>
  
  <p>Senseis! What is this young grasshopper doing wrong?</p>
  
  <p>I don't think this has anything to do with it, but my CSS:</p>
  
  <pre><code>    .modalOverlay
      {
          position: fixed;
          width: 100%;
          height: 100%;    
          background-color: black;
          z-index: 1;
  
          filter: alpha(opacity=50); /* internet explorer */
          -khtml-opacity: 0.5;      /* khtml, old safari */
          -moz-opacity: 0.5;       /* mozilla, netscape */
          opacity: 0.5;           /* fx, safari, opera */     
      }
  
      .modalPopup 
      {
          position: fixed;
          margin-left: -225px;    
          top: 40%;
          left: 50%;
          width: 450px;
          height:100px;
          background-color: white;
          border: black solid 3px;
          z-index: 2;
  
          filter: alpha(opacity=100); /* internet explorer */
          -khtml-opacity: 1;      /* khtml, old safari */
          -moz-opacity: 1;       /* mozilla, netscape */
          opacity: 1;           /* fx, safari, opera */
      }
  
      .modalPopup #modalContent 
      {
          margin: 15px 30px;    
      }
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>UPDATE: I just moved all the AJAX code from the MasterPage to Default.aspx. Now on the async postback the content from Masterpage stays, but the content from Default.aspx disappears.</p>