Создание управляющего элемента-расширителя для связи клиентского расширения функциональности с серверным веб-элементом управления

Статья
10/22/2014

Обновлен: Ноябрь 2007

Функциональность AJAX в ASP.NET позволяет расширить возможности веб-приложений для создания обширного взаимодействия с пользователем. Можно использовать функциональные возможности ECMAScript (JavaScript), DHTML и технологии AJAX на стороне веб-обозревателя для включения визуальных эффектов, клиентской обработки, такой как проверка, и т. д.

В этом руководстве описывается создание управляющего элемента-расширителя, инкапсулирующего клиентское расширение функциональности и связывающего его с серверным веб-элементом управления. Клиентское расширение функциональности расширяет функциональные возможности элементов модели DOM веб-обозревателя. Этот управляющий элемент-расширитель затем связывается с одним или несколькими типами серверных элементов управления ASP.NET, чтобы добавить данное расширение функциональности в эти элементы. Можно связать несколько управляющих элементов-расширителей с серверным элементом управления ASP.NET.

В данном руководстве изучаются следующие действия:

Создание управляющего элемента-расширителя, инкапсулирующего клиентское расширение функциональности, и последующее присоединение его к серверным веб-элементам управления на странице ASP.NET.
Создание клиентского расширения функциональности, связанного с управляющим элементом-расширителем веб-сервера.

Обработка событий от веб-обозревателя DOM с помощью клиентского расширения функциональности.

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

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

Компиляция пользовательских управляющих элементов-расширителей в сборку и включение связанных файлов JavaScript в качестве ресурсов в ту же сборку.
Создание ссылок на скомпилированный пользовательский управляющий элемент-расширитель на веб-странице ASP.NET с поддержкой AJAX.

Определение требований клиентов

В данном руководстве реализуется простое клиентское расширение функциональности, которое выделяет элемент управления на странице (например элемент управления TextBox или Button) при выборе этого элемента управления (или получении им фокуса) в веб-обозревателе. Например, при перемещении фокуса в элемент управления этот элемент мог бы изменять цвет фона, а при перемещении фокуса в другой элемент управления возвращать цвет по умолчанию.

Для реализации такого поведения клиентскому элементу управления необходимы возможности, перечисленные в следующей таблице.

Обязательная возможность	Реализация
Способ подсветки элемента DOM.	Чтобы выделить элемент DOM на странице ASP.NET методом подсветки, клиентский элемент управления применяет стиль из каскадной таблицы стилей (CSS), который определяется именем класса. Данный стиль настраивается пользователем.
Способ вернуть элемент DOM в состояние без подсветки.	Чтобы удалить подсветку элемента DOM на странице ASP.NET, клиентский элемент управления применяет стиль CSS, который определяется именем класса. Данный стиль настраивается пользователем и применяется к элементу DOM как стиль по умолчанию.
Способ определения выбора пользователем элемента DOM.	Для определения, выбран ли элемент DOM (имеет ли он фокус), элемент управления обрабатывает событие onfocus элемента DOM.
Способ определения отсутствия выбора элемента DOM.	Чтобы определить, что элемент DOM уже не выбран, элемент управления обрабатывает событие onblur элемента DOM.

Создание управляющего элемента-расширителя

Чтобы инкапсулировать клиентское поведение для использования разработчиками страниц ASP.NET, можно использовать управляющий элемент-расширитель. Управляющий элемент-расширитель является серверным веб-элементом управления, который наследуется от абстрактного класса ExtenderControl в пространстве имен System.Web.UI. Управляющие элементы-расширители могут применяться к определенным типам серверных веб-элементов управления. Типы серверных веб-элементов управления, к которым могут применяться управляющие элементы-расширители, можно определить с помощью атрибута TargetControlTypeAttribute.

Управляющий элемент-расширитель из этого руководства может применяться для любого типа серверных веб-элементов управления. Ниже приводится пример определения класса.

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

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

Новый управляющий элемент-расширитель содержит два свойства, используемые для реализации требований клиента:

HighlightCssClass, определяющее класс CSS, который будет применяться к элементу DOM для его выделения при наличии фокуса.
NoHighlightCssClass, определяющее класс CSS, который должен быть применен к элементу DOM, не имеющему фокус.

Наследование от абстрактного класса ExtenderControl

Далее перечислены члены абстрактного класса ExtenderControl, которые необходимо реализовать в управляющем элементе-расширителе.

Член	Описание
GetScriptDescriptors	Возвращает коллекцию объектов ScriptDescriptor, представляющих клиентские компоненты ECMAScript (JavaScript). Сюда входят создаваемые клиентские типы, назначаемые свойства и события, для которых добавляются обработчики.
GetScriptReferences	Возвращает коллекцию объектов ScriptReference, содержащих сведения о библиотеках клиентских сценариев, которые должны быть включены в элемент. Библиотеки клиентских сценариев определяют клиентские типы, а также включают другой код JavaScript, необходимый для реализации элемента управления.

GetScriptDescriptors

Возвращает коллекцию объектов ScriptDescriptor, представляющих клиентские компоненты ECMAScript (JavaScript). Сюда входят создаваемые клиентские типы, назначаемые свойства и события, для которых добавляются обработчики.

GetScriptReferences

Возвращает коллекцию объектов ScriptReference, содержащих сведения о библиотеках клиентских сценариев, которые должны быть включены в элемент. Библиотеки клиентских сценариев определяют клиентские типы, а также включают другой код JavaScript, необходимый для реализации элемента управления.

Управляющий элемент-расширитель в этом руководстве использует метод GetScriptDescriptors(), чтобы определить экземпляр клиентского типа поведения. Этот элемент управления создает новый объект ScriptBehaviorDescriptor (класс ScriptBehaviorDescriptor является производным от класса ScriptDescriptor) и включает объект в возвращаемое значение метода GetScriptDescriptors.

Объект ScriptBehaviorDescriptor включает имя класса клиента (Samples.FocusBehavior) и значение ClientID для связанного (целевого) серверного веб-элемента управления. Имя клиентского класса и значение свойства ClientID передаются в конструктор объекта ScriptBehaviorDescriptor. Ссылка на целевой серверный веб-элемент управления передается в метод GetScriptDescriptors(Control) в качестве параметра. Ссылку можно использовать для определения значения ClientID целевого серверного веб-элемента управления, которое является значением id для отображаемого элемента DOM.

Класс ScriptBehaviorDescriptor используется для задания значений свойств клиентского расширения функциональности, которые извлекаются из свойств управляющего элемента-расширителя на сервере. Чтобы определить свойства клиентского расширения функциональности, управляющий элемент-расширитель использует метод AddProperty класса ScriptBehaviorDescriptor. Затем управляющий элемент-расширитель задает имя и значение свойства клиентского расширения функциональности на основе соответствующего свойства серверного управляющего элемента-расширителя. В этом примере используется объект ScriptBehaviorDescriptor для задания значений свойств highlightCssClass и nohighlightCssClass клиентского расширения функциональности.

Управляющий элемент-расширитель предоставляет объект ScriptBehaviorDescriptor для возвращаемого значения метода GetScriptDescriptors. Таким образом, каждый раз, когда серверный веб-элемент управления отображается в веб-обозревателе, ASP.NET отображает JavaScript, который создает экземпляр клиентского расширения функциональности со всеми заданными свойствами и обработчиками событий. Этот экземпляр расширения функциональности присоединяется к элементу DOM в зависимости от свойства ClientID, которое формируется из целевого серверного веб-элемента управления. В следующем примере демонстрируется декларативная разметка ASP.NET, включающая серверный элемент управления ASP.NET и управляющий элемент-расширитель из этого руководства.

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

Выходные данные при визуализации страницы включают вызов метода $create, идентифицирующего создаваемое клиентское расширение функциональности. Также предоставляются значения для свойств клиентского расширения функциональности и значение id элемента DOM, являющегося целевым для этого клиентского расширения. В следующем примере показывается представляемый метод $create:

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

Управляющий элемент-расширитель в этом руководстве использует метод GetScriptReferences для передачи расположения библиотеки сценариев, которая определяет тип клиентского расширения функциональности. В данном примере это URL-адрес файла сценария с именем FocusBehavior.js, который создается далее в этом руководстве. Ссылка создается путем создания нового объекта 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.

Дополнительные сведения о создании клиентских компонентов и расширений функциональности см. в разделе Создание клиентского класса компонентов с помощью модели прототипа.

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

Клиентский код сначала должен вызвать метод registerNamespace класса Type для создания его пространства имен (Samples). В следующем примере показано, как зарегистрировать клиентское пространство имен.

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

Определение клиентского класса

Класс Samples.FocusBehavior определяет клиентский класс Samples.FocusBehavior. Он содержит два свойства для хранения значений свойств, предоставляемых серверным веб-элементом управления.

Определение прототипа класса

После определения класса Samples.FocusBehavior клиентский код определяет прототип для этого класса. Прототип включает методы доступа get и set свойства и обработчики для событий onfocus и onblur элемента DOM. Он также включает метод initialize, вызываемый при создании экземпляра элемента управления с изменяемым поведением, и метод dispose, выполняющий очистку, когда расширение функциональности более не требуется на данной странице.

Определение обработчиков событий для элемента DOM

Обработчики событий для клиентского класса определяются как методы прототипа класса. Данные обработчики связаны с делегатами событий и с событиями веб-обозревателя DOM с помощью методов addHandlers и initialize, которые рассматриваются в данном разделе позже.

Определение методов Get и Set для свойства

Каждое свойство, определенное в объекте ScriptDescriptor метода GetScriptDescriptors управляющего элемента-расширителя, должно иметь соответствующие клиентские методы доступа. Клиентские методы доступа свойства определяются как методы get_<property name> и set_<property name> прототипа клиентского класса.

Реализация методов Initialize и Dispose

Метод initialize вызывается при создании экземпляра расширения функциональности. Этот метод служит для задания значения свойств по умолчанию, создания делегатов функций и добавления делегатов в качестве обработчиков событий.

Метод initialize класса Samples.FocusBehavior выполняет следующие действия:

Вызывает метод initialize базового класса Sys.UI.Behavior.
Вызывает метод addHandlers для добавления делегатов событий в качестве обработчиков событий onfocus и onblur связанного элемента DOM. Обратите внимание, что часть имени события "on" (например onfocus) не указана.

Метод dispose вызывается, когда экземпляр расширения функциональности больше не используется на странице и удаляется. Этот метод служит для освобождения любых ресурсов, которые больше не требуются расширению функциональности, например таких, как обработчики событий DOM.

Метод dispose класса Sample.FocusBehavior выполняет следующие действия:

Вызывает метод clearHandlers для очистки делегатов событий как обработчиков событий onfocus и onblur связанного элемента DOM.

Вызывает метод dispose базового класса Behavior.

Примечание.
Метод dispose клиентского класса может вызываться несколько раз. Убедитесь, что код, включенный в метод dispose, учитывает этот факт.

Регистрация расширения функциональности

Последнее, что нужно сделать при создании клиентского расширения функциональности, это зарегистрировать клиентский класс с помощью метода registerClass. Поскольку этот класс является клиентским расширением функциональности, вызов метода registerClass включает имя класса JavaScript для регистрации. Он также задает Behavior в качестве базового класса.

В полном примере, приведенном ниже, также содержится вызов метода notifyScriptLoaded класса Sys.Application. Данный вызов необходим для того, чтобы Microsoft AJAX (библиотека) получила уведомление о загрузке файла JavaScript.

В следующем примере показан полный код JavaScript клиентского расширения функциональности Samples.FocusBehavior. Для выполнения кода, приведенного в этом руководстве, требуется, чтобы у файла 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 };
        }
    }
}

Динамическая компиляция управляющего элемента-расширителя для тестирования

Любой серверный веб-элемент управления, например управляющий элемент-расширитель из данного руководства, необходимо скомпилировать, прежде чем ссылаться на него на веб-странице. Для тестирования серверных веб-элементов управления без ручной компиляции в сборку можно использовать функцию динамической компиляции ASP.NET версии 2.0. Данная функция позволяет сэкономить время, затрачиваемое при написании и отладке кода серверного веб-элемента управления. В следующих примерах показано, как использовать папку App_Code для динамической компиляции управляющего элемента-расширителя.

Размещение управляющего элемента-расширителя в папке App_Code для динамической компиляции

Создайте папку App_Code в корневой папке веб-узла.

Переместите исходные CS- и VB-файлы элемента управления и все связанные классы в папку App_Code.

—либо—

Если сборка для элемента управления была ранее добавлена в папку Bin, удалите эту сборку. Продолжайте редактирование исходных файлов в папке App_Code. Исходные коды элемента управления будут компилироваться каждый раз при запуске проекта.

Примечание.
Следует выбрать что-нибудь одно: либо скомпилировать элемент управления в сборку и поместить сборку в папку Bin, либо поместить исходные коды в папку App_Code, но не то и другое сразу. Если элемент управления добавить в обе папки, то анализатор страниц не сможет разрешить ссылку на этот элемент управления на странице, и возникнет ошибка.

Следует выбрать что-нибудь одно: либо скомпилировать элемент управления в сборку и поместить сборку в папку Bin, либо поместить исходные коды в папку App_Code, но не то и другое сразу. Если элемент управления добавить в обе папки, то анализатор страниц не сможет разрешить ссылку на этот элемент управления на странице, и возникнет ошибка.

Запустите страницу. Управляющий элемент-расширитель будет динамически скомпилирован.

Проверка динамически скомпилированного управляющего элемента-расширителя страницы

Следующая процедура описывает проверку управляющего элемента-расширителя на ASP.NET-странице со включенной технологией AJAX. Код для серверного веб-элемента управления динамически компилируется в папке App_Code.

Использование расширения функциональности на странице ASP.NET

Создайте новую страницу ASP.NET.
Если на ней еще нет элемента управления ScriptManager, добавьте его.
Создайте правила стилей CSS для выделяемых и не выделяемых текстовых полей.

Элемент управления можно выделять как угодно. Например, можно изменять цвет фона элемента управления, добавлять границу или изменять шрифт текста.

Добавьте директиву @ Register на страницу, после чего укажите пространство имен и атрибут TagPrefix для управляющего элемента-расширителя.

Примечание.
В этом примере код серверного элемента управления находится в папке App_Code, так что он может компилироваться динамически. Поэтому атрибут сборки не указывается.

Добавьте на страницу элементы TextBox и Button и задайте свойство Id для каждого из них.

В разметку для элементов управления необходимо включать runat="server".
Добавьте на страницу экземпляр элемента управления FocusExtender.
Установите в качестве значения свойства TargetControlID элемента управления FocusExtender идентификатор элемента управления Button, который был добавлен ранее.
Установите для свойства HighlightCssClass стиль CSS с выделением, а для свойства NoHighlightCssClass — стиль CSS без выделения.
Запустите страницу и последовательно выбирайте каждый элемент управления.

Обратите внимание, что когда выбирается элемент Button, он выделяется.
Измените значение свойства TargetControlID элемента управления FocusExtender на идентификатор элемента управления TextBox и запустите страницу заново.

На этот раз при получении фокуса выделяется элемент TextBox. Расширение функциональности, инкапсулированное в элементе управления FocusExtender, может применяться для различных серверных элементов управления ASP.NET на этой странице. Если требуется применить это расширение функциональности к нескольким элементам управления, можно добавить на страницу несколько экземпляров управляющего элемента-расширителя и связать каждый экземпляр с различными серверными элементами управления ASP.NET.

Компиляция управляющего элемента-расширителя в сборку

Внедрение компонента JavaScript и кода расширения серверного веб-элемента управления в сборку поможет упростить развертывание пользовательского управляющего элемента-расширителя. Создание сборки также облегчает управление версиями элемента управления. Кроме того, элементы управления невозможно добавить на панель элементов конструктора до тех пор, пока они не будут скомпилированы в сборку.

Следующая процедура описывает способ создания новой библиотеки кода в существующем учебном проекте с помощью Visual Studio. Будет выполнено перемещение копий файлов кода в новую библиотеку в проекте для данного руководства. Компиляция управляющего элемента-расширителя в библиотеку кода приведет к созданию сборки, которую можно развернуть.

Примечание.
Для выполнения данной процедуры необходимо использовать Microsoft Visual Studio 2005 или Visual Studio 2008. Нельзя использовать Microsoft Visual Web Developer, экспресс-выпуск, поскольку Visual Web Developer, экспресс-выпуск не позволяет создавать два проекта в одном решении.

Для выполнения данной процедуры необходимо использовать Microsoft Visual Studio 2005 или Visual Studio 2008. Нельзя использовать Microsoft Visual Web Developer, экспресс-выпуск, поскольку Visual Web Developer, экспресс-выпуск не позволяет создавать два проекта в одном решении.

Добавление новой библиотеки кода в существующий проект

В Visual Studio в меню Файл выберите команду Создать и затем пункт Проект.

Откроется диалоговое окно Создание проекта.
В группе Типы проектов выберите Visual C# или Visual Basic.
В группе Шаблоны выберите Библиотека классов и дайте проекту имя "Samples".
В списке Решение выберите Добавить в решение и нажмите кнопку OK.

Библиотека классов "Samples" добавится к существующему решению.

Помещение пользовательского серверного управляющего элемента-расширителя в библиотеку кода

Добавьте следующие ссылки в проект библиотеки классов "Samples" (эти ссылки необходимы для пользовательского серверного управляющего элемента-расширителя):
- System.Drawing
- System.Web
- System.Web.Extensions
В обозревателе решений скопируйте файл FocusExtender.cs или файлы FocusExtender.vb и FocusBehavior.js из исходного учебного проекта в корневой каталог проекта библиотеки классов "Samples".
В окне Свойства файла SampleTextBox.js установите для свойства Действие при построении значение Внедренный ресурс.

Добавьте в файл AssemblyInfo следующее свойство.

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

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

Примечание.
Файл AssemblyInfo.vb находится в узле Мой проект обозревателя решений. Если в узле Мой проект нет никаких файлов, то в меню Проект выберите пункт Показать все файлы. Файл AssemblyInfo.cs находится в узле Свойства обозревателя решений.

Файл AssemblyInfo.vb находится в узле Мой проект обозревателя решений. Если в узле Мой проект нет никаких файлов, то в меню Проект выберите пункт Показать все файлы. Файл AssemblyInfo.cs находится в узле Свойства обозревателя решений.

Определение WebResource для файлов JavaScript должно соответствовать соглашению об именах из файла [пространство_имен_сборки].[имя_файла_JavaScript].js.

Примечание.
По умолчанию Visual Studio устанавливает в качестве имени пространства имен сборки имя этой сборки. Пространство имен сборки можно изменить в свойствах сборки.

В файле класса FocusExtender измените объект ScriptReference в методе GetScriptReferences, чтобы он ссылался на сценарий клиентского элемента управления, внедренного в сборку Samples. Для этого внесите следующие изменения:
- Замените свойство Path свойством Assembly, имеющим значение "Samples".
- Добавьте свойство 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) внедряется в эту сборку в качестве ресурса.

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

Использование скомпилированного управляющего элемента-расширителя из его сборки на странице

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

Создание ссылки на скомпилированный пользовательский управляющий элемент-расширитель на странице ASP.NET с технологией AJAX

Создайте новый проект AJAX ASP.NET.
В корневом каталоге веб-узла создайте папку Bin.
Скопируйте сборку Samples.dll из папки Bin\Debug или Bin\Release проекта библиотеки классов "Samples" в новую папку Bin.
Добавьте новую страницу ASP.NET с именем TestFocusExtender.aspx, а затем добавьте в нее следующую разметку:
```
<%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>
```
```
<%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>
```
Так как серверный элемент управления компилируется в сборку, директива @ Register содержит атрибут Assembly, который ссылается на сборку Samples в дополнение к атрибутам Namespace и TagPrefix.
Запустите страницу и последовательно выбирайте каждый элемент управления.

Когда выбирается элемент управления FocusBehavior, он выделяется.

Страница, использующая скомпилированный пользовательский управляющий элемент-расширитель, включает атрибут Assembly в директиве @ Register. В остальном это та же страница, которая использовалась для элемента управления в папке App_Code.

См. также

Основные понятия

Добавление клиентских возможностей серверным веб-элементам управления

Использование элемента управления UpdatePanel ASP.NET с элементами управления с привязкой к данным

Ссылки

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager

Поделиться через