创建自定义 AJAX 控件工具包控件扩展程序 (VB)

由 Microsoft

使用自定义扩展程序可以自定义和扩展 ASP.NET 控件的功能，而无需创建新类。

本教程介绍如何创建自定义 AJAX 控件工具包控件扩展程序。 我们创建了一个简单但有用的新扩展器，当您在 TextBox 中键入文本时，可将 Button 的状态从“禁用”更改为“启用”。 阅读本教程后，你将能够使用自己的控件扩展程序扩展 ASP.NET AJAX 工具包。

可以使用 Visual Studio 或 Visual Web Developer (创建自定义控件扩展程序，确保拥有最新版本的 Visual Web Developer) 。

DisabledButton 扩展程序概述

我们的新控件扩展程序名为 DisabledButton 扩展程序。 此扩展程序将具有三个属性：

• TargetControlID - 控件扩展的 TextBox。
• TargetButtonIID - 禁用或启用的按钮。
• DisabledText - 最初显示在按钮中的文本。 开始键入时，Button 会显示“按钮文本”属性的值。

将 DisabledButton 扩展程序挂钩到 TextBox 和 Button 控件。 在键入任何文本之前，“按钮”处于禁用状态，TextBox 和 Button 如下所示：

(单击以查看全尺寸图像)

开始键入文本后，按钮将启用，TextBox 和 Button 如下所示：

(单击以查看全尺寸图像)

若要创建控件扩展程序，需要创建以下三个文件：

• DisabledButtonExtender.vb - 此文件是服务器端控件类，它将管理创建扩展程序并允许你在设计时设置属性。 它还定义可在扩展器上设置的属性。 这些属性可通过代码和设计时访问，并匹配 DisableButtonBehavior.js 文件中定义的属性。
• DisabledButtonBehavior.js -- 此文件是添加所有客户端脚本逻辑的位置。
• DisabledButtonDesigner.vb - 此类启用设计时功能。 如果希望控件扩展程序能够与 Visual Studio/Visual Web 开发人员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 控件工具包的文件夹中。

可以通过右键单击项目、选择“属性”并单击“引用”选项卡 (请参阅图 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 控件 ID 以外的任何内容分配给此属性。

WebResource 和 ClientScriptResource 属性将位于名为 DisabledButtonBehavior.js 的文件中的客户端行为与此扩展程序相关联。 我们将在下一部分中讨论此 JavaScript 文件。

创建自定义扩展程序行为

控件扩展程序客户端组件称为行为。 禁用和启用按钮的实际逻辑包含在 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. 将 Button 控件拖到绘图页上。
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. 将值 Save 分配给 DisabledText 属性，将值 btnSave 分配给 TargetButtonID 属性。

图 06：设置扩展器属性 (单击以查看全尺寸图像)

通过按 F5) 运行页面 (时，按钮控件最初处于禁用状态。 一旦开始在 TextBox 中输入文本，按钮控件就会启用， (请参阅图 7) 。

图 07：DisabledButton 扩展器在操作 (单击以查看全尺寸图像)

总结

本教程的目的是说明如何使用自定义扩展程序控件扩展 AJAX 控件工具包。 在本教程中，我们创建了一个简单的 DisabledButton 控件扩展程序。 我们通过创建 DisabledButtonExtender 类、DisabledButtonBehavior JavaScript 行为和 DisabledButtonDesigner 类来实现此扩展程序。 每当创建自定义控件扩展器时，都遵循一组类似的步骤。

上一篇