Создание пользовательского расширителя элементов управления AJAX Control Toolkit (VB)

От Майкрософт

Настраиваемые расширители позволяют настраивать и расширять возможности элементов управления ASP.NET без необходимости создавать новые классы.

В этом руководстве описано, как создать пользовательский расширитель элементов управления AJAX Control Toolkit. Мы создаем простой, но полезный новый расширитель, который изменяет состояние кнопки с отключенного на включенное, когда вы вводите текст в текстовое поле. Прочитав это руководство, вы сможете расширить набор средств AJAX ASP.NET с помощью собственных расширителей элементов управления.

Вы можете создавать расширения пользовательского элемента управления с помощью Visual Studio или Visual Web Developer (убедитесь, что у вас установлена последняя версия Visual Web Developer).

Обзор средства расширения DisabledButton

Наш новый расширитель управления называется DisabledButton. Этот расширитель будет иметь три свойства:

TargetControlID — текстовое поле, которое элемент управления расширяет.
TargetButtonIID — кнопка, которая отключена или включена.
DisabledText — текст, который изначально отображается в кнопке. При вводе текста кнопка отображает значение свойства Button Text.

Вы привязываете расширение DisabledButton к контролам TextBox и Button. Перед вводом текста кнопка отключена, а textBox и Button выглядят следующим образом:

(Щелкните, чтобы просмотреть изображение полного размера)

После начала ввода текста кнопка включена, а текстовое поле и кнопка выглядят следующим образом:

(Щелкните, чтобы просмотреть изображение полного размера)

Чтобы создать расширитель элементов управления, необходимо создать следующие три файла:

DisabledButtonExtender.vb . Этот файл — это класс управления на стороне сервера, который будет управлять созданием расширителя и позволяет задавать свойства во время разработки. Он также определяет свойства, которые можно задать на расширителье. Эти свойства доступны в коде и на этапе разработки и соответствуют свойствам, определенным в файле DisableButtonBehavior.js.
DisabledButtonBehavior.js - В этот файл вы добавите всю логику вашего клиентского скрипта.
DisabledButtonDesigner.vb - Этот класс активирует функциональные возможности на этапе проектирования. Этот класс необходим, если вы хотите, чтобы расширитель элементов управления работал правильно с конструктором Visual Studio или Visual Web Developer.

Поэтому расширитель элементов управления состоит из серверного элемента управления, поведения на стороне клиента и класса конструктора на стороне сервера. Вы узнаете, как создать все три этих файла в следующих разделах.

Создание настраиваемого веб-сайта и проекта дополнения

Первым шагом является создание проекта библиотеки классов и веб-сайта в Visual Studio или Visual Web Developer. Мы создадим настраиваемый расширитель в проекте библиотеки классов и протестируем пользовательский расширитель на веб-сайте.

Начнем с веб-сайта. Выполните следующие действия, чтобы создать веб-сайт:

Выберите пункт меню "Файл", "Новый веб-сайт".
Выберите шаблон веб-сайта ASP.NET .
Назовите новый веб-сайт Web1.
Нажмите кнопку ОК.

Затем необходимо создать проект библиотеки классов, содержащий код расширения элемента управления:

Выберите пункт меню "Файл", "Добавить", "Создать проект".
Выберите шаблон библиотеки классов .
Присвойте новой библиотеке классов имя CustomExtenders.
Нажмите кнопку ОК.

После выполнения этих действий окно обозревателя решений должно выглядеть как рис. 1.

Рис. 01. Решение с проектом веб-сайта и библиотеки классов (щелкните, чтобы просмотреть изображение полного размера)

Затем необходимо добавить все необходимые ссылки на сборки в проект библиотеки классов:

Щелкните правой кнопкой мыши проект CustomExtenders и выберите пункт меню "Добавить ссылку".
Выберите вкладку .NET.
Добавьте ссылки на следующие сборки:
1. System.Web.dll
2. System.Web.Extensions.dll
3. System.Design.dll
4. 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

<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

Во втором листинге перечислены несколько особенностей класса расширения элемента управления. Сначала обратите внимание, что класс наследует от базового класса ExtenderControlBase. Все элементы управления расширения средств управления AJAX являются производными от этого базового класса. Например, базовый класс включает свойство TargetID, которое является обязательным свойством каждого расширителя элемента управления.

Обратите внимание, что класс включает следующие два атрибута, связанные с клиентским скриптом:

WebResource — приводит к включению файла в качестве внедренного ресурса в сборку.
ClientScriptResource — инициирует получение скриптового ресурса из сборки.

Атрибут WebResource используется для внедрения файла JavaScript MyControlBehavior.js в сборку при компиляции пользовательского расширителя. Атрибут ClientScriptResource используется для получения скрипта MyControlBehavior.js из сборки при использовании пользовательского расширителя на веб-странице.

Чтобы атрибуты WebResource и ClientScriptResource работали, необходимо скомпилировать файл JavaScript как внедренный ресурс. Выберите файл в окне обозревателя решений, откройте лист свойств и назначьте значение Внедренного ресурса свойству "Действие сборки ".

Обратите внимание, что расширитель элемента управления также включает атрибут TargetControlType. Этот атрибут используется для указания типа элемента управления, который расширяется с помощью расширителя элемента управления. В случае с Листингом 1 используется расширитель элемента управления для расширения текстового поля.

Наконец, обратите внимание, что пользовательский экстендер содержит свойство 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

Расширение DisabledButton в листинге 2 имеет два свойства с именем TargetButtonID и DisabledText. Идентификатор IdReferenceProperty, примененный к свойству TargetButtonID, не позволяет назначать ничего, кроме идентификатора элемента управления Button этому свойству.

Атрибуты 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);

Файл JavaScript в листинге 3 содержит клиентский класс с именем DisabledButtonBehavior. Этот класс, как и двойник на стороне сервера, включает два свойства с именем TargetButtonID и DisabledText, к которым можно получить доступ с помощью get_TargetButtonID/set_TargetButtonID и get_DisabledText/set_DisabledText.

Метод initialize() связывает обработчик событий keyup с целевым элементом для поведения. Каждый раз, когда вы вводите букву в текстовое поле, связанное с этим поведением, обработчик события "keyup" срабатывает. Обработчик события keyup включает или отключает кнопку Button в зависимости от того, содержит ли связанное с поведением текстовое поле какой-либо текст.

Помните, что необходимо скомпилировать файл JavaScript в листинге 3 в качестве встраиваемого ресурса. Выберите файл в окне обозревателя решений, откройте лист свойств и назначьте значение Внедренного ресурса свойству Действия сборки (см. рис. 3). Этот параметр доступен как в Visual Studio, так и в Visual Web Developer.

Рис. 03. Добавление файла JavaScript в виде внедренного ресурса (щелкните, чтобы просмотреть изображение полного размера)

Создание пользовательского конструктора расширителя

Существует один последний класс, который необходимо создать для завершения расширения. Необходимо создать класс конструктора в листинге 4. Этот класс необходим для правильного поведения расширителя с помощью конструктора Visual Studio или Visual Web Developer.

Листинг 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. Сначала необходимо добавить на панель инструментов пользовательский расширитель. Выполните следующие действия:

Откройте страницу ASP.NET, дважды щелкнув страницу в окне обозревателя решений.
Щелкните правой кнопкой мыши панель элементов и выберите пункт меню "Выбрать элементы".
В диалоговом окне "Выбор элементов панели элементов" перейдите к сборке CustomExtenders.dll.
Нажмите кнопку "ОК ", чтобы закрыть диалоговое окно.

После выполнения этих шагов расширитель управления DisabledButton должен появиться на панели инструментов (см. рис. 4).

Рис. 04: Отключенная кнопка в панели элементов (нажмите, чтобы просмотреть изображение в полном размере)

Затем необходимо создать новую страницу ASP.NET. Выполните следующие действия:

Создайте новую страницу ASP.NET с именем ShowDisabledButton.aspx.
Перетащите ScriptManager на страницу.
Перетащите элемент управления TextBox на страницу.
Перетащите управляющий элемент 'Button' на страницу.
В окне "Свойства" измените свойство "Идентификатор кнопки" на значение btnSave и свойство Text на значение Save*.

Мы создали страницу со стандартными элементами управления ASP.NET: TextBox и Button.

Далее необходимо расширить элемент управления TextBox с помощью расширения DisabledButton:

Выберите параметр задачи "Добавить расширение" , чтобы открыть диалоговое окно мастера расширения (см. рис. 5). Обратите внимание, что диалоговое окно включает наше пользовательское расширение DisabledButton.
Выберите расширитель DisabledButton и нажмите кнопку ОК.

Рис. 05. Диалоговое окно мастера расширения (щелкните, чтобы просмотреть изображение полного размера)

Наконец, мы можем задать свойства расширителя DisabledButton. Свойства расширения DisabledButton можно изменить, изменив свойства элемента управления TextBox:

Выберите текстовое поле в конструкторе.
В окне "Свойства" разверните категорию "Экстендеры" (см. рис. 6).
Назначьте значение Save свойству DisabledText и значению btnSave свойству TargetButtonID.

Рис. 06. Настройка свойств расширителя (щелкните, чтобы просмотреть изображение полного размера)

При запуске страницы (путем нажатия клавиши F5) элемент управления Button изначально отключен. Как только вы начнете вводить текст в текстовое поле, элемент управления Button включен (см. рисунок 7).

Рис. 07. Средство расширения DisabledButton в действии (щелкните, чтобы просмотреть изображение полного размера)

Сводка

Цель этого руководства — объяснить, как расширить набор средств управления AJAX с помощью пользовательских элементов управления расширениями. В этом руководстве мы создали простой расширитель элемента управления DisabledButton. Мы реализовали этот расширитель, создав класс DisabledButtonExtender, поведение JavaScript DisabledButtonBehavior и класс DisabledButtonDesigner. Вы выполняете аналогичный набор шагов при создании пользовательского расширителя элементов управления.

Предыдущее

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-27