通过

创建扩展程序控件以将客户端行为与 Web 服务器控件关联

  • 项目

更新：2007 年 11 月

ASP.NET 中的 AJAX 功能使您能够扩展 Web 应用程序的功能以创建丰富的用户体验。可以使用 Web 浏览器的 ECMAScript (JavaScript)、DHTML 和 AJAX 功能，提供可视化效果、客户端处理（如验证）等。

本教程演示如何创建一个用于封装客户端行为并将其链接到 Web 服务器控件的扩展程序控件。客户端行为可将功能添加到浏览器的文档对象模型 (DOM) 元素中。然后，将扩展程序控件与一个或多个类型的 ASP.NET 服务器控件关联，以将此行为添加到这些服务器控件中。可以将多个扩展程序控件与一个 ASP.NET 服务器控件关联。

在本教程中，您将了解如何执行以下操作：

  • 创建一个封装客户端行为的扩展程序控件，并将该控件附加到 ASP.NET 网页上的 Web 服务器控件中。

  • 创建与 Web 服务器扩展程序控件关联的客户端行为。

  • 通过使用客户端行为来处理浏览器 DOM 中的事件。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    也可以向 ASP.NET 服务器控件添加丰富的客户端功能，而无需单独的扩展程序控件。有关如何创建包含本教程中演示的相同客户端功能的 Web 服务器控件的示例，请参见向 Web 服务器控件添加客户端功能。

  • 将自定义扩展程序控件编译到一个程序集中，并将关联的 JavaScript 文件作为资源嵌入到同一程序集中。

  • 在支持 AJAX 的 ASP.NET 网页中引用已编译的自定义扩展程序控件。

标识客户端要求

本教程实现一个简单的客户端行为，当某个控件（例如 TextBox 或 Button 控件）在浏览器中被选定（或具有焦点）时，此客户端行为会在网页上突出显示该控件。例如，该控件在具有焦点时可能更改背景色，然后在焦点移动到另一个控件时返回到默认颜色。

若要实现此行为，本教程中的客户端控件需要下表中列出的功能。

必需的功能

实现

用于突出显示 DOM 元素的方法。

为了在 ASP.NET 网页中突出显示 DOM 元素，客户端控件应用一个用类名称标识的级联样式表 (CSS) 样式。此样式可由用户配置。

用于将 DOM 元素返回到其非突出显示状态的方法。

为了从 ASP.NET 页中移除对 DOM 元素的突出显示，客户端控件应用一个用类名称标识的 CSS 样式。此样式可由用户配置并作为默认样式应用于 DOM 元素。

用于标识何时选定 DOM 元素的方法。

为了标识 DOM 元素何时被选定（具有焦点），该控件将处理 DOM 元素的 onfocus 事件。

用于标识何时不选定 DOM 元素的方法。

为了标识何时不再选定某个控件，该控件将处理 DOM 元素的 onblur 事件。

创建扩展程序控件

若要封装供 ASP.NET 页开发人员使用的客户端行为，可以使用扩展程序控件。扩展程序控件是继承了 System.Web.UI 命名空间中的 ExtenderControl 抽象类的 Web 服务器控件。扩展程序控件可应用于特定的 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 对象（ScriptBehaviorDescriptor 类派生自 ScriptDescriptor 类）并在 GetScriptDescriptors 方法的返回值中包含此对象。

ScriptBehaviorDescriptor 对象包括客户端类的名称 (Samples.FocusBehavior) 和关联的（目标）Web 服务器控件的 ClientID 值。将客户端类名称和 ClientID 属性值提供给 ScriptBehaviorDescriptor 对象的构造函数。将对目标 Web 服务器控件的引用作为参数提供给 GetScriptDescriptors(Control) 方法。可以使用该引用来确定目标 Web 服务器控件的 ClientID 值（对于呈现的 DOM 元素则为 id 值）。

ScriptBehaviorDescriptor 类用于设置客户端行为的属性值，这些属性值是从服务器上的扩展程序控件的属性中获得的。为了定义客户端行为的属性，扩展程序控件使用 ScriptBehaviorDescriptor 类的 AddProperty 方法。然后，扩展程序控件根据服务器扩展程序控件的相应属性为客户端行为的属性指定名称和值。此示例使用 ScriptBehaviorDescriptor 对象来设置客户端行为中的 highlightCssClass 和 nohighlightCssClass 属性的值。

扩展程序控件在 GetScriptDescriptors 方法的返回值中提供 ScriptBehaviorDescriptor 对象。因此，当对浏览器呈现 Web 服务器控件时，ASP.NET 将呈现 JavaScript，此 JavaScript 使用所有定义的属性和事件处理程序创建客户端行为的实例。根据目标 Web 服务器控件中呈现的 ClientID 属性，将该行为实例附加到 DOM 元素。下面的示例演示声明性 ASP.NET 标记，此标记在一个页中包含一个 ASP.NET 服务器控件和本教程中的扩展程序控件。

<asp:TextBox ID="TextBox1" runat="server" />
<sample: FocusExtender runat="server"
    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 代码。

客户端行为代码与由 GetScriptDescriptors 方法返回的 ScriptDescriptor 对象中指定的成员匹配。客户端行为也可包含与服务器扩展程序控件中的成员不对应的成员。

本教程中的扩展程序控件将客户端行为的名称设置为 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 访问器以及 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 基类的 initialize 方法。

  • 调用 addHandlers 方法以将事件委托添加为关联的 DOM 元素的 onfocus 和 onblur 事件的处理程序。请注意，不指定事件名称的“on”部分（例如，onfocus）。

当不再在页上使用该行为的实例并将其移除时，将调用 dispose 方法。使用此方法可释放该行为不再需要的任何资源（例如，DOM 事件处理程序）。

Sample.FocusBehavior 类的 dispose 方法执行以下操作：

  • 调用 clearHandlers 方法以清理作为关联的 DOM 元素的 onfocus 和 onblur 事件的处理程序的事件委托。

  • 调用 Behavior 基类的 dispose 方法。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    可能会多次调用客户端类的 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 runat="server">
    <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" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label runat="server" ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1" runat="server" /></td>
              </tr>
              <tr>
                <td><asp:Label runat="server" ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
                <td><asp:TextBox ID="TextBox2" runat="server" /></td>
              </tr>
              <tr>
                <td><asp:Label runat="server" ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
                <td><asp:TextBox ID="TextBox3" runat="server" /></td>
              </tr>
            </table>

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

            <sample:FocusExtender ID="FocusExtender1" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox1" />
            <sample:FocusExtender ID="FocusExtender2" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox2" />
            <sample:FocusExtender ID="FocusExtender3" runat="server"
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox3" />
            <sample:FocusExtender ID="FocusExtender4" runat="server"
                                  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 服务器控件（例如，本教程中的扩展程序控件）必须先经过编译，然后才能在网页上进行引用。可使用 ASP.NET 2.0 版的动态编译功能来测试 Web 服务器控件，而无需手动将该控件编译到程序集中。在最初编写和调试 Web 服务器控件代码时，这将为您节省时间。下面的步骤演示如何使用 App_Code 文件夹来动态编译扩展程序控件。

将扩展程序控件放入 App_Code 文件夹中以便进行动态编译

  1. 在网站的根文件夹下，创建一个 App_Code 文件夹。

  2. 将 .cs 或 .vb 控件源文件和任何相关类移动到 App_Code 文件夹中。

    - 或 -

    如果先前已将控件的程序集添加到 Bin 文件夹中，请删除此程序集。继续编辑 App_Code 文件夹中的源文件。每当运行项目时，都将编译控件源代码。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    可以将一个控件编译到一个程序集中，并将该程序集置于 Bin 文件夹中；也可以将该控件的源文件置于 App_Code 文件夹中，但不能同时执行这两种操作。如果将此控件同时添加到这两个文件夹中，则页分析器将无法解析对页中控件的引用，并将引发错误。

  3. 运行网页。将动态编译扩展程序控件。

在网页上测试动态编译的扩展程序控件

下面的过程描述如何在支持 AJAX 的 ASP.NET 网页上测试扩展程序控件。从 App_Code 文件夹中动态编译 Web 服务器控件的代码。

在 ASP.NET 页上使用行为

  1. 创建一个新的 ASP.NET 网页。

  2. 如果此页还没有 ScriptManager 控件，请添加一个此类控件。

  3. 为突出显示的文本框和未突出显示的文本框分别创建 CSS 样式规则。

    可以按照您喜欢的任何方式突出显示控件。例如，可以更改控件的背景色、添加边框或更改文本的字体。

  4. 在页中添加一个 @ Register 指令，然后指定扩展程序控件的命名空间和 TagPrefix 属性。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    在此示例中，服务器控件代码将位于 App_Code 文件夹中，以便能够动态编译此代码。因此，不指定程序集属性。

  5. 在页中添加 TextBox 和 Button 控件，并设置其 Id 属性。

    控件的标记必须包含 runat="server"。

  6. 将 FocusExtender 控件的实例添加到页中。

  7. 将 FocusExtender 控件的 TargetControlID 属性设置为先前添加的 Button 控件的 ID。

  8. 将 HighlightCssClass 属性设置为突出显示的 CSS 样式，并将 NoHighlightCssClass 属性设置为不突出显示的 CSS 样式。

  9. 运行页并选择每个控件。

    请注意，当选择 Button 控件时，此控件将突出显示。

  10. 将 FocusExtender 控件的 TargetControlID 属性更改为 TextBox 控件的 ID，然后再次运行该页。

    这一次，当 TextBox 控件具有焦点时，该控件将突出显示。封装在 FocusExtender 控件中的行为可应用于页上不同的 ASP.NET 服务器控件。如果希望将此行为应用于多个控件，则可以将扩展程序控件的多个实例添加到页中，并将每个实例与不同的 ASP.NET 服务器控件关联。

将扩展程序控件编译到程序集中

将 JavaScript 组件和 Web 服务器控件的扩展代码嵌入到一个程序集中，这样将使您能够更轻松地部署自定义扩展程序控件。创建程序集也使您能够更轻松地管理控件的版本控制。此外，除非将控件编译到程序集中，否则不能将这些控件添加到设计器的工具箱中。

下面的过程描述如何使用 Visual Studio 在现有的教程项目中创建新的代码库。将代码文件的副本移动到本教程的项目中的新代码库中。在代码库中编译扩展程序控件能够创建可部署的程序集。

Bb386403.alert_note(zh-cn,VS.90).gif说明：

若要执行此过程，必须使用 Microsoft Visual Studio 2005 或 Visual Studio 2008。不能使用 Microsoft Visual Web Developer 速成版，因为 Visual Web Developer 速成版不允许您在同一解决方案中创建两个项目。

将新代码库添加到现有项目中

  1. 在 Visual Studio 中的**“文件”菜单上，单击“新建”，然后单击“项目”**。

    将显示**“新建项目”**对话框。

  2. 在**“项目类型”下，选择“Visual C#”或“Visual Basic”**。

  3. 在**“模板”下，选择“类库”**，然后将项目命名为“Samples”。

  4. 在**“解决方案”列表中，选择“添加到解决方案”，然后单击“确定”**。

    将 Samples 类库添加到现有解决方案中。

将自定义服务器扩展程序控件移动到代码库中

  1. 将下面的引用添加到 Samples 类库项目，这些引用是自定义服务器扩展程序控件所需的：

    • System.Drawing

    • System.Web

    • System.Web.Extensions

  2. 在**“解决方案资源管理器”**中，将来自原始教程项目的 FocusExtender.cs 或 FocusExtender.vb 文件和 FocusBehavior.js 文件复制到 Samples 类库项目的根目录中。

  3. 在 FocusBehavior.js 文件对应的**“属性”窗口中，将“生成操作”设置为“嵌入的资源”**。

    将脚本文件设置为嵌入式资源

  4. 将下面的属性添加到 AssemblyInfo 文件中。

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

    [assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")]
    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    AssemblyInfo.vb 文件位于解决方案资源管理器的“我的项目”节点上。如果在“我的项目”节点中未看到任何文件，请执行以下操作：在“项目”菜单上单击“显示所有文件”。AssemblyInfo.cs 文件位于解决方案资源管理器的“属性”节点上。

    JavaScript 文件的 WebResource 定义必须遵循 [程序集命名空间].[JavaScript 文件名].js 的命名约定。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    默认情况下，Visual Studio 将程序集命名空间设置为程序集名称。可以在程序集属性中编辑程序集命名空间。

  5. 在 FocusExtender 类文件中，更改 GetScriptReferences 方法中的 ScriptReference 对象以引用 Samples 程序集中嵌入的客户端控件脚本。为此，请进行以下更改：

    • 将 Path 属性替换为设置为“Samples”的 Assembly 属性。

    • 添加 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 };
        }

  6. 生成项目。

    完成编译后，将得到一个名为 Samples.dll 的程序集。将 JavaScript 代码文件 (FocusBehavior.js) 作为资源嵌入此程序集中。

    Bb386403.alert_note(zh-cn,VS.90).gif说明：

    请记住，只要添加新的资源文件或更改现有资源文件，就应重新生成类库项目。

在网页中使用其程序集中已编译的扩展程序控件

现在，您就将在支持 AJAX 的 ASP.NET 网页中引用已编译的自定义扩展程序控件。

在支持 AJAX 的 ASP.NET 网页中引用自定义扩展程序控件

  1. 创建新的 ASP.NET AJAX 项目。

  2. 在网站的根目录中创建一个 Bin 文件夹。

  3. 将 Samples.dll 程序集从 Samples 类项目的 Bin\Debug 或 Bin\Release 文件夹中复制到新的 Bin 文件夹。

  4. 添加名为 TestFocusExtender.aspx 的新的 ASP.NET 网页，然后将以下标记添加到新页。

    <%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>

    <%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>

    由于已将服务器控件编译到程序集中，因此除 Namespace 和 TagPrefix 属性之外，@ Register 指令还有一个引用 Samples 程序集的 Assembly 属性。

  5. 运行页并选择每个控件。

    当选择 FocusBehavior 控件时，该控件将突出显示。

使用已编译的自定义扩展程序控件的网页在 @ Register 指令中包含 Assembly 属性。除此之外，此网页与用于 App_Code 文件夹中的控件的网页相同。

请参见

概念

向 Web 服务器控件添加客户端功能

将 ASP.NET UpdatePanel 控件与数据绑定控件一起使用

参考

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager