CSS style as ASP.NET AJAX progress indicator

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="Container" class="Normal">
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:Label ID="Label1" runat="server" Text="Update Me" />
      <asp:Button ID="Button1" runat="server" 
        OnClick="Button1_Click" Text="Button" />
    </ContentTemplate>
  </asp:UpdatePanel>
</div>


protected void Button1_Click(object sender, EventArgs e)
{
  Thread.Sleep(5000);
 
  Label1.Text = DateTime.Now.ToString();
}

I’ll style the container div with CSS to add a simple border and set up a class for the progress state: .Normal { border: dashed 1px #000000; background-color: #FFFFFF; cursor: auto; padding: 10px; width: 200px; text-align: center; } .Progress { border: dashed 1px #000000; background-color: #EEEEEE; background-image: url(spinner.gif); background-position: center center; background-repeat: no-repeat; cursor: wait; padding: 10px; width: 200px; text-align: center; }
Finally, hook up our event handlers for BeginRequest and EndRequest:

<script language="javascript">
  // Get a reference to the PageRequestManager.
  var prm = Sys.WebForms.PageRequestManager.getInstance();
 
  // Using that prm reference, hook _initializeRequest
  // and _endRequest, to run our code at the begin and end
  // of any async postbacks that occur.
  prm.add_initializeRequest(InitializeRequest);
  prm.add_endRequest(EndRequest);
 
  // Executed anytime an async postback occurs.
  function InitializeRequest(sender, args) 
  {
    // Change the Container div's CSS class to .Progress.
    $get('Container').className = 'Progress';
 
    // Get a reference to the element that raised the postback,
    //   and disables it.
    $get(args._postBackElement.id).disabled = true;
  }
 
  // Executed when the async postback completes.
  function EndRequest(sender, args) 
  {
    // Change the Container div's class back to .Normal.
    $get('Container').className = 'Normal';
 
    // Get a reference to the element that raised the postback
    //   which is completing, and enable it.
    $get(sender._postBackSettings.sourceElement.id).disabled = false;
  }
</script>
Reactions

Post a Comment

0 Comments

Close Menu