|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
| |
| Tip：在使用AjaxControlTookit的控件时相应事件 |
|
在《分清ASP.NET AJAX中的Extender和Behavior模型》一文中，我谈到了使用AjaxControlTookit中控件的关键是客户端的各Behavior组件。微软官方推出的示例都太过于重视演示效果，而忽略了实际使用中的问题——市场需要吧，要让技术看上去吸引人，这么做无可厚非。但是作为一个实际开发产品的程序员，如果要灵活地使用AjaxControlTookit中的组件，则必须了解该如何在客户端操作各Behvaior对象的各个成员（属性、方法和事件等）。 dzBLinux联盟
dzBLinux联盟
在《分》文中，我举了一个操作ModalPopupBehavir对象的例子，这样显示和隐藏模态窗口的功能就局限于在服务器端ModalPopupExtender中指定的控件了。但是在这篇文章中，我想着重讲述一下在客户端操作那些组件事件的一些方法和技巧。因为，服务器端那些Extender对于客户端Behavior组件的事件支持并没有我们期望得那么良好。 dzBLinux联盟
dzBLinux联盟
Extender组件对于Behavior属性的支持 dzBLinux联盟
为什么AjaxControlToolkit中的控件使用起来那么方便？因为我们有了那么多的Extender。有了丰富的Extender控件，开发人员就可以在服务器端进行编程——例如设置各种属性，最终Extender会在页面中写入一些脚本用于创建客户端的Behavior对象。例如如果我们要使用ModalPopupExtender，最简单的情况下我们只需要在Extender中指定TargetControlID和PopupControlID就可以了，如下： dzBLinux联盟
dzBLinux联盟
<asp:Button ID="Button1" runat="server" Text="Button" /> dzBLinux联盟
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> dzBLinux联盟
Hello World! dzBLinux联盟
</asp:Panel> dzBLinux联盟
dzBLinux联盟
<ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="Button1" PopupControlID="Panel1" /> dzBLinux联盟
dzBLinux联盟
一行多余的代码页不要写，Extender会自动在页面上引入所需的脚本文件，并生成如下的客户端代码（格式有所改变）： dzBLinux联盟
dzBLinux联盟
Sys.Application.add_init(function() dzBLinux联盟
{ dzBLinux联盟
$create( dzBLinux联盟
AjaxControlToolkit.ModalPopupBehavior, dzBLinux联盟
{ dzBLinux联盟
"PopupControlID":"Panel1", dzBLinux联盟
"dynamicServicePath" : "/Default.aspx", dzBLinux联盟
"id":"ctl02" dzBLinux联盟
}, dzBLinux联盟
null, dzBLinux联盟
null, dzBLinux联盟
$get("Button1")); dzBLinux联盟
}); dzBLinux联盟
dzBLinux联盟
于是，在客户端的init阶段就会创建客户端的对象（init阶段在window.onload事件执行之后才会开始，因此如果页面上的资源需要大量时间才能完成加载的话，用户会发现Behavior的效果会很晚才出现——不过我们先不关心这个）。一般来说，页面上有多少个Extender，客户端就会出现多少个类似的语句。在$create方法的第二个参数是一个在页面上用JSON表示的对象，这是需要设置的Behavior对象的属性集合。例如在上面的例子中，ModalPopupBehavior对象的PopupControlID属性会被设置为"Panel"。 dzBLinux联盟
dzBLinux联盟
有过AjaxControlToolkit中控件开发经验的朋友一定知道，会被输出到客户端作为Behavior属性的那些Extender的属性都被标记了ExtenderControlPropertyAttribute，例如在ModalPopupExtender中就有如下的成员定义： dzBLinux联盟
dzBLinux联盟
[ExtenderControlProperty] dzBLinux联盟
public string PopupControlID dzBLinux联盟
{ dzBLinux联盟
get { ... } dzBLinux联盟
set { ... } dzBLinux联盟
} dzBLinux联盟
dzBLinux联盟
这样，AjaxControlToolkit中定义的基础类库就会把这个属性的值作为客户端Behavior的值，并将其输出至客户端——控件开发人员和控件使用者双方皆大欢喜。 dzBLinux联盟
dzBLinux联盟
有人说：我要响应事件 dzBLinux联盟
客户端的Behavior除了属性之外还有各种事件——例如CalendarBehavior的shown事件，它会在日历被打开之后触发。利用事件我们就可以在合适的时候执行特定的代码，获得丰富的功能。在服务器端标记属性然后输出至客户端早已众人皆知，那么我们可以在服务器端指定客户端的事件吗？ dzBLinux联盟
dzBLinux联盟
以前不行，不过现在已经可以了。在上一个版本AjaxControlToolkit中新增了和属性差不多的支持功能。现在AjaxControlToolkit中包含了一个ExtenderControlEventAttribute类，它的作用就是在服务器端标记某个属性，使它与某个客户端的事件对应。这样我们就可以在服务器端设置客户端某个事件的响应方法，我们只需要保证那个方法存在并且逻辑正确即可。 dzBLinux联盟
dzBLinux联盟
例如，我们这次使用CaledarExtender作为示例： dzBLinux联盟
dzBLinux联盟
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> dzBLinux联盟
<ajaxToolkit:CalendarExtender runat="server" TargetControlID="TextBox1" dzBLinux联盟
OnClientShown="onShownHandler"/> dzBLinux联盟
dzBLinux联盟
<textarea id="TraceConsole" cols="50" rows="10"></textarea> dzBLinux联盟
dzBLinux联盟
<script language="javascript" type="text/javascript"> dzBLinux联盟
function onShownHandler(sender, args) dzBLinux联盟
{ dzBLinux联盟
Sys.Debug.trace("Calendar shown."); dzBLinux联盟
} dzBLinux联盟
</script> dzBLinux联盟
dzBLinux联盟
目前我在服务器端的CalendarExtender中指定了OnClientShown属性，于是在页面上就出现了如下的JavaScript代码： dzBLinux联盟
dzBLinux联盟
Sys.Application.add_init(function() dzBLinux联盟
{ dzBLinux联盟
$create( dzBLinux联盟
AjaxControlToolkit.CalendarBehavior, dzBLinux联盟
{"id":"ctl02"}, dzBLinux联盟
{"shown":onShownHandler}, dzBLinux联盟
null, dzBLinux联盟
$get("TextBox1")); dzBLinux联盟
}); dzBLinux联盟
dzBLinux联盟
$create方法的第三个参数是响应事件方法的集合，其中onShownHandler被作为shown事件的响应方法。因此，在每次Calendar被展开之后onShownHandler方法都会被执行，于是在页面上的TextArea中就会显示出“Calendar shown.”的字样。 dzBLinux联盟
dzBLinux联盟
服务器端OnClientShown属性和客户端shown事件的映射关系是由CalendarExtender中以下代码决定的： dzBLinux联盟
dzBLinux联盟
[DefaultValue("")] dzBLinux联盟
[ExtenderControlEvent] dzBLinux联盟
[ClientPropertyName("shown")] dzBLinux联盟
public virtual string OnClientShown dzBLinux联盟
{ dzBLinux联盟
get { ... } dzBLinux联盟
set { ... } dzBLinux联盟
} dzBLinux联盟
dzBLinux联盟
ExtenderControlEventAttribute标记表明该属性将会映射到客户端Behavior的某个事件，而ClientPropertyNameAttribute标记则会接受一个参数，表明具体是哪个事件（如果不标记的话，则使用和属性同名的事件）。 dzBLinux联盟
dzBLinux联盟
一切就是这么简单…… dzBLinux联盟
dzBLinux联盟
……只可惜并非每个Extender都那么友好 dzBLinux联盟
例如，HoverMenuExtender。话说HoverMenuBehavior也有事件，例如showing和shown。可惜的是，由于ExtenderControlEventAttribute类和它的功能出现的比较晚，早期版本中出现的控件都没有这个功能。可能在新发布的AjaxControlToolkit中会慢慢地为它们补充这些功能，不过现在还是要响应Behavior的事件啊，是不？ dzBLinux联盟
dzBLinux联盟
在《分》文中，我演示了如何在客户端操作单个ModalPopupBehavior，虽然没有使用事件，但是我们既然可以操作那个Behavior对象了，为它添加一个Event Handler难道还不简单吗？不过似乎有朋友结合基于模板反复的控件（例如Repeater）与AjaxControlTookit中控件的时遇到了阻碍——这下子出现了多个Behavior对象，又该如何设置每一个的BehaviorID，又该如何操作每一个Behavior对象呢？要知道，Repeater在页面上最终会反复多少次可能也无法轻易得知（或使用）啊。 dzBLinux联盟
dzBLinux联盟
例如，我们结合Repeater控件和HoverMenuExtender来使用： dzBLinux联盟
dzBLinux联盟
<asp:Repeater ID="Repeater1" runat="server"> dzBLinux联盟
<ItemTemplate> dzBLinux联盟
<a id="link" runat="server">Hover on me!</a> dzBLinux联盟
<asp:Panel runat="server" ID="tooltip" style="display:none; dzBLinux联盟
border:solid 1px black; padding:5px; background-color:Yellow; width:100px"> dzBLinux联盟
Loading... dzBLinux联盟
</asp:Panel> dzBLinux联盟
<ajaxToolkit:HoverMenuExtender runat="server" ID="hoverMenu" dzBLinux联盟
TargetControlID="link" PopupControlID="tooltip" PopupPosition="Right" /> dzBLinux联盟
</ItemTemplate> dzBLinux联盟
<SeparatorTemplate> dzBLinux联盟
<hr /> dzBLinux联盟
</SeparatorTemplate> dzBLinux联盟
</asp:Repeater> dzBLinux联盟
dzBLinux联盟
根据上面的代码，当鼠标指向每个<a />元素时，将会出现一个浮动的标签，其中显示Loading字样。 但是如果我们要在每个区域显示出来之后访问一个WebService方法，并将得到的结果显示在浮动的区域内，又该怎么做呢？很显然，我们必须响应每个HoverMenuBehavior对象的shown事件。于是我们可以这样做： dzBLinux联盟
dzBLinux联盟
<script language="javascript" type="text/javascript"> dzBLinux联盟
function onShownHandler(sender, args) dzBLinux联盟
{ dzBLinux联盟
HoverMenuService.GetContent(onSuccess, null, sender.get_popupElement()); dzBLinux联盟
} dzBLinux联盟
dzBLinux联盟
function onSuccess(result, tooltip) dzBLinux联盟
{ dzBLinux联盟
tooltip.innerHTML = result; dzBLinux联盟
} dzBLinux联盟
</script> dzBLinux联盟
dzBLinux联盟
<asp:Repeater ID="Repeater1" runat="server"> dzBLinux联盟
<ItemTemplate> dzBLinux联盟
<a id="link" runat="server">Hover on me!</a> dzBLinux联盟
<asp:Panel runat="server" ID="tooltip" dzBLinux联盟
style="display:none; border:solid 1px black; padding:5px; background-color:Yellow; width:100px;"> dzBLinux联盟
Loading... dzBLinux联盟
</asp:Panel> dzBLinux联盟
<ajaxToolkit:HoverMenuExtender runat="server" ID="hoverMenu" dzBLinux联盟
TargetControlID="link" PopupControlID="tooltip" PopupPosition="Right" /> dzBLinux联盟
dzBLinux联盟
<script language="javascript" type="text/javascript"> dzBLinux联盟
Sys.Application.add_load(function(sender, args) dzBLinux联盟
{ dzBLinux联盟
if (args.get_isPartialLoad()) return; dzBLinux联盟
var behaviorId = '<%# (Container.FindControl("hoverMenu") as HoverMenuExtender).BehaviorID %>'; dzBLinux联盟
$find(behaviorId).add_shown(onShownHandler); dzBLinux联盟
}) dzBLinux联盟
</script> dzBLinux联盟
</ItemTemplate> dzBLinux联盟
<SeparatorTemplate> dzBLinux联盟
<hr /> dzBLinux联盟
</SeparatorTemplate> dzBLinux联盟
</asp:Repeater> dzBLinux联盟
dzBLinux联盟
我这里使用的是相对最容易的做法。我们既然可以在页面上反复DOM元素，自然也可以反复脚本代码。在ItemTemplate中的脚本代码很容易，其关键在于通过每一项的Container来找到其中的HoverMenuExtender，获得其BehaviorID，接着通过BehaviorID找到HoverMenuBehavior对象，并为它们响应shown事件（值得注意的是，添加事件响应方法是在load阶段中进行，因为那些Behavior对象是在init阶段中创建的）。每当鼠标滑过某个<a />元素时，其对应的HoverMenuBehavior对象的shown事件将被触发，onShownHandler方法会被执行，而其第一个参数sender即为当前触发事件的HoverMenuBehavior对象。于是我们调用HoverMenuService的GetContent方法用于获得填充内容。 dzBLinux联盟
dzBLinux联盟
还是看看最后在页面上生成的代码。有时候对于开发人员来说，直接阅读代码会更容易理解一些东西： dzBLinux联盟
dzBLinux联盟
<a id="Repeater1_ctl00_link">Hover on me!</a> dzBLinux联盟
<div id="Repeater1_ctl00_tooltip" style="..."> dzBLinux联盟
Loading... dzBLinux联盟
</div> dzBLinux联盟
<script language="javascript" type="text/javascript"> dzBLinux联盟
Sys.Application.add_load(function(sender, args) dzBLinux联盟
{ dzBLinux联盟
if (args.get_isPartialLoad()) return; dzBLinux联盟
var behaviorId = 'Repeater1_ctl00_hoverMenu'; dzBLinux联盟
$find(behaviorId).add_shown(onShownHandler); dzBLinux联盟
}) dzBLinux联盟
</script> dzBLinux联盟
dzBLinux联盟
<hr /> dzBLinux联盟
dzBLinux联盟
<a id="Repeater1_ctl02_link">Hover on me!</a> dzBLinux联盟
<div id="Repeater1_ctl02_tooltip" style="..."> dzBLinux联盟
Loading... dzBLinux联盟
</div> dzBLinux联盟
<script language="javascript" type="text/javascript"> dzBLinux联盟
Sys.Application.add_load(function(sender, args) dzBLinux联盟
{ dzBLinux联盟
if (args.get_isPartialLoad()) return; dzBLinux联盟
var behaviorId = 'Repeater1_ctl02_hoverMenu'; dzBLinux联盟
$find(behaviorId).add_shown(onShownHandler); dzBLinux联盟
}) dzBLinux联盟
</script> dzBLinux联盟
... dzBLinux联盟
dzBLinux联盟
不知是从AjaxControlToolkit的哪个版本开始，如果不设置Extender的BehaviorID，就会把Extender控件的ClientID作为BehaviorID了。根据Microsoft AJAX Library创建Component的规则，如果Component在创建时不提供ID，那么就不会在Sys.Application的某个集合中保持那个Component对象的引用，也就是说我们无法通过$find方法来获得它了。如果我们不需要在客户端操作那个Component对象，这并没有任何影响。而如果真的需要操作时，也只需在Extender中将BehaviorID设为特定的值即可。目前自动分配BehaviorID的做法，我估计就是为了解决类似Repeater这样的控件中使用Extender的情况，因为在这种情况下，我们不能在模板中指定Extender的BehaviorID，因为这样就会在客户端创建相同ID的Component——这是不允许做法。当然，我们还是有解决方法的，例如我们可以响应Repeater的ItemDataBound事件，然后在事件每次被触发时为当前Extender的BehaviorID设置唯一的值即可。 dzBLinux联盟
dzBLinux联盟
结论 dzBLinux联盟
AjaxControlTookit中控件的关键在于客户端的Behavior对象，Behavior对象大都有丰富的属性，方法和事件。在目前的版本中，为某些Behavior添加Event Handler并非一件很容易的事情。相信今后的AjaxControlToolkit版本中将会为一些较早的Extender补充对于客户端事件的支持，让我们拭目以待吧，只是眼下我们还需要使用一些技巧来实现功能了。不过，我们完全可以自己修改AjaxControlToolkit的代码，又何必等到官方的发布呢？ dzBLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
