Friday, February 3, 2012

ASP.NET AJAX UpdateProgress Control

In head Section

<script language="javascript" type="text/javascript">

   var prm = Sys.WebForms.PageRequestManager.getInstance();
   prm.add_initializeRequest(InitializeRequest);
   prm.add_endRequest(EndRequest);
   var postBackElement;
   function InitializeRequest(sender, args)
   {

      if (prm.get_isInAsyncPostBack())
         args.set_cancel(true);
      postBackElement = args.get_postBackElement();
      if (postBackElement.id == 'Button1')
         $get('UpdateProgress1').style.display = 'block';
   }
 
   function EndRequest(sender, args)
   {
       if (postBackElement.id == 'Button1')
          $get('UpdateProgress1').style.display = 'none';
   }

</script>

 In Body Section

<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Width="145px"></asp:Label>
            </ContentTemplate>
         <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
        </Triggers>
        </asp:UpdatePanel>
       <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <script type="text/javascript">document.write("<div class='UpdateProgressBackground'></div>");</script>
                <center><div class="UpdateProgressContent">Loading...</div></center>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <br />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    </form>
</body>
By at
Labels: , , , ,