Wednesday, 30 November 2016

Show Image Loader while processing data in Asp.net C# using Ajax UpdatePanel Animation Extender and JavaScript

<script type="text/javascript">
     function InProgress() {
         var panelProg = $get('divProgress');
         panelProg.style.display = '';

         var lbl = $get('<%# this.lblText.ClientID %>');
         lbl.innerHTML = '';
     }

     function onComplete() {
         var panelProg = $get('divProgress');
         panelProg.style.display = 'none';
     }     
    </script>
    <style type="text/css">
        .popup
        {
            border: 0px solid #6b6a63;
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgba(0, 0, 0, .1);
            z-index: 99999;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .prgimg
        {
 
           top: 0;

            bottom: 0;
            left: 0;
            right: 0;
            margin: 35% 0 0 0%;
            z-index: 9999999999;
        }
    </style>

========================================================================================
 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="full" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <asp:Label ID="lblText" runat="server" />
                <div id="divProgress" style="display:none;" class="popup">
                     <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/images/loader.gif" />                   
                </div>       
        </ContentTemplate>
                <Trigger>
                </Trigger>
    </asp:UpdatePanel>
===========================
 <asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="full" runat="server">
        <Animations>
            <OnUpdating>                     
               <Parallel duration="0">
                    <ScriptAction Script="InProgress();" />
                    <EnableAction AnimationTarget="Button1" Enabled="false" />     
                    <EnableAction AnimationTarget="LinkButton1" Enabled="false" />        
                    <EnableAction AnimationTarget="LinkButton2" Enabled="false" />              
                </Parallel>
            </OnUpdating>
            <OnUpdated>
                <Parallel duration="0">              
                    <ScriptAction Script="onComplete();" />
                    <EnableAction AnimationTarget="Button1" Enabled="true" />
                    <EnableAction AnimationTarget="LinkButton1" Enabled="true" />        
                    <EnableAction AnimationTarget="LinkButton2" Enabled="true" />   
                </Parallel>
            </OnUpdated>
        </Animations>
        </asp:UpdatePanelAnimationExtender>


No comments:

Post a Comment