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