建立自訂的 AJAX Control Toolkit 控制項擴充項 (VB)

由Microsoft提供

自訂擴充器可讓您自訂和擴充 ASP.NET 控制項的功能，而不需要建立新的類別。

在本教學課程中，您將瞭解如何建立自訂 AJAX 控制項工具組控制項擴充項。 我們會建立簡單但實用的新擴充器，將 Button 的狀態從停用變更為在 TextBox 中輸入文字時啟用。 閱讀本教學課程之後，您將能夠使用自己的控制項擴充器來擴充 ASP.NET AJAX Toolkit。

您可以使用 Visual Studio 或 Visual Web Developer (確定您有最新版的 Visual Web Developer) 來建立自訂控制項擴充器。

DisabledButton 擴充項概觀

我們的新控制項擴充項命名為 DisabledButton 擴充項。 此擴充項會有三個屬性：

• TargetControlID - 控制項擴充的 TextBox。
• TargetButtonIID - 已停用或啟用的按鈕。
• DisabledText - 最初顯示在 [按鈕] 中的文字。 當您開始輸入時，Button 會顯示 Button Text 屬性的值。

您會將 DisabledButton 擴充項鍊接至 TextBox 和 Button 控制項。 在您輸入任何文字之前，[按鈕] 會停用，而 TextBox 和 Button 看起來像這樣：

(按一下即可檢視完整大小的影像)

開始輸入文字之後，即會啟用 Button，且 TextBox 和 Button 看起來像這樣：

(按一下即可檢視完整大小的影像)

若要建立我們的控制項擴充項，我們需要建立下列三個檔案：

• DisabledButtonExtender.vb - 此檔案是伺服器端控制項類別，可管理建立擴充器，並可讓您在設計階段設定屬性。 它也會定義可在擴充項上設定的屬性。 這些屬性可透過程式碼存取，並在設計階段與DisableButtonBehavior.js檔案中定義的屬性相符。
• DisabledButtonBehavior.js -- 此檔案是您新增所有用戶端腳本邏輯的位置。
• DisabledButtonDesigner.vb - 此類別可啟用設計階段功能。 如果您希望控制項擴充項能夠正確使用 Visual Studio/Visual Web Developer Designer，則需要這個類別。

因此，控制項擴充項是由伺服器端控制項、用戶端行為和伺服器端設計工具類別所組成。 您會瞭解如何在下列各節中建立這三個檔案。

建立自訂擴充器網站和專案

第一個步驟是在 Visual Studio/Visual Web Developer 中建立類別庫專案和網站。 我們將在類別庫專案中建立自訂擴充器，並在網站中測試自訂擴充器。

讓我們從網站開始。 請遵循下列步驟來建立網站：

1. 選取功能表選項 [檔案]、[新增網站]。
2. 選取 ASP.NET 網站 範本。
3. 將新網站命名為 Website1。
4. 按一下 [確定] 按鈕。

接下來，我們需要建立類別庫專案，其中包含控制項擴充項的程式碼：

1. 選取功能表選項 [檔案]、[新增]、[新增專案]。
2. 選取 [類別庫 ] 範本。
3. 使用 CustomExtenders名稱命名新的類別庫。
4. 按一下 [確定] 按鈕。

完成這些步驟之後，您的方案總管視窗看起來應該像圖 1。

圖 01：網站和類別庫專案的解決方案 (按一下即可檢視完整大小的影像)

接下來，您必須將所有必要的元件參考新增至類別庫專案：

1. 以滑鼠右鍵按一下 CustomExtenders 專案，然後選取功能表選項 [新增參考]。

2. 選取 [.NET] 索引標籤。

3. 加入下列組件的參考：

   1. System.Web.dll
   2. System.Web.Extensions.dll
   3. System.Design.dll
   4. System.Web.Extensions.Design.dll

4. 選取 [流覽] 索引標籤。

5. 新增AjaxControlToolkit.dll元件的參考。 此元件位於您下載 AJAX Control Toolkit 的資料夾。

您可以用滑鼠右鍵按一下專案、選取 [屬性]，然後按一下 [參考] 索引標籤， (請參閱圖 2) ，以確認您已新增所有正確的參考。

圖 02： 按一下即可檢視完整大小的影像 ()

建立自訂控制項擴充項

既然我們已經有類別庫，就可以開始建置擴充項控制項。 讓我們從自訂擴充項控制項類別的裸機開始， (請參閱清單 1) 。

清單 1 - MyCustomExtender.vb

Imports AjaxControlToolkit
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

<Assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")> 

<ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class MyControlExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property MyProperty() As String
        Get
            Return GetPropertyValue("MyProperty", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("MyProperty", value)
        End Set
    End Property
End Class

您在清單 1 中注意到控制項擴充項類別有數件事。 首先，請注意類別繼承自基底 ExtenderControlBase 類別。 所有 AJAX 控制項工具組擴充項控制項都衍生自這個基類。 例如，基類包含 TargetID 屬性，這是每個控制項擴充項的必要屬性。

接下來，請注意，類別包含下列與用戶端腳本相關的兩個屬性：

• WebResource - 使檔案包含在元件中做為內嵌資源。
• ClientScriptResource - 導致從元件擷取腳本資源。

WebResource 屬性可用來在編譯自訂擴充器時，將MyControlBehavior.js JavaScript 檔案內嵌至元件。 當自訂擴充項用於網頁時，ClientScriptResource 屬性可用來從元件擷取MyControlBehavior.js腳本。

為了讓 WebResource 和 ClientScriptResource 屬性能夠運作，您必須將 JavaScript 檔案編譯為內嵌資源。 選取 [方案總管] 視窗中的檔案，開啟屬性工作表，然後將[內嵌資源] 值指派給[建置動作] 屬性。

請注意，控制項擴充項也包含 TargetControlType 屬性。 這個屬性是用來指定控制項擴充項所擴充的控制項類型。 在清單 1 的案例中，控制項擴充項是用來擴充 TextBox。

最後，請注意，自訂擴充器包含名為 MyProperty 的屬性。 屬性會以 ExtenderControlProperty 屬性標示。 GetPropertyValue () 和 SetPropertyValue () 方法可用來將伺服器端控制項擴充項的屬性值傳遞至用戶端行為。

讓我們繼續實作 DisabledButton 擴充項的程式碼。 您可以在清單 2 中找到此擴充項的程式碼。

清單 2 - DisabledButtonExtender.vb

Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit

<Assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")> 

<Designer(GetType(DisabledButtonExtender))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    <IDReferenceProperty(GetType(Button))> _
    Public Property TargetButtonID() As String
        Get
            Return GetPropertyValue("TargetButtonID", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("TargetButtonID", value)
        End Set
    End Property

    <ExtenderControlProperty(), DefaultValue("")> _
    Public Property DisabledText() As String
        Get
            Return GetPropertyValue("DisabledText", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("DisabledText", value)
        End Set
    End Property

End Class

清單 2 中的 DisabledButton 擴充器有兩個名為 TargetButtonID 和 DisabledText 的屬性。 套用至 TargetButtonID 屬性的 IDReferenceProperty 可防止您將 Button 控制項的識別碼以外的任何專案指派給此屬性。

WebResource 和 ClientScriptResource 屬性會將位於名為 DisabledButtonBehavior.js 檔案中的用戶端行為與此擴充項產生關聯。 我們將在下一節討論此 JavaScript 檔案。

建立自訂擴充項行為

控制項擴充器的用戶端元件稱為行為。 停用和啟用 Button 的實際邏輯包含在 DisabledButton 行為中。 行為的 JavaScript 程式碼包含在清單 3 中。

清單 3 - DisabledButton.js

Type.registerNamespace('CustomExtenders');

CustomExtenders.DisabledButtonBehavior = function(element) {

    CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);

    this._targetButtonIDValue = null;
    this._disabledTextValue = null;

}

CustomExtenders.DisabledButtonBehavior.prototype = {

    initialize : function() {
        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');

        // Initalization code
        $addHandler(this.get_element(), 'keyup', 
        Function.createDelegate(this, this._onkeyup));
        this._onkeyup();
    },

    dispose : function() {
        // Cleanup code 

        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
    },

    // Property accessors 
    //
    get_TargetButtonID : function() {
        return this._targetButtonIDValue;
    },

    set_TargetButtonID : function(value) {
        this._targetButtonIDValue = value;
    },

    get_DisabledText : function() {
        return this._disabledTextValue;
    },

    set_DisabledText : function(value) {
        this._disabledTextValue = value;
    },

  _onkeyup : function() {
  
    var e = $get(this._targetButtonIDValue);
    if (e) {
      var disabled = ("" == this.get_element().value);
      e.disabled = disabled;
      if ( this._disabledTextValue) {
        if (disabled) {
          this._oldValue = e.value;
          e.value = this._disabledTextValue;
        }
        else
        {
          if(this._oldValue){
            e.value = this._oldValue;
          }
        }
      }
    }
  }

}

CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);

清單 3 中的 JavaScript 檔案包含名為 DisabledButtonBehavior 的用戶端類別。 這個類別與其伺服器端對應項一樣，包含兩個名為 TargetButtonID 和 DisabledText 的屬性，您可以使用 get_TargetButtonID/set_TargetButtonID 和 get_DisabledText/set_DisabledText 來存取。

initialize () 方法會將 keyup 事件處理常式與行為的目標專案產生關聯。 每次您在與這個行為相關聯的 TextBox 中輸入字母時，機碼更新處理常式就會執行。 索引鍵更新處理常式會啟用或停用 Button，視與行為相關聯的 TextBox 是否包含任何文字而定。

請記住，您必須將清單 3 中的 JavaScript 檔案編譯為內嵌資源。 在 [方案總管] 視窗中選取檔案，開啟屬性工作表，並將內嵌資源值指派給 [建置動作] 屬性， (請參閱圖 3) 。 此選項可在 Visual Studio 和 Visual Web Developer 中使用。

圖 03：將 JavaScript 檔案新增為內嵌資源 (按一下以檢視大小完整的映射)

建立自訂擴充器Designer

我們需要建立一個最後一個類別，才能完成延伸程式。 我們需要在清單 4 中建立設計工具類別。 需要這個類別，才能讓擴充器使用 Visual Studio/Visual Web Developer Designer正確運作。

清單 4 - DisabledButtonDesigner.vb

Imports AjaxControlToolkit.Design

Public Class DisabledButtonDesigner
    Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)

End Class

您可以將清單 4 中的設計工具與 DisabledButton 擴充器與 Designer 屬性產生關聯。您必須將 Designer 屬性套用至 DisabledButtonExtender 類別，如下所示：

<Designer(GetType(DisabledButtonDesigner))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
   Inherits ExtenderControlBase

使用自訂擴充器

既然我們已經完成建立 DisabledButton 控制項擴充器，現在可以在 ASP.NET 網站中使用它。 首先，我們需要將自訂擴充器新增至工具箱。 請遵循下列步驟：

1. 按兩下方案總管視窗中的頁面，以開啟 ASP.NET 網頁。
2. 以滑鼠右鍵按一下工具箱，然後選取功能表選項 [選擇專案]。
3. 在 [選擇工具箱專案] 對話方塊中，流覽至CustomExtenders.dll元件。
4. 按一下 [ 確定 ] 按鈕以關閉對話方塊。

完成這些步驟之後，DisabledButton 控制項擴充器應該會出現在工具箱中， (請參閱圖 4) 。

圖 04：工具箱中的 DisabledButton (按一下即可檢視大小完整的影像)

接下來，我們需要建立新的 ASP.NET 網頁。 請遵循下列步驟：

1. 建立名為 ShowDisabledButton.aspx 的新 ASP.NET 網頁。
2. 將 ScriptManager 拖曳到頁面。
3. 將 TextBox 控制項拖曳到頁面。
4. 將按鈕控制項拖曳到頁面。
5. 在屬性視窗中，將 Button ID 屬性變更為btnSave值，並將 Text 屬性變更為Save*值。

我們已建立具有標準 ASP.NET TextBox 和 Button 控制項的頁面。

接下來，我們需要使用 DisabledButton 擴充器來擴充 TextBox 控制項：

1. 選取 [ 新增擴充器 ] 工作選項以開啟 [擴充器精靈] 對話方塊， (請參閱圖 5) 。 請注意，對話方塊包含我們的自訂 DisabledButton 擴充器。
2. 選取 DisabledButton 擴充器，然後按一下 [ 確定 ] 按鈕。

圖 05：[擴充器精靈] 對話方塊 (按一下即可檢視大小完整的映射)

最後，我們可以設定 DisabledButton 擴充器的屬性。 您可以修改 TextBox 控制項的屬性來修改 DisabledButton 擴充器的屬性：

1. 選取Designer中的 TextBox。
2. 在屬性視窗中，展開 [擴充器] 節點， (請參閱圖 6) 。
3. 將 [ 儲存 ] 值指派給 DisabledText 屬性，並將值 btnSave 指派給 TargetButtonID 屬性。

圖 06： (按一下以檢視完整大小的影像) 設定擴充項屬性

當您按下 F5) 來執行頁面 (時，按鈕控制項一開始會停用。 一旦您開始在 TextBox 中輸入文字，按鈕控制項就會啟用 (請參閱圖 7) 。

圖 07：[停用][按鈕擴充器] 動作 (按一下以檢視大小完整的影像)

總結

本教學課程的目標是說明如何使用自訂擴充器控制項來擴充 AJAX 控制項工具組。 在本教學課程中，我們建立了簡單的 DisabledButton 控制項擴充器。 我們藉由建立 DisabledButtonExtender 類別、DisabledButtonBehavior JavaScript 行為和 DisabledButtonDesigner 類別來實作此擴充器。 每當建立自訂控制項擴充器時，您就會遵循一組類似的步驟。

[上一步]