Jay Kimble

[Here’s a preview of something I’m going to show Thursday night at the Tampa MVC group.]

You may have thought that by jumping on ASP.NET MVC that you have to leave behind all the cool Ajax Control Toolbox controls.. or more than likely you realize that it’s possible to use them, but one has to be a “JavaScript Rocket Scientist” to use them..

It’s really not, but you do need a couple things to use them.. First of all go here (Bertrand Le Roy’s blog) and pick up the jQuery plugin that let’s you instantiate MS Ajax Behaviors. Next go here to the Ajax Control Toolbox project and get both the ScriptFilesOnly project and the Source code as with MVC you won’t need anything but the JS files since the source/DLLs are for WebForms-related controls, but the Source code contains the debug version of the JS files which we’ll need (By the way, 6 months from now that link to the Ajax Control Toolbox will be old so you’ll probably want to get the latest release, and not the release I pointed at).

Now let’s look at how you would wire up the DropShadow behavior (aka the DropShadow Extender). First of all, we need to figure out the references. Thanks to Visual Studio 2008, this is easy. Using the text editor/view of your choice, open up the DropShadowBehavior.Debug.js from the Source project (not the ScriptOnly zip); this is located under the zip file at .\AjaxControlToolkitSource\AjaxControlToolkit\DropShadow. When you open up the file you will see the following at the top of the file:

   1: /// <reference name="MicrosoftAjax.debug.js" />

   2: /// <reference name="MicrosoftAjaxTimer.debug.js" />

   3: /// <reference name="MicrosoftAjaxWebForms.debug.js" />

   4: /// <reference path="../ExtenderBase/BaseScripts.js" />

   5: /// <reference path="../Common/Common.js" />

   6: /// <reference path="../RoundedCorners/RoundedCornersBehavior.js" />

   7: /// <reference path="../Compat/Timer/Timer.js" />

The first 3 items are all the standard MS Ajax client library, so we’ll need to reference those. Now we need to look at the last 4 items. If you open up the files from the ScriptOnly zip file, you aren’t going to find these exact named files; to find the right file look at the end of the file name to find the actual file you need to reference. You’ll also need to reference jQuery and Bertrand Le Roy plugins. Here’s what the references look like:

   1: <script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>

   2: <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

   3: <script src="Scripts/JqueryPlugin/jquery.MicrosoftAjax.js" type="text/javascript"></script>

   4:  

   5: <script src="Scripts/MicrosoftAjaxTimer.js" type="text/javascript"></script>    

   6: <script src="Scripts/MicrosoftAjaxWebForms.js" type="text/javascript"></script>    

   7: <script src="Scripts/AjaxCT/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>

   8: <script src="Scripts/AjaxCT/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>

   9: <script src="Scripts/AjaxCT/AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js" type="text/javascript"></script>

  10: <script src="Scripts/AjaxCT/AjaxControlToolkit.Compat.Timer.Timer.js" type="text/javascript"></script>

  11: <script src="Scripts/AjaxCT/AjaxControlToolkit.DropShadow.DropShadowBehavior.js" type="text/javascript"></script>

Here’s how we can then make every div with a “box” class to have a drop shadow:

   1: $().ready(function() {

   2:     $(".box").create(AjaxControlToolkit.DropShadowBehavior,

   3:             { 

   4:                 Opacity: 0.3,

   5:                 Rounded: false,

   6:                 TrackPosition: true,

   7:                 Width: 5

   8:             });

   9: });

See that JSON string (lines 3-8). If you look at those settings closely and compare them to the Ajax Control Toolbox documentation web site, you’ll see that these are the same settings that the extender uses which should make everything easy.