Introduction :- The UpdatePanelAnimatonExtender Control enables you to display animation while the UpdatePanel control is performing an asynchronous postback. This extender applies animation to a very specific situation, where custom events need handling before and after and updatable region is refreshed and therefore, can be used only when the web page consists of n UpdatePanel control. If you have not installed AjaxToolkit on your visual studio, you can install it from from Here.
There are some important properties of UpdatePanelAnimatonExtender Control as given below:-
Step 1 :- First open your visual studio --> File --> New -->Website --> Select ASP.NET Empty website ---> OK ---> Open Solution Explorer --> Add a New Web Form (Default.aspx) --> Drag and Drop ToolkitScriptManager ,UpdatePael Controls --> Inside Update panel control drag and drop Image and Button Controls On the page as shown below:-
Step 2:- Now Open Source File --> Drag and Drop UpdatePanelAnimationExtender control as shown below:-
Step 3:- Now You see whole codes of this application as given below:-There are some important properties of UpdatePanelAnimatonExtender Control as given below:-
- TargetControlID :-It sets the ID of the control whose updates results in animation effects.
- OnUpdating :-It sets an event to play animation when the update is in progress.
- OnUpdated:- It sets an event to play the animation when the update is complete.The animation plays if and only if there is some change in the UpdatePanel control after the update.
Step 1 :- First open your visual studio --> File --> New -->Website --> Select ASP.NET Empty website ---> OK ---> Open Solution Explorer --> Add a New Web Form (Default.aspx) --> Drag and Drop ToolkitScriptManager ,UpdatePael Controls --> Inside Update panel control drag and drop Image and Button Controls On the page as shown below:-
Step 2:- Now Open Source File --> Drag and Drop UpdatePanelAnimationExtender control as shown below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
Label1.Text = "Welcome to MY.NET Tutorials";
System.Threading.Thread.Sleep(2545);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text=""
style="font-weight: 700; background-color: #99CCFF;"></asp:Label>
<br />
<br />
<asp:Image
ID="Image1" runat="server" Height="134px" ImageUrl="~/dta_photo.jpg"
Width="186px" />
<asp:Image ID="Image2" runat="server" Height="134px"
ImageUrl="~/Saurabh Photo.jpg" Width="186px" />
<br />
<input type="submit" value="Proceed" style="font-weight: 700; background-color: #9999FF" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1"
runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdating>
<Sequence duration="0.30" fps="25">
<FadeOut AnimationTarget="UpdatePanelContainer" minimumOpacity="0.2" />
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<FadeIn AnimationTarget="UpdatePanelContainer" minimumOpacity="0.2" />
</Sequence>
</OnUpdated>
</Animations></asp:UpdatePanelAnimationExtender>
</div>
</form>
</body>
</html>
- Learn C# Language with Real Life Examples
- Learn WPF with examples
- Learn ajax with examples
- Learn mvc with examples
- Learn SQL Server concepts with Examples
- Learn Interview Questions and Answers
Download
0 comments:
Post a Comment