.NET AJAX中的Extender和Behavior模型

ASP.NET AJAX提出了多種模型，在用戶端有Component、Control和Behavior模型，在伺服器端有ScirptControl和Extender模型。這些模型各有各的用途，但是請注意非常重要的一點：用戶端模型和伺服器端模型是相互獨立的。

ASP.NET AJAX的重要組件之一是Ajax Control Toolkit，其中包括了大量的Extender和Behavior。其中的Extender使用ASP.NET AJAX提出的Extender模型，在用戶端使用了Microsoft AJAX Library提出的Behavior模型。Extender和Behavior模型的組合提供了豐富的效果。那麼，究竟什麼是Extender模型，什 麼是Behavior模型呢？

伺服器端的Extender控制項其實是一個繼承了Control類並且實現了IExtenderControl介面的類，我們在開發時也可以直接繼 承ExtenderControl類，它已經滿足了上述條件並且定義了一些常用的方法。Extender控制項的作用，簡單說來只是想用戶端輸出指令碼，更確 切地說，是將需要在頁面上執行的指令碼告訴ScriptManager，ScriptManager會根據目前的狀況（普通載入還是非同步回送）選擇不同的輸 出方式。從理論上來說，Extender可以輸出任意指令碼。因此我們只能說“Ajax Control Tookit中的Extender在用戶端使用了Behavior”而不能說“Extender模型在用戶端使用了Behavior模型”。

Behavior模型在用戶端提供了豐富的功能，它操作的完全是用戶端對象，有些可能會訪問Web Service方法，但是這並不影響它僅僅是在用戶端工作的這個特性。Behavior完全可以獨立於伺服器端工作，用戶端（瀏覽器）只是按部就班地執行 用戶端的代碼，它也不會知道究竟是何種伺服器技術產生了這些代碼。 

因此，我們在使用Ajax Control Tookit時，也必須牢記以下幾條：

◆Extender模型和Behavior模型沒有必然聯絡。
◆Behavior可以獨立於Extender執行。
◆所有效果是由Behavior提供的。

 

關於第1條已經在上文中解釋過了。在我之前的一篇文章“ModalUpdateProgress控制項”中利用了第2條特性。在 ModalUpdateProgress控制項中我使用了ModalPopupBehavior，我的做法是從ModalPopupExtender中提取 所有需要的JavaScript檔案，並輸出至頁面，如下：

 

private IEnumerable GetExtenderReferences() { if (extenderReferences == null) { lock (typeof(ModalUpdateProgess)) { if (extenderReferences == null) { extenderReferences = (new ModalPopupExtender() as IExtenderControl).GetScriptReferences(); } } } return extenderReferences; }

因此，我就能夠在用戶端使用ModalPopupBehavior來構造我所需要的效果了，這裡沒有Extender，這裡只有Behavior。

關於第3條特性，我認為是最重要的，也是最常利用的一條。我經常會收到例如“如何點擊另一個按鈕讓CollapsiblePanel收縮或開啟”或 者“如何切換ToggleButton狀態”這樣的提問，其實這些問題的答案是相同的，使用JavaScript來操作Behavior。Ajax Control Toolkit在服務期端提供的控制項實在是太好用了，以至於官方將其托托放放的功能示範了一遍又一遍，樂此不疲。大量的示範卻讓人忘記了客戶段的 Behavior才是關鍵，Behavior才是讓用戶端豐富多彩的功臣。

最近有位朋友問我，如何在用戶端使用Authentication Service登陸使用者以後，用ModalPopupExtender的方式將結果顯示給使用者呢？其實關鍵還是在於使用JavaScript來操作 ModalPopupBehavior。我在這裡示範一下使用JavaScript操作ModalPopupBehavior的方法。

 

首先，在伺服器端放置一個ScriptManager、一個TextBox、一個Panel和一個ModalPopupBehavior。

<asp:ScriptManager ID="ScriptManager1" runat="server" />   <asp:TextBox ID="TextBox1" runat="server" style="display:none;" /> <asp:Panel runat="server" ID="popupPanel" style="border: solid 1px black; padding: 10px; width: 300px; display:none;"> <b style="font-size: 15pt;">Here's the Message</b> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="TextBox1" PopupControlID="popupPanel" OkControlID="Button1" BehaviorID="modalPopup" />

一切都是最平常的使用方式，只是以下幾點需要注意：

 

1、TextBox的display設為none：因為ModalPoupBehavior必須要有一個 TargetControl，而這個TargetControl就作為快顯視窗的觸發器。我們現在必須把這個觸發器隱藏掉，不過請注意不能將其 Visible設為False，否則用戶端的DOM結構中就沒有這個文字框了。

 

2、彈出Panel的display設為了none：這個已經是使用ModalPoupExtender的規則之一了，如果不將其display設為none，在頁面開啟的瞬間Panel會出現在頁面上，然後馬上消失。這樣除了讓使用者看到了Panel之外，還可能影響布局，讓頁面顯得一片混亂。

 

3、ModalPopupExtender設定了BehaviorID：這是使用JavaScript操作Ajax Control Toolkit中Behavior的關鍵。在用戶端構造Behavior時可以沒有ID，但是如果沒有ID的話則無法在用戶端操作Behavior對象了。

軟體開發網

 

然後，我們就可以在用戶端放置一個按鈕，然後使用JavaScript快顯視窗了。請注意，我們使用了$find通過BehaviorID來得到了ModalPopupBehavior執行個體，然後調用它的show方法：

<input type="button" value="Popup" onclick="$find('modalPopup').show();" /> 軟體開發網

這樣，視窗就彈出了。其實一切就是這麼簡單。

 

可能唯一的問題就是開發人員並不清楚該調用Behavior的哪個方法來工作。這其實並不構成障礙，我們只要查看Behavior的原始碼，看看那 些沒有底線首碼的方法（即公有方法）中名字和功能比較接近的即可。這就是使用合適方法名的好處，根本不需要些注釋就能明白方法的作用——更何況Ajax Control Toolkit中的Behavior注釋非常詳細。

這才是靈活使用Extender的方式。