【趙劼】分清ASP.NET AJAX中的Extender和Behavior模型

　　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時，也必須牢記以下幾條：

1. Extender模型和Behavior模型沒有必然聯絡。
2. Behavior可以獨立於Extender執行。
3. 所有效果是由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 Messageb>
    <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的方式。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-349297/，如需轉載，請註明出處，否則將追究法律責任。