Total Pageviews

Friday, 25 May 2012

How to show progressing of ASP.NET postback

When the ASP.NET page is posted back or partially posted back, generally there takes time to process the request and render the page again. in that time user may confuse whether the process is executing or not.
In this case we can show an animation of waiting/busy. I want to discuss how to do it.
we can do it using the following ways...

Way 1#
Set ScriptManager Property AsyncPostBackTimeout="0" .zero means infinity.
and use the following scripts


<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%--
Controls & Form's element here 
--%>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="up1" runat="server" AssociatedUpdatePanelID ="UpdatePanel1" >
    <ProgressTemplate>
       <div align="center" style="position:absolute;left:45%;top:45%">
                <img src="Images/please_wait.gif" alt="Please wait...." />
       </div>
    </ProgressTemplate>
</asp:UpdateProgress>

<ajax:UpdatePanelAnimationExtender ID="AnimationExtender1" runat="server" Enabled="True" TargetControlID="UpdatePanel1">
       <Animations>
            <OnUpdating>
             <Parallel duration="0">
                <ScriptAction Script="onUpdating();" />
                 <EnableAction AnimationTarget="ControlIDToDisableDuringUpdating"  Enabled="false"/>
                .......
                .....
             </Parallel>
            </OnUpdating>
            <OnUpdated>
              <Parallel duration="0">
                <ScriptAction Script="onUpdated();" />
                <EnableAction AnimationTarget=" ControlIDToEnableAfterUpdate"  Enabled="true"/>
                 .......
                 .......
              </Parallel>
            </OnUpdated>
        </Animations>
 </ajax:UpdatePanelAnimationExtender>

And in Web.Config file  to add Assembly 

<pages enableSessionState="true" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <controls>
    <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajax" />
      </controls>
</pages>


Way 2#
Set ScriptManager Property AsyncPostBackTimeout="0" .zero means infinity.
and use the following scripts


<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%--
Controls & Form's element here 
--%>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="up1" runat="server" AssociatedUpdatePanelID ="UpdatePanel1" >
    <ProgressTemplate>

 <div id="dlg" style="z-index:999;background-color: Blue;height: 100%;left: 0;opacity: 0.2;position: absolute;top: 0; width: 100%;vertical-align:middle;text-align:center;" align="center">

  <img alt="Please Wait..." src="Images/please_wait.gif" style="z-index:9999;margin:20%"  />

</div>

    </ProgressTemplate>
</asp:UpdateProgress>




Pic:  please_wait.gif

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete