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

您所在的位置：网站首页 › vb如何加扩展包 › 创建自定义 AJAX 控件工具包控件扩展程序 (VB)

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

2023-06-21 02:37| 来源: 网络整理| 查看: 265

创建自定义 AJAX 控件工具包控件扩展程序 (VB) 项目 09/23/2022

作者： Microsoft

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

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

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

DisabledButton 扩展程序概述

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

TargetControlID - 控件扩展的文本框。 TargetButtonIID - 已禁用或启用的按钮。 DisabledText - 最初显示在按钮中的文本。开始键入时，Button 将显示 Button Text 属性的值。

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

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

开始键入文本后，“按钮”已启用，“文本框”和“按钮”如下所示：

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

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

DisabledButtonExtender.vb - 此文件是用于管理创建扩展程序并允许您在设计时设置属性的服务器端控件类。它还定义可以在扩展程序上设置的属性。可通过代码访问这些属性，并在设计时与DisableButtonBehavior.js文件中定义的属性匹配。 DisabledButtonBehavior.js - 此文件用于添加所有客户端脚本逻辑。 DisabledButtonDesigner.vb - 此类启用设计时功能。如果希望控件扩展程序能够正确使用 Visual Studio/Visual Web 开发人员设计器，则需要此类。

因此，控件扩展程序由服务器端控件、客户端行为和服务器端设计器类组成。你将了解如何在以下部分中创建这三个文件。

创建自定义扩展程序网站和项目

第一步是在 Visual Studio/Visual Web Developer 中创建类库项目和网站。我们将在类库项目中创建自定义扩展程序，并在网站中测试自定义扩展程序。

让我们从网站开始。按照以下步骤创建网站：

选择菜单选项 “文件”，“新建网站”。选择 ASP.NET 网站模板。将新网站命名为 Website1。单击“确定”按钮。

接下来，我们需要创建包含控件扩展程序代码的类库项目：

选择菜单选项 “文件”、“添加”、“新建项目”。选择 “类库 ”模板。使用名称 CustomExtenders 命名新类库。单击“确定”按钮。

完成这些步骤后，Průzkumník řešení窗口应类似于图 1。

图 01：使用网站和类库项目的解决方案 (单击以查看全尺寸图像)

接下来，需要将所有必要的程序集引用添加到类库项目：

右键单击 CustomExtenders 项目，然后选择菜单选项 “添加引用”。

选择 .NET 选项卡。

添加对下列程序集的引用：

System.Web.dll System.Web.Extensions.dll System.Design.dll System.Web.Extensions.Design.dll

选择“浏览”选项卡。

添加对AjaxControlToolkit.dll程序集的引用。此程序集位于下载 AJAX 控件工具包的文件夹。

可以通过右键单击项目、选择“属性”和“引用”选项卡来验证是否已添加所有正确的引用， (请参阅图 2) 。

图 02：具有所需引用的引用文件夹 (单击以查看全尺寸图像)

创建自定义控件扩展程序

有了我们的类库后，就可以开始生成扩展程序控件。让我们从自定义扩展程序控件类的裸骨开始， (请参阅一览 1) 。

列表 1 - MyCustomExtender.vb

Imports AjaxControlToolkit Imports System.ComponentModel Imports System.Web.UI Imports System.Web.UI.WebControls _ _ Public Class MyControlExtender Inherits ExtenderControlBase _ _ 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 文件编译为嵌入资源。选择Průzkumník řešení窗口中的文件，打开属性表，并将嵌入资源的值分配给生成操作属性。

请注意，控件扩展程序还包括 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 _ _ _ Public Class DisabledButtonExtender Inherits ExtenderControlBase _ _ _ Public Property TargetButtonID() As String Get Return GetPropertyValue("TargetButtonID", "") End Get Set(ByVal value As String) SetPropertyValue("TargetButtonID", value) End Set End Property _ 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 可防止将按钮控件的 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 中键入字母时，键up 处理程序都会执行。键式处理程序启用或禁用按钮，具体取决于与行为关联的 TextBox 是否包含任何文本。

请记住，必须将列表 3 中的 JavaScript 文件编译为嵌入资源。选择Průzkumník řešení窗口中的文件，打开属性表，并将值嵌入资源分配给生成操作属性， (请参阅图 3) 。此选项在 Visual Studio 和 Visual Web 开发人员中均可用。

图 03：将 JavaScript 文件添加为嵌入资源 (单击以查看全尺寸图像)

创建自定义扩展程序设计器

我们需要创建一个最后一个类来完成扩展程序。我们需要在一览 4 中创建设计器类。此类需要使用 Visual Studio/Visual Web 开发人员设计器使扩展程序的行为正确。

一览 4 - DisabledButtonDesigner.vb

Imports AjaxControlToolkit.Design Public Class DisabledButtonDesigner Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender) End Class

将一览 4 中的设计器与 DisabledButton 扩展器与 Designer 属性相关联。需要将 Designer 属性应用于 DisabledButtonExtender 类，如下所示：

_ _ _ Public Class DisabledButtonExtender Inherits ExtenderControlBase 使用自定义扩展程序

创建 DisabledButton 控件扩展器后，现在可以在我们的 ASP.NET 网站使用它了。首先，我们需要将自定义扩展程序添加到工具箱。执行以下步骤：

双击Průzkumník řešení窗口中的页面，打开 ASP.NET 页。右键单击工具箱，然后选择菜单选项 “选择项”。在“选择工具箱项”对话框中，浏览到CustomExtenders.dll程序集。单击“ 确定 ”按钮关闭对话框。

完成这些步骤后，DisabledButton 控件扩展程序应显示在工具箱中， (请参阅图 4) 。

图 04：工具箱中的 DisabledButton (单击以查看全尺寸图像)

接下来，我们需要创建新的 ASP.NET 页。执行以下步骤：

创建名为 ShowDisabledButton.aspx 的新 ASP.NET 页。将 ScriptManager 拖到绘图页上。将 TextBox 控件拖到绘图页上。将按钮控件拖到绘图页上。在okno Vlastnosti中，将 Button ID 属性更改为 value btnSave，将 Text 属性更改为“保存”值。

我们创建了一个页面，其中包含标准 ASP.NET 文本框和按钮控件。

接下来，我们需要使用 DisabledButton 扩展程序扩展 TextBox 控件：

选择 “添加扩展程序 ”任务选项以打开“扩展程序向导”对话框， (请参阅图 5) 。请注意，对话框包含自定义 DisabledButton 扩展程序。选择 DisabledButton 扩展程序，然后单击“ 确定 ”按钮。

图 05：“扩展器向导”对话框 (单击以查看全尺寸图像)

最后，我们可以设置 DisabledButton 扩展程序的属性。可以通过修改 TextBox 控件的属性来修改 DisabledButton 扩展程序的属性：

在设计器中选择 TextBox。在okno Vlastnosti中，展开扩展器节点 (请参阅图 6) 。将值 “保存 ”分配给 DisabledText 属性，并将值 btnSave 分配给 TargetButtonID 属性。

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

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

图 07：操作中的 DisabledButton 扩展程序 (单击以查看全尺寸图像)

摘要

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

【本文地址】

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

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

今日新闻

推荐新闻