asp.net ajax: using scripts without server controls part 2

15 February 2007 | Comments

Thanks for visiting! Just a fair warning this post is fairly 'old' in tech terms and may contain outdated information and/or broken links or pictures. Please verify info and feel free to contact me if questions!

in my first attempt i used fake targets to create server controls to wire up the animation extender, then during execution, changed the target and executed the animation. a little kluge i thought, but it worked -- and under the cover essentially that's what happens anyway on a server control.

well today, ajax wizard and poker maven steve marx pointed me to a post where it talked about using the client libraries directly. basically when you add an animation extender control it tells the runtime what client-side script references it will need. so the first step is for us to do this manually. to do this, we can take advantage of the <Scripts> element of the ScriptManager control and enter the scripts we need for our animation:

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server">

   2:              <Scripts>

   3:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />

   4:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />

   5:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />

   6:              </Scripts>

   7:          </asp:ScriptManager>

after we have that, we can then use the client api's directly. here's the example:

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

   2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head runat="server">

   5:      <title>Untitled Page</title>

   6:      <script type="text/javascript">

   7:      function fadeOut()

   8:      {

   9:          var el = $get("fadeBlock");

  10:          AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);

  11:      }

  12:      </script>

  13:  </head>

  14:  <body>

  15:      <form id="form1" runat="server">

  16:          <asp:ScriptManager ID="ScriptManager1" runat="server">

  17:              <Scripts>

  18:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.Common.js" />

  19:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Compat.Timer.Timer.js" />

  20:                  <asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Animation.Animations.js" />

  21:              </Scripts>

  22:          </asp:ScriptManager>

  23:          <div>

  24:              <div id="fadeBlock" style="width:250px; height:250px; background-color:Red">

  25:                  <input type="button" value="Fade Out" id="fadeButton" onclick="fadeOut()" />

  26:              </div>

  27:          </div>

  28:      </form>

  29:  </body>

  30:  </html>

as you can see the key elements are in the javascript function:

   1:  var el = $get("fadeBlock");

   2:  AjaxControlToolkit.Animation.OpacityAction.play(el, 0, 30, 0.4);

following the model of the client apis, we can directly call them without having a server-side wire-up of a fake control. this will help with using microsoft ajax on non-microsoft platforms. i do wish, however, that it could be simplified. i suppose you could wrap the functions in a more simplified form into your own client side namespace. let's say a company like, oh, i don't know woodingo wanted to do this, then they could essentially have the above line in something like:

Woodingo.Fade("fadeBlock", 0.4);

that would likely be much more appealing to developers.

Please enjoy some of these other recent posts...

About Tim

Comments