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=
                                "autocomplete_completionListElement" 
            CompletionListItemCssClass="autocomplete_listItem" 
            CompletionListHighlightedItemCssClass=
                                "autocomplete_highlightedListItem"
            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:
http://weblogs.asp.net/blogs/bleroy/Samples/ManyBehaviors.zip

2 Comments

  • 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)?

    /Dan

  • @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.