Post
Ask Question

Creating Animation Using Ajax

ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh.

Ajax is “the method of exchanging data with a server, and updating parts of a web page - without reloading the entire page.”

Let's have a look at Ajax,

Animation.aspx

  1. <%@ Page Language="C#" %>  
  2.     <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
  3.         <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
  4.             <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>  
  5.                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6.                 <html xmlns="http://www.w3.org/1999/xhtml">  
  7.   
  8.                 <head id="Head1" runat="server">  
  9.                     <title>Control Toolkit</title>  
  10.                     <style type="text/css">  
  11.                     .panelClass {  
  12.                         background-color: lime;  
  13.                         width: 300px;  
  14.                     }  
  15.                     </style>  
  16.                     <script type="text/javascript">  
  17.                     function pageLoad()  
  18.                     {  
  19.                         var ae = $find("ae");  
  20.                         var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';  
  21.                         ae.set_OnClick(animation);  
  22.                         ae.OnClick();  
  23.                     }  
  24.                     </script>  
  25.                 </head>  
  26.   
  27.                 <body>  
  28.                     <form id="form1" runat="server">  
  29.                         <asp:ScriptManager ID="ae" runat="server"> </asp:ScriptManager>  
  30.                         <div>  
  31.                             <asp:Panel ID="Panel1" CssClass="panelClass" runat="server"> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
  32.                                 <br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
  33.                                 <br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.  
  34.                                 <br /> </asp:Panel>  
  35.                             <input type="button" id="Button1" runat="server" value="Launch Animation" />  
  36.                             <cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button1"> </cc1:AnimationExtender>  
  37.                         </div>  
  38.                     </form>  
  39.                 </body>  
  40.   
  41.             </html>  
Guys, Please Ajax Control Toolkit if you don't have already. Keep exploring. If you have any doubt, please feel free to ask me.