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
Set ScriptManager Property AsyncPostBackTimeout="0" .zero means infinity.
and use the following scripts
Pic: please_wait.gif
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#
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
This comment has been removed by a blog administrator.
ReplyDelete