建立擴充項控制項讓用戶端行為與 Web 伺服器控制項產生關聯

發行項
10/22/2014

更新：2007 年 11 月

ASP.NET 中的 AJAX 功能可讓您擴充 Web 應用程式的功能，以創造更豐富的使用者經驗。您可以使用 Web 瀏覽器的 ECMAScript (JavaScript)、DHTML 與 AJAX 功能，加入多種視覺效果以及用戶端處理 (例如，驗證) 等。

本教學課程會示範如何建立「擴充項控制項」(Extender Control)，這個控制項會封裝用戶端「行為」(Behavior) 並將用戶端行為連結到 Web 伺服器控制項。用戶端行為會在瀏覽器的文件物件模型 (DOM) 項目中新增功能。接著，擴充項控制項會與一個或多個 ASP.NET 伺服器控制項類型產生關聯，以將這些行為加入至那些伺服器控制項。您可以將一個或多個擴充項控制項與 ASP.NET 伺服器控制項產生關聯。

在此教學課程中，您將了解如何進行下列作業：

建立擴充項控制項，此控制項會封裝用戶端行為，也會附加到 ASP.NET Web 網頁上的 Web 伺服器控制項。
建立用戶端行為，此行為與 Web 伺服器擴充項控制項具有關聯性。

使用用戶端行為處理來自瀏覽器 DOM 的事件。

注意事項：
即使不使用獨立的擴充項控制項，也可以為 ASP.NET 伺服器控制項加入豐富的用戶端功能。如需相關範例，練習如何建立具備本教學課程所說明之相同用戶端功能的 Web 伺服器控制項，請參閱將用戶端功能加入至 Web 伺服器控制項。

將自訂擴充項控制項編譯成組件 (Assembly)，並內嵌關聯的 JavaScript 檔案做為相同組件中的資源。
參考具備 ASP.NET AJAX 能力的 Web 網頁中已編譯的自訂擴充項控制項。

識別用戶端需求

此教學課程實作簡單用戶端行為，當您在瀏覽器中選取 Web 網頁中的控制項，或當控制項取得焦點 (Focus) 時，此用戶端行為會反白顯示控制項 (例如，TextBox 或 Button 控制項)。例如，控制項取得焦點時可能會變更背景色彩，而當焦點移動到其他控制項時會還原為預設色彩。

為實作此行為，此教學課程中的用戶端控制項需要下表所列功能。

需要的功能	實作
反白顯示 DOM 項目的方式。	用戶端控制項會套用階層式樣式表 (CSS) 樣式 (由類別名稱識別)，以反白顯示 ASP.NET Web 網頁中的 DOM 項目。使用者可設定此樣式。
將 DOM 項目還原為非反白顯示狀態的方式。	為從 ASP.NET 網頁中的 DOM 項目移除反白顯示，用戶端控制項會套用由類別名稱識別的 CSS 樣式。使用者可設定此樣式，而此樣式會套用至 DOM 項目做為預設樣式。
識別 DOM 項目何時被選取的方式。	為識別 DOM 項目何時被選取 (取得焦點)，控制項必須處理 DOM 項目的 onfocus 事件。
識別何時取消選取 DOM 的方式。	為識別何時取消選取控制項，控制項必須處理 DOM 項目的 onblur 事件。

建立擴充項控制項

若要封裝用戶端行為以供 ASP.NET 網頁開發人員使用，您可以使用擴充項控制項。擴充項控制項是 Web 伺服器控制項，它繼承 System.Web.UI 命名空間中的 ExtenderControl 抽象類別 (Abstract Class)。擴充項控制項可以套用到特定的 Web 伺服器控制項類型。您可以使用 TargetControlTypeAttribute 屬性來識別可套用擴充項控制項的 Web 伺服器控制項類型。

您可以將此教學課程中的擴充項控制項套用到任何類型的 Web 伺服器控制項。下列範例說明類別定義。

<TargetControlType(GetType(Control))> _
Public Class FocusExtender
    Inherits ExtenderControl

[TargetControlType(typeof(Control))]
public class FocusExtender : ExtenderControl

新的擴充項控制項包含兩個屬性，這些屬性可用於實作用戶端需求：

HighlightCssClass，它識別當 DOM 項目取得焦點時將套用的 CSS 類別，以便反白顯示控制項。
NoHighlightCssClass，它識別當焦點移開 DOM 項目時將套用的 CSS 類別。

繼承 ExtenderControl 抽象類別

下表列出 ExtenderControl 抽象類別的成員，您必須在擴充項控制項中實作此抽象類別。

成員	說明
GetScriptDescriptors	傳回代表 ECMAScript (JavaScript) 用戶端元件之 ScriptDescriptor 物件的集合。這包含要建立的用戶端類型、要指派的屬性，以及要加入處理常式的事件。
GetScriptReferences	傳回 ScriptReference 物件的集合，此物件包含將包含在控制項之用戶端指令碼程式庫的相關資訊。用戶端指令碼程式庫會定義用戶端類型，並包含該控制項所需的任何其他 JavaScript 程式碼。

此教學課程中的擴充項控制項使用 GetScriptDescriptors() 方法來定義用戶端行為類型的執行個體。控制項會建立新的 ScriptBehaviorDescriptor 物件 (從 ScriptDescriptor 類別衍生的 ScriptBehaviorDescriptor 類別)，並包含 GetScriptDescriptors 方法之傳回值中的物件。

ScriptBehaviorDescriptor 物件包含用戶端類別 (Samples.FocusBehavior) 的名稱，以及關聯之 (目標) Web 伺服器控制項的 ClientID 值。用戶端類別名稱與 ClientID 屬性值會提供給 ScriptBehaviorDescriptor 物件的建構函式 (Constructor)。目標 Web 伺服器控制項的參考會提供為 GetScriptDescriptors(Control) 方法的參數。此參考可用於判斷目標 Web 伺服器控制項的 ClientID 值，它是呈現之 DOM 項目的 id 值。

ScriptBehaviorDescriptor 類別會用於設定用戶端行為的屬性值，該值是從伺服器上的擴充項控制項屬性所取得。為定義用戶端行為的屬性，擴充項控制項會使用 ScriptBehaviorDescriptor 類別的 AddProperty 方法。接著，擴充項控制項會根據對應的伺服器擴充項控制項屬性，指定用戶端行為屬性的名稱與值。此範例使用 ScriptBehaviorDescriptor 物件來設定用戶端行為中的 highlightCssClass 與 nohighlightCssClass 屬性值。

擴充項控制項會提供傳回值中的 ScriptBehaviorDescriptor 物件，以用於 GetScriptDescriptors 方法。因此，當 Web 伺服器控制項呈現在瀏覽器時，ASP.NET 會呈現 JavaScript，JavaScript 會使用定義的屬性與事件處理常式建立用戶端行為的執行個體。行為執行個體會根據 ClientID 屬性 (從目標 Web 伺服器控制項呈現) 附加到 DOM 項目。下列範例會顯示網頁中的宣告式 ASP.NET 標記，此標記包含此教學課程的 ASP.NET 伺服器控制項與擴充項控制項。

<asp:TextBox ID="TextBox1"  />
<sample: FocusExtender 
    ID="FocusExtender1" 
    HighlightCssClass="MyHighLight"
    NoHighlightCssClass="MyLowLight"
    TargetControlID="TextBox1" />

呈現的網頁輸出包含 $create 方法的呼叫，此方法識別要建立的用戶端行為。它也提供用戶端行為屬性的值，以及做為用戶端行為目標之 DOM 項目的 id 值。下列範例顯示呈現的 $create 方法。

$create(Samples.FocusBehavior, {"highlightCssClass":"MyHighLight","nohighlightCssClass":"MyLowLight"}, null, null, $get('TextBox1'));

此教學課程中的擴充項控制項使用 GetScriptReferences 方法來傳遞指令碼程式庫的位置，此程式庫會定義用戶端行為類型。在此範例中，這是連至名為 FocusBehavior.js 之指令碼檔案的 URL，此教學課程稍後會建立此指令碼檔案。此參考的產生方式是建立新的 ScriptReference 物件，然後將 Path 屬性設定為包含用戶端程式碼之檔案的 URL。

下列範例顯示 GetScriptDescriptors 與 GetScriptReferences 方法的實作。

Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
    Dim reference As ScriptReference = New ScriptReference()
    reference.Path = ResolveClientUrl("FocusBehavior.js")

    Return New ScriptReference() {reference}
End Function

Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
    Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
    descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
    descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

    Return New ScriptDescriptor() {descriptor}
End Function

protected override IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Path = ResolveClientUrl("FocusBehavior.js");

    return new ScriptReference[] { reference };
}

protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
{
    ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
    descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
    descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

    return new ScriptDescriptor[] { descriptor };
}

建立用戶端行為

在擴充項控制項中，GetScriptReferences 方法會指定包含行為類型之用戶端程式碼的 JavaScript 檔案 (FocusBehavior.js)。本節將說明該檔案中的 JavaScript 程式碼。

用戶端行為程式碼會與 ScriptDescriptor 物件 (由 GetScriptDescriptors 方法所傳回) 中指定的成員相符。用戶端行為也可以擁有未對應至伺服器擴充項控制項成員的成員。

此教學課程中的擴充項控制項會將用戶端行為的名稱設定為 Samples.FocusBehavior，而且會定義兩個用戶端行為屬性：highlightCssClass 與 nohighlightCssClass。

如需如何建立用戶端元件與行為的詳細資訊，請參閱使用原型模型建立用戶端元件類別。

建立用戶端命名空間

用戶端程式碼必須先呼叫 Type 類別的 registerNamespace 方法，以建立其命名空間 (Samples)。下列範例顯示如何註冊用戶端命名空間。

// Register the namespace for the control.
Type.registerNamespace('Samples');

定義用戶端類別

Samples.FocusBehavior 類別會定義 Samples.FocusBehavior 用戶端類別。其中包含兩個屬性，會保存 Web 伺服器控制項提供的屬性值。

定義類別原型

定義 Samples.FocusBehavior 類別之後，用戶端程式碼會定義該類別的原型。原型包含屬性 get 與 set 存取子 (Accessor)，以及 DOM 項目之 onfocus 與 onblur 事件的事件處理常式。它也包含建立行為的執行個體時會呼叫的 initialize 方法，以及當網頁不再需要該行為時會執行清除的 dispose 方法。

定義 DOM 項目的事件處理常式

用戶端類別的事件處理常式定義為類別原型的方法。處理常式會使用 addHandlers 方法來與事件委派及瀏覽器 DOM 事件建立關聯，本主題稍後會討論該方法與 initialize 方法。

定義 Get 屬性與 Set 方法

擴充項控制項之 GetScriptDescriptors 方法的 ScriptDescriptor 物件中識別的每個屬性都必須具有對應的用戶端存取子。用戶端屬性存取子會定義為用戶端類別原型的 get_<property name> 與 set_<property name> 方法。

實作 Initialize 與 Dispose 方法

建立行為的執行個體時，會呼叫 initialize 方法。您可以使用此方法來設定預設屬性值、建立函式委派，以及將委派加入為事件處理常式。

Samples.FocusBehavior 類別的 initialize 方法會執行下列動作：

呼叫 Sys.UI.Behavior 基底類別 (Base Class) 的 initialize 方法。
呼叫 addHandlers 方法以將事件委派加入為關聯 DOM 項目的 onfocus 與 onblur 事件之處理常式。請注意，未指定事件名稱 (例如，onfocus) 的 "on" 部分。

當網頁行為的執行個體不再使用而且遭到移除時，會呼叫 dispose 方法。使用此方法可釋放行為不再需要使用的任何資源，例如 DOM 事件處理常式。

Sample.FocusBehavior 類別的 dispose 方法會執行下列動作：

呼叫 clearHandlers 方法以清除關聯 DOM 項目的 onfocus 與 onblur 事件處理常式之事件委派。
呼叫 Behavior 基底類別的 dispose 方法。

注意事項：

您可以多次呼叫用戶端類別的 dispose 方法。請確定您包含在 dispose 方法的程式碼已將此列入考量。

注意事項：
您可以多次呼叫用戶端類別的 dispose 方法。請確定您包含在 dispose 方法的程式碼已將此列入考量。

註冊行為

建立用戶端行為的最後一個工作是呼叫 registerClass 方法以註冊用戶端類別。因為類別是用戶端行為，registerClass 方法的呼叫會包含要註冊的 JavaScript 類別名稱。它也會指定 Behavior 做為基底類別。

以下的完整範例包含呼叫 Sys.Application 類別的 notifyScriptLoaded 方法。需要此呼叫，才能通知 Microsoft AJAX Library JavaScript 檔案已載入。

下列範例顯示 Samples.FocusBehavior 用戶端行為的完整 JavaScript 程式碼。此教學課程中的程式會將 JavaScript 檔案命名為 FocusBehavior.js，並將檔案放在 Scripts 目錄中。

// Register the namespace for the control.
Type.registerNamespace('Samples');

//
// Define the behavior properties.
//
Samples.FocusBehavior = function(element) { 
    Samples.FocusBehavior.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

//
// Create the prototype for the behavior.
//

Samples.FocusBehavior.prototype = {


    initialize : function() {
        Samples.FocusBehavior.callBaseMethod(this, 'initialize');

        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

        this.get_element().className = this._nohighlightCssClass;
    },

    dispose : function() {
        $clearHandlers(this.get_element());

        Samples.FocusBehavior.callBaseMethod(this, 'dispose');
    },

    //
    // Event delegates
    //

    _onFocus : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._highlightCssClass;          
        }
    },

    _onBlur : function(e) {
        if (this.get_element() && !this.get_element().disabled) {
            this.get_element().className = this._nohighlightCssClass;          
        }
    },


    //
    // Behavior properties
    //

    get_highlightCssClass : function() {
        return this._highlightCssClass;
    },

    set_highlightCssClass : function(value) {
        if (this._highlightCssClass !== value) {
            this._highlightCssClass = value;
            this.raisePropertyChanged('highlightCssClass');
        }
    },

    get_nohighlightCssClass : function() {
        return this._nohighlightCssClass;
    },

    set_nohighlightCssClass : function(value) {
        if (this._nohighlightCssClass !== value) {
            this._nohighlightCssClass = value;
            this.raisePropertyChanged('nohighlightCssClass');
        }
    }
}

// Optional descriptor for JSON serialization.
Samples.FocusBehavior.descriptor = {
    properties: [   {name: 'highlightCssClass', type: String},
                    {name: 'nohighlightCssClass', type: String} ]
}

// Register the class as a type that inherits from Sys.UI.Control.
Samples.FocusBehavior.registerClass('Samples.FocusBehavior', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

下列範例顯示 ASP.NET 網頁的完整程式碼。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>ASP.NET AJAX Behavior Sample</title>
    <style type="text/css">
    .LowLight
    {
        background-color:#EEEEEE;
    }

    .HighLight
    {
        background-color:#FFFFF0;
    }
    .LowLightButton
    {
        font-weight:normal;
        width:100px;
    }

    .HighLightButton
    {
        font-weight:bold;
        width:100px;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label  ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
                <td><asp:TextBox ID="TextBox2"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
                <td><asp:TextBox ID="TextBox3"  /></td>
              </tr>
            </table>

            <asp:Button  ID="Button1" Text="Submit Form" />

            <sample:FocusExtender ID="FocusExtender1" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox1" />
            <sample:FocusExtender ID="FocusExtender2" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox2" />
            <sample:FocusExtender ID="FocusExtender3" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox3" />
            <sample:FocusExtender ID="FocusExtender4" 
                                  NoHighlightCssClass="LowLightButton"
                                  HighlightCssClass="HighLightButton"
                                  TargetControlID="Button1" />
        </div>

    </form>
</body>
</html>

下列範例顯示 FocusExtender 類別的完整程式碼。這段程式碼通常會放在 App_Code 目錄中。

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Collections.Generic

Namespace Samples.VB

    <TargetControlType(GetType(Control))> _
    Public Class FocusExtender
        Inherits ExtenderControl

        Private _highlightCssClass As String
        Private _noHighlightCssClass As String

        Public Property HighlightCssClass() As String
            Get
                Return _highlightCssClass
            End Get
            Set(ByVal value As String)
                _highlightCssClass = value
            End Set
        End Property

        Public Property NoHighlightCssClass() As String
            Get
                Return _noHighlightCssClass
            End Get
            Set(ByVal value As String)
                _noHighlightCssClass = value
            End Set
        End Property

        Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Path = ResolveClientUrl("FocusBehavior.js")

            Return New ScriptReference() {reference}
        End Function

        Protected Overrides Function GetScriptDescriptors(ByVal targetControl As Control) As IEnumerable(Of ScriptDescriptor)
            Dim descriptor As ScriptBehaviorDescriptor = New ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID)
            descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
            descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

            Return New ScriptDescriptor() {descriptor}
        End Function
    End Class
End Namespace

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace Samples.CS
{
    [TargetControlType(typeof(Control))]
    public class FocusExtender : ExtenderControl
    {
        private string _highlightCssClass;
        private string _noHighlightCssClass;

        public string HighlightCssClass
        {
            get { return _highlightCssClass; }
            set { _highlightCssClass = value; }
        }

        public string NoHighlightCssClass
        {
            get { return _noHighlightCssClass; }
            set { _noHighlightCssClass = value; }
        }

        protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Path = ResolveClientUrl("FocusBehavior.js");

            return new ScriptReference[] { reference };
        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
        {
            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("Samples.FocusBehavior", targetControl.ClientID);
            descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
            descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

            return new ScriptDescriptor[] { descriptor };
        }
    }
}

動態編譯擴充項控制項以用於測試

任何 Web 伺服器控制項 (例如，此教學課程中的擴充項控制項) 都必須經過編譯，您才能在 Web 網頁中加以參考。您可以使用 ASP.NET 2.0 版的動態編譯功能測試 Web 伺服器控制項，而不需要以手動方式將這些控制項編譯為組件。當您首次撰寫 Web 伺服器控制項程式碼並進行偵錯時，這樣可以節省時間。下列步驟顯示如何使用 [App_Code] 資料夾來動態編譯您的擴充項控制項。

將擴充項控制項放置在 App_Code 資料夾以進行動態編譯

在網站的根資料夾下建立 [App_Code] 資料夾。

將 .cs 或 .vb 控制項原始程式檔 (Source File) 與任何相關類別移動到 [App_Code] 資料夾。

-或-

如果先前已將控制項的組件加入至 [Bin] 資料夾，請將該組件移除。您可以繼續編輯 [App_Code] 資料夾中的原始程式檔。每當您執行專案時，都會編譯控制項原始程式碼。

注意事項：
您可以將控制項編譯為組件並將組件放置在 [Bin] 資料夾中，或者將控制項的原始程式檔放置在 [App_Code] 資料夾中，但您無法同時執行上述動作。如果在這兩個資料夾中都加入了該控制項，網頁剖析器將無法解析網頁中的控制項參考，並將引發錯誤。

執行 Web 網頁。此時會動態編譯擴充項控制項。

測試 Web 網頁中動態編譯的擴充項控制項

下列程序說明如何測試具備 ASP.NET AJAX 能力之 Web 網頁中的擴充項控制項。Web 伺服器控制項的程式碼會從 [App_Code] 資料夾動態編譯。

在 ASP.NET 網頁中使用行為

建立新 ASP.NET Web 網頁。
如果網頁沒有 ScriptManager 控制項，請新增一個。
為已反白顯示的文字方塊與未反白顯示的文字方塊建立 CSS 樣式規則。

您可以使用想要的方式來反白顯示控制項。例如，您可以變更控制項的背景色彩、加入框線，或變更文字字型。
將 @ Register 指示詞新增到網頁，然後指定擴充項控制項的命名空間以及 TagPrefix 屬性。

注意事項：

在此範例中，伺服器控制項程式碼位於 [App_Code] 資料夾，可以動態編譯。因此，未指定組件屬性。
加入 TextBox 與 Button 控制項到網頁中，並設定其 Id 屬性。

控制項的標記必須包含。
將 FocusExtender 控制項的執行個體加入網頁中。
將 FocusExtender 控制項的 TargetControlID 屬性設定為您先前加入之 Button 控制項的識別碼。
將 HighlightCssClass 屬性設定為反白顯示的 CSS 樣式，並將 NoHighlightCssClass 屬性設定為不反白顯示的 CSS 樣式。
執行此頁面並選取每一個控制項。

請注意，當您選取 Button 控制項時，它會反白顯示。
將 FocusExtender 控制項的 TargetControlID 屬性變更為 TextBox 控制項的 ID，然後再次執行網頁。

此時，當 TextBox 控制項取得焦點時，便會反白顯示。您可以將封裝在 FocusExtender 控制項中的行為套用到網頁上不同的 ASP.NET 伺服器控制項。若要將行為套用到多個控制項，您可以將擴充項控制項的多個執行個體加入到網頁中，並將每個執行個體與不同的 ASP.NET 伺服器控制項產生關聯。

注意事項：
在此範例中，伺服器控制項程式碼位於 [App_Code] 資料夾，可以動態編譯。因此，未指定組件屬性。

將擴充項控制項編譯為組件

將 JavaScript 元件與 Web 伺服器控制項擴充程式碼內嵌到組件中，可讓您的自訂擴充項控制項更容易部署。建立組件也可以讓控制項版本控制的管理作業變得更簡單。此外，將控制項編譯為組件之前，無法將控制項加入至設計工具的工具箱中。

下列程序說明如何使用 Visual Studio 在現有的教學課程專案中建立新的程式碼程式庫。您必須將程式碼檔案的複本移動到此教學課程之專案的新程式碼程式庫中。編譯程式碼程式庫中的擴充項控制項會建立可部署的組件。

注意事項：
若要執行此程序，必須使用 Microsoft Visual Studio 2005 或 Visual Studio 2008。您無法使用 Microsoft Visual Web Developer Express 版，因為 Visual Web Developer Express 版無法讓您在相同方案中建立兩個專案。

將新的程式碼程式庫加入到現有專案中

在 Visual Studio 的 [檔案] 功能表上，按一下 [新增]，然後按一下 [專案]。

[新增專案] 對話方塊隨即出現。
在 [專案類型] 下方，選取 [Visual C#] 或 [Visual Basic]。
在 [範本] 下方，選取 [類別庫]，並將專案命名為 Samples。
在 [方案] 清單中，選取 [加入至方案]，然後按一下 [確定]。

Samples 類別程式庫會加入到現有的方案。

將自訂伺服器擴充項控制項移動到程式碼程式庫中

將下列參考加入到 Samples 類別程式庫專案，這些參考為自訂伺服器擴充項控制項的所需項目：
- System.Drawing
- System.Web
- System.Web.Extensions
在 [方案總管] 中，將 FocusExtender.cs 或 FocusExtender.vb 檔案與 FocusBehavior.js 檔案從原始教學課程專案複製到 Samples 類別程式庫專案的根目錄。
在 FocusBehavior.js 檔案的 [屬性] 視窗中，將 [建置動作] 設定為 [內嵌資源]。

將下列屬性加入至 AssemblyInfo 檔案。

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

[assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")]

注意事項：
AssemblyInfo.vb 檔案位於 [方案總管] 的 [My Project] 節點內。如果您沒有在 [我的專案] 節點內看到任何檔案，請執行下列動作：按一下 [專案] 功能表上的 [顯示所有檔案]。AssemblyInfo.cs 檔案位於 [方案總管] 的 [屬性] 節點內。

JavaScript 檔案的 WebResource 定義必須遵循 [assembly namespace].[JavaScript File name].js 的命名規範。

注意事項：
依照預設，Visual Studio 會將組件命名空間設定為組件名稱。您可以在組件的屬性中編輯組件命名空間。

在 FocusExtender 類別檔案中，將 GetScriptReferences 方法中的 ScriptReference 物件變更為參考內嵌在 Samples 組件中的用戶端控制項指令碼。若要這樣做，請執行下列變更：

將 Assembly 屬性設定為 "Samples"，以取代 Path 屬性。
加入 Name 屬性，並將其值設定為 "Samples.FocusBehavior.js"。

下列範例顯示此變更的結果。

        Protected Overrides Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Assembly = "Samples"
            reference.Name = "Samples.FocusBehavior.js"

            Return New ScriptReference() {reference}
        End Function

     protected override IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Assembly = "Samples";
            reference.Name = "Samples.FocusBehavior.js";

            return new ScriptReference[] { reference };
        }

建置專案。

編譯完成時，您會得到名為 Samples.dll 的組件。JavaScript 程式碼檔案 (FocusBehavior.js) 會內嵌為此組件中的資源。

注意事項：

加入新的原始程式檔或變更現有的原始程式檔後，請記得重新建置類別程式庫專案。

注意事項：
加入新的原始程式檔或變更現有的原始程式檔後，請記得重新建置類別程式庫專案。

使用 Web 網頁中之組件的已編譯擴充項控制項

您現在將參考具備 ASP.NET AJAX 能力之 Web 網頁中的已編譯自訂擴充項控制項。

參考具備 ASP.NET AJAX 能力之 Web 網頁中的自訂擴充項控制項

建立新的 ASP.NET AJAX 專案。
在網站的根目錄下建立 [Bin] 資料夾。
將 Samples.dll 組件從 Samples 類別專案的 [Bin\Debug] 或 [Bin\Release] 資料夾複製到新的 [Bin] 資料夾。
加入名為 TestFocusExtender.aspx 的新 ASP.NET Web 網頁，然後將下列標記加入到新網頁中。
```
<%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>
```
```
<%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>
```
因為伺服器控制項會編譯為組件，所以 @ Register 指示詞具有 Assembly 屬性，該屬性除了參考 Namespace 與 TagPrefix 屬性之外，還會參考 Samples 組件。
執行此頁面並選取每一個控制項。

當您選取 FocusBehavior 控制項時，它會反白顯示。

使用已編譯之自訂擴充項控制項的 Web 網頁會在 @ Register 指示詞中包含 Assembly 屬性。否則，它會與您用於 [App_Code] 資料夾之控制項的 Web 網頁相同。

請參閱

概念

將用戶端功能加入至 Web 伺服器控制項

搭配資料繫結控制項使用 ASP.NET UpdatePanel 控制項

參考

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager

共用方式為