How to implement UpdatePanelAnimatonExtender Control on ASP.NET Website

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:-
  • 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.
There are some steps to implement this whole concepts 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:-
<%@ 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" "">
<script runat="server">
 protected override void OnLoad(EventArgs e)
        Label1.Text = "Welcome to MY.NET Tutorials";
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <br />
  <asp:Label ID="Label1" runat="server" Text="" 
                    style="font-weight: 700; background-color: #99CCFF;"></asp:Label>
                <br />
                <br />
        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 />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" value="Proceed" style="font-weight: 700; background-color: #9999FF" />
       <asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" 
  <Sequence duration="0.30" fps="25">
  <FadeOut AnimationTarget="UpdatePanelContainer" minimumOpacity="0.2" />
  <FadeIn AnimationTarget="UpdatePanelContainer" minimumOpacity="0.2" />
Step 4:-Now Run the Application (Press F5) --> You will see Following output as shown below:-
For More ...
  1. Learn C# Language with  Real Life Examples
  2. Learn WPF with examples
  3. Learn ajax with examples
  4. Learn mvc with examples
  5. Learn SQL Server concepts with Examples
  6. Learn Interview Questions and Answers
Download Whole Attached File


Post a Comment

Powered by Blogger.