Putting more than one behavior on one element

Microsoft Ajax has the interesting ability to combine more than one component onto a single element. In the previous talk, I alluded to this possibility and one of the commenters (Tiamat) asked me to show how this is done.

Here is an example that combines the new EditInPlace behavior I showed yesterday with an AutoComplete and a Watermark from the Ajax Control Toolkit:

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="act" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Many behaviors on a textbox</title> <link href="template.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <act:ToolkitScriptManager runat="server" ID="sm1"
EnablePartialRendering="false"> <Scripts> <asp:ScriptReference Path="~/Script/EditInPlace.js" /> </Scripts> </act:ToolkitScriptManager> <script type="text/javascript"> Sys.Application.add_init(function() { $create(Bleroy.Sample.EditInPlace,
{ cssClass: "editInPlace" }, {}, {}, $get('<%= tb1.ClientID %>')); }); </script> <div> <h1>Many behaviors on a textbox</h1> <asp:TextBox runat="server" ID="tb1" /> <act:TextBoxWatermarkExtender runat="server" TargetControlID="tb1" WatermarkText="Click me..."/> <act:AutoCompleteExtender runat="server" TargetControlID="tb1" ServicePath="Words.asmx" ServiceMethod="GetWords" BehaviorID="AutoCompleteEx" ID="autoComplete1" MinimumPrefixLength="3" CompletionInterval="500" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass=
CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass=
DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="true" > <Animations> <OnShow> <Sequence> <OpacityAction Opacity="0" /> <HideAction Visible="true" /> <FadeIn /> </Sequence> </OnShow> <OnHide> <FadeOut /> </OnHide> </Animations> </act:AutoCompleteExtender> </div> </form> </body> </html>

The sample page here is using the extenders that the toolkit provides to instantiate the AutoComplete and Watermark behaviors but you really could include the script references and $create yourself. The edit in place behavior doesn’t have an associated server-side extender (but it would be quite easy to build one) so I’m just including the script and calling $create from client script. If you run this sample, you’ll see something like this:

If you view source in the browser, you’ll see that the code that the extender generates for the browser to run isn’t magical in any way, it’s just script tags and $create like we’d do manually.

One thing to note is that I hit a bug in the Toolkit while building that sample: AutoComplete assumes the element it attaches to is visible when it calls focus on it, which is usually OK but fails here when used with the edit in place behavior. I fixed this bug by surrounding the focus call with a try/catch block. A build of the toolkit with this fix is included in the zip file for this sample.

Bottom line is that more than one behavior on a single tag works great and makes for a formidable composition model.

Download the code for this sample:


  • You write "but you really could include the script references and $create yourself."

    This really interests me, how do I know what script references to include (for each toolkit control)?


  • @deap82: that's a really good question, and for the moment you'd need to use something like the script profiler tool that is available on http://www.codeplex.com/aspnet but in the next release I want to add to each of the toolkit scripts its list of dependencies, which should make things a lot easier.

Comments have been disabled for this content.