Compartilhar via

Adicionando recursos de cliente a um controle de servidor Web

  • Artigo

Funcionalidade de AJAX no ASP.NET permite que você expanda os recursos de um aplicativo da Web para criar um experiência de usuário rica.Você pode usar as capacidades do navegador da Web de AJAX, DHTML e ECMAScript (JavaScript) para incluir efeitos visuais, processamento de cliente como validação, por exemplo, e assim por diante.

Este tópico mostra como criar um controle de servidor Web personalizado que usa recursos do AJAX do ASP.NET para funcionalidade expandida no navegador.Você pode adicionar funcionalidade aos elementos DOM (modelo de objeto de documento) do cliente usando um controle de cliente.O controle de cliente pode ser associado com um controle de servidor implementando a interface IScriptControl no controle de servidor.

Neste tópico você aprenderá como fazer o seguinte:

  • Criar um controle de servidor Web que encapsula o comportamento do cliente e que inclui as propriedades que os usuários podem definir para controlar o comportamento.

  • Criar um controle de cliente que está associado a controle de servidor Web.

  • Manipular Eventos do navegador DOM no controle de cliente.

    Observação:

    Você também pode adicionar recursos de cliente avançado para W controles de servidor EB Criando um controle do extensor .Esse controle do extensor encapsula o cliente recursos em um comportamento e, em seguida, pode ser anexado a um controle de servidor Web .Porque um controle do extensor é não faz parte do o controle associado, você pode criar um único controle do extensor que podem ser associados a vários tipos de Servidor Web controles.Para obter um exemplo, consulte Criando um controle do extensor para associar um comportamento do cliente com um controle de servidor Web.

  • Compilar o custom controle de servidor Web em um assembly e incorporar arquivos JavaScript associados sistema autônomo recursos no mesmo conjunto de módulos (assembly).

  • Referenciar o controle de servidor de Web personalizado compilado em um ASP.NET AJAX - ativado página da Web.

Identificando os requisitos do cliente

A primeira etapa ao adicionar o comportamento do cliente a um controle de servidor Web é decidir qual o comportamento do controle estará no navegador.Em seguida, você determina a funcionalidade de cliente que é necessária para implementar o comportamento.

O controle de servidor Web é criado neste tópico implementa um comportamento cliente simples.O controle (um controle TextBox) é realçado quando ele está selecionado (ou tiver foco) no navegador.Por exemplo, o controle pode alterar a cor do plano de fundo quando ele tem o foco e em seguida retornar à cor padrão quando o foco mudar para outro controle.

Para implementar esse comportamento, o controle de cliente neste tópico exige as funções que estão listadas na tabela a seguir.

  • Uma maneira de realçar um elemento DOM.
    Para realçar um elemento DOM em um página da Web ASP.NET, o controle de cliente aplica um estilo folha de estilo em cascata (CSS), que é identificado por um nome da classe.Esse estilo é configurável pelo usuário.

  • Uma maneira de retornar o elemento DOM ao seu estado não realçado.
    Para remover o realce de um elemento DOM em um página ASP.NET, o controle de cliente aplica um estilo CSS, que é identificado por um nome da classe.Esse estilo é configurável pelo usuário e é aplicado ao elemento DOM como o estilo padrão.

  • Uma maneira de identificar quando um elemento DOM é selecionado.
    Para identificar quando um elemento DOM é selecionado (tem o foco), o controle manipula o evento onfocus do elemento DOM.

  • Uma maneira de identificar quando um elemento DOM não está selecionado.
    Para identificar quando um controle não está selecionado, o controle manipula o evento onblur do elemento DOM.

Criando o Controle de Servidor Web

Um controle de servidor Web que inclui recursos de cliente usando a funcionalidade AJAX ASP.NET é como qualquer outro controle de servidor Web.No entanto, o controle também implementa a interface IScriptControl do namespace System.Web.UI.O controle neste tópico estende o ASP.NET TextBox controle por herança do TextBox classe e a implementação do IScriptControl interface.

O exemplo a seguir mostra a definição de classe.

Public Class SampleTextBox
    Inherits TextBox
    Implements IScriptControl

public class SampleTextBox : TextBox, IScriptControl

O novo controle extensor inclui duas propriedades que são usadas para implementar os requisitos do cliente:

  • HighlightCssClassque identifica a classe de CSS que será aplicada ao elemento DOM para realçar o controle quando ele tem foco.

  • NoHighlightCssClass, que identifica a classe de CSS que será aplicada ao elemento DOM quando ele não tem foco.

Implementando a interface IScriptControl

A tabela a seguir lista membros da interface IScriptControl que você deve implementar em um controle de servidor Web.

  • GetScriptDescriptors
    Retorna uma coleção de objetos ScriptDescriptor que contêm informações sobre as instâncias de componentes do cliente que são usados com o controle de servidor Web.Isso inclui o tipo de cliente para criar, as propriedades para atribuir e os eventos a manipuladores para adicionar.

  • GetScriptReferences
    Retorna uma coleção de objetos ScriptReference que contêm informações sobre as bibliotecas de scripts de cliente para ser incluídos no controle.As bibliotecas de scripts de cliente definem os tipos de cliente e incluem qualquer outro código JavaScript que seja necessário para o controle.

O controle de servidor da Web neste tópico usa o GetScriptDescriptors método para definir a instância do tipo de controle de cliente. O controle cria um novo objeto ScriptControlDescriptor (a classe ScriptControlDescriptor deriva de classe ScriptDescriptor) e inclui o objeto no valor de retorno para o método GetScriptDescriptors.

O objeto ScriptControlDescriptor inclui o nome da classe do cliente (Samples.SampleTextBox)e o valor ClientID para o de controle de servidor Web.Esse valor é usado como o valor id para o elemento DOM processado.O nome da classe do cliente e os valores de propriedade ClientID são passadas ao construtor para o objeto ScriptControlDescriptor.

A classe ScriptControlDescriptor é usada para definir os valores de propriedade do controle do cliente, que são obtidos das propriedades de controle extensor no servidor.Para definir propriedades de controle do cliente, o controle de servidor Web usa o método ScriptComponentDescriptor.AddProperty da classe ScriptControlDescriptor.O controle de servidor Web, em seguida, especifica o nome e valor para a propriedade do controle do cliente, com base na propriedade correspondente de controle do servidor Web.Este exemplo usa um objeto ScriptControlDescriptor para definir os valores para as propriedades do highlightCssClass e nohighlightCssClass de controle do cliente.

O controle de servidor Web fornece o objeto ScriptControlDescriptor no valor de retorno para o método GetScriptDescriptors.Portanto, sempre que o controle de servidor Web é processado para o navegador, o ASP.NET processa JavaScript que cria uma instância do controle do cliente com todas as propriedades definidas e manipuladores de eventos.A Instância do controle é anexada ao elemento DOM, com base na propriedade ClientID que é processada a partir de controle de servidor Web.O exemplo a seguir mostra declarativa ASP.NET marcação que inclui o controle de servidor Web neste tópico em uma página.

<sample:SampleTextBox 
  ID="SampleTextBox1"
  HighlightCssClass="MyHighLight"
  NoHighlightCssClass="MyLowLight" />

A saída processada da página inclui uma chamada para o método $Create que identifica a classe do cliente para criar.Ele também fornece valores para propriedades do cliente e o valor id do objeto DOM que o controle de cliente está associado.O exemplo a seguir mostra um método $create processado.

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

O exemplo de controle de servidor Web usa o GetScriptReferences método para passar o local da biblioteca de script que define o tipo de controle de cliente. Neste exemplo, esta é uma URL para o arquivo de script denominado SampleTextBox.js, que você criará posteriormente.A referência é realizada, criando um novo ScriptReference objeto e, em seguida, definindo o Path propriedade para a URL do arquivo que contém o código do cliente.

O exemplo a seguir mostra as implementações dos métodos GetScriptDescriptors e GetScriptReferences.

Protected Overridable Function GetScriptReferences() As IEnumerable(Of ScriptReference)
    Dim reference As ScriptReference = New ScriptReference()
    reference.Path = ResolveClientUrl("SampleTextBox.js")

    Return New ScriptReference() {reference}
End Function

Protected Overridable Function GetScriptDescriptors() As IEnumerable(Of ScriptDescriptor)
    Dim descriptor As ScriptControlDescriptor = New ScriptControlDescriptor("Samples.SampleTextBox", Me.ClientID)
    descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
    descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

    Return New ScriptDescriptor() {descriptor}
End Function

Function IScriptControlGetScriptReferences() As IEnumerable(Of ScriptReference) Implements IScriptControl.GetScriptReferences
    Return GetScriptReferences()
End Function

Function IScriptControlGetScriptDescriptors() As IEnumerable(Of ScriptDescriptor) Implements IScriptControl.GetScriptDescriptors
    Return GetScriptDescriptors()
End Function

protected virtual IEnumerable<ScriptReference> GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Path = ResolveClientUrl("SampleTextBox.js");

    return new ScriptReference[] { reference };
}

protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
    descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
    descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

    return new ScriptDescriptor[] { descriptor };
}

IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
    return GetScriptReferences();
}

IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
    return GetScriptDescriptors();
}

Registrar o controle de cliente

Os controles de cliente devem ser registrados com o objeto ScriptManager para a página atual.Isso é conseguido chamando o método RegisterScriptControl<TScriptControl> da classe ScriptManager e fornecendo uma referência ao controle de cliente.

O exemplo de controle de servidor Web se registra sistema autônomo um controle de cliente com o ScriptManager Na página de controle. Para fazer isso, o controle substitui o método OnPreRender do controle TextBox base.Em seguida, ele chama o método RegisterScriptControl() para se registrar como um controle de cliente.Além disso, o controle registradores criados pelo método GetScriptDescriptors descritores de Script de controle.Ele faz isso chamando o método RegisterScriptDescriptors() no controle do método Render.

O exemplo a seguir mostra as chamadas para os métodos RegisterScriptControl() e RegisterScriptDescriptors().

Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
    If Not Me.DesignMode Then

        ' Test for ScriptManager and register if it exists
        sm = ScriptManager.GetCurrent(Page)

        If sm Is Nothing Then _
            Throw New HttpException("A ScriptManager control must exist on the current page.")

        sm.RegisterScriptControl(Me)
    End If

    MyBase.OnPreRender(e)
End Sub

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
    If Not Me.DesignMode Then _
      sm.RegisterScriptDescriptors(Me)

    MyBase.Render(writer)
End Sub

protected override void OnPreRender(EventArgs e)
{
    if (!this.DesignMode)
    {
        // Test for ScriptManager and register if it exists
        sm = ScriptManager.GetCurrent(Page);

        if (sm == null)
            throw new HttpException("A ScriptManager control must exist on the current page.");

        sm.RegisterScriptControl(this);
    }

    base.OnPreRender(e);
}

protected override void Render(HtmlTextWriter writer)
{
    if (!this.DesignMode)
        sm.RegisterScriptDescriptors(this);

    base.Render(writer);
}

O exemplo a seguir mostra o código completo para o controle de servidor Web.

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

    Public Class SampleTextBox
        Inherits TextBox
        Implements IScriptControl

        Private _highlightCssClass As String
        Private _noHighlightCssClass As String
        Private sm As ScriptManager

        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 Sub OnPreRender(ByVal e As EventArgs)
            If Not Me.DesignMode Then

                ' Test for ScriptManager and register if it exists
                sm = ScriptManager.GetCurrent(Page)

                If sm Is Nothing Then _
                    Throw New HttpException("A ScriptManager control must exist on the current page.")

                sm.RegisterScriptControl(Me)
            End If

            MyBase.OnPreRender(e)
        End Sub

        Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
            If Not Me.DesignMode Then _
              sm.RegisterScriptDescriptors(Me)

            MyBase.Render(writer)
        End Sub

        Protected Overridable Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Path = ResolveClientUrl("SampleTextBox.js")

            Return New ScriptReference() {reference}
        End Function

        Protected Overridable Function GetScriptDescriptors() As IEnumerable(Of ScriptDescriptor)
            Dim descriptor As ScriptControlDescriptor = New ScriptControlDescriptor("Samples.SampleTextBox", Me.ClientID)
            descriptor.AddProperty("highlightCssClass", Me.HighlightCssClass)
            descriptor.AddProperty("nohighlightCssClass", Me.NoHighlightCssClass)

            Return New ScriptDescriptor() {descriptor}
        End Function

        Function IScriptControlGetScriptReferences() As IEnumerable(Of ScriptReference) Implements IScriptControl.GetScriptReferences
            Return GetScriptReferences()
        End Function

        Function IScriptControlGetScriptDescriptors() As IEnumerable(Of ScriptDescriptor) Implements IScriptControl.GetScriptDescriptors
            Return GetScriptDescriptors()
        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
{
    public class SampleTextBox : TextBox, IScriptControl
    {
        private string _highlightCssClass;
        private string _noHighlightCssClass;
        private ScriptManager sm;

        public string HighlightCssClass
        {
            get { return _highlightCssClass; }
            set { _highlightCssClass = value; }
        }

        public string NoHighlightCssClass
        {
            get { return _noHighlightCssClass; }
            set { _noHighlightCssClass = value; }
        }

        protected override void OnPreRender(EventArgs e)
        {
            if (!this.DesignMode)
            {
                // Test for ScriptManager and register if it exists
                sm = ScriptManager.GetCurrent(Page);

                if (sm == null)
                    throw new HttpException("A ScriptManager control must exist on the current page.");

                sm.RegisterScriptControl(this);
            }

            base.OnPreRender(e);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (!this.DesignMode)
                sm.RegisterScriptDescriptors(this);

            base.Render(writer);
        }

        protected virtual IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Path = ResolveClientUrl("SampleTextBox.js");

            return new ScriptReference[] { reference };
        }

        protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
            descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
            descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

            return new ScriptDescriptor[] { descriptor };
        }

        IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            return GetScriptReferences();
        }

        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            return GetScriptDescriptors();
        }
    }
}

Criando o controle de cliente

Na controle de servidor Web, o método GetScriptReferences especifica um arquivo JavaScript (SampleTextBox.js) que contém o código do cliente para o tipo de controle.Esta seção descreve o código JavaScript no arquivo.

O código do controle do cliente coincide com os membros que foram especificados nos objetos ScriptDescriptor que são retornados pelo método GetScriptDescriptors.Um controle do cliente também pode ter membros que não correspondem aos membros na classe de controle de servidor Web.

O controle de servidor Web de exemplo define o nome do controle de cliente para Samples.SampleTextBox, e define duas propriedades do controle de cliente: highlightCssClass e nohighlightCssClass.

Para obter mais informações sobre como criar componentes de cliente e controles, consulte Criando uma Classe de Componente de Cliente Usando o Modelo Protótipo.

Registrando o Namespace do Cliente

O código do cliente deve primeiro chamar o método r egisterNamespace da classe T ype para registrar seu namespace (Samples).O exemplo a seguir mostra como registrar o namespace do cliente.

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

Definindo a classe do cliente

Depois que namespace do cliente é registrado, o código define a classe Samples.SampleTextBox.Essa classe inclui duas propriedades para armazenar os valores de propriedade fornecidos pelo controle de servidor Web.Ele também inclui doiss delegados de evento que especificam os manipuladores para os eventos onfocus e onblur do elemento DOM que está associado com o controle Samples.SampleTextBox.

O exemplo a seguir mostra a definição de classe Samples.SampleTextBox.

Samples.SampleTextBox = function(element) { 
    Samples.SampleTextBox.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

Definindo o protótipo de classe

Após a classe Samples.SampleTextBox é definida, o código do cliente define o protótipo para a classe.O protótipo inclui obter e definir os assessores para propriedades bem como manipuladores de eventos.Ele também inclui um método initialize que é chamado quando uma instância do controle é criada, e um método dispose que realiza a limpeza quando o controle não é exigido pela página.

Definindo os manipuladores de eventos para o elemento DOM

Manipuladores de eventos para uma classe de cliente são definidos como métodos de protótipo de classe.Os manipuladores são associados com delegados de evento e eventos do navegador DOM, usando o método addHandlers, que é abordado posteriormente neste tópico com o método Initialize.

O exemplo a seguir mostra os métodos para o controle Samples.SampleTextBox do manipulador de eventos.

_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;          
    }
},

Definindo as propriedades Obter e Definir Métodos

Cada propriedade identificada no objeto ScriptDescriptor do método GetScriptDescriptors do controle de servidor Web deve ter assessores do cliente correspondentes.Assessores de propriedade do cliente são definidos como os métodos get_<property name> e set_<property name> do protótipo de classe de cliente.

Observação:

Java S cript faz distinção entre diferenciar diferenciar maiúsculas de minúsculas .O get e set nomes de acessador devem corresponder exatamente os nomes de propriedade identificados no ScriptDescriptor objeto da GetScriptDescriptors método no controle de servidor Web.

O exemplo a seguir mostra as propriedades de acessadores get e set para o controle Samples.SampleTextBox.

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');
    }
}

Implementando os Métodos Inicialização e Apagar

O método initialize é chamado quando uma instância do controle é criada.Use esse método para definir valores de propriedade para criar representantes de função e para adicionar representantes como manipuladores de eventos padrão.

O método initialize da classe Samples.SampleTextBox faz o seguinte:

  • Chama o método initialize da classe base Sys.UI.Control.

  • Calls the addHandlers method to add event delegates as handlers for the onfocus and onblur events of the associated HTML element (<input type="text">).A parte "por" do evento (por exemplo, nomeonfocus) não for especificado.

O método Dispose é chamado quando uma instância do controle não é mais usada na página e será removida.Use este método para liberar quaisquer recursos que não são mais necessários para o controle, como manipuladores de eventos DOM.

O método dispose da classe Sample.SampleTextBox faz o seguinte:

  • Chama o método clearHandlers para limpar os delegados de evento como manipuladores para os eventos onfocus e onblur do elemento DOM associado.

  • Chama o método dispose da classe base Control.

    Observação:

    O dispose método de uma classe de cliente pode ser chamado mais de um time. Certifique-se que o código que você incluir no método dispose leva isso em conta.

O exemplo a seguir mostra a implementação dos métodos initialize e dispose para o protótipo Samples.SampleTextBox.

initialize : function() {
    Samples.SampleTextBox.callBaseMethod(this, 'initialize');

    this._onfocusHandler = Function.createDelegate(this, this._onFocus);
    this._onblurHandler = Function.createDelegate(this, this._onBlur);

    $addHandlers(this.get_element(), 
                 { 'focus' : this._onFocus,
                   'blur' : this._onBlur },
                 this);

    this.get_element().className = this._nohighlightCssClass;
},

dispose : function() {
    $clearHandlers(this.get_element());

    Samples.SampleTextBox.callBaseMethod(this, 'dispose');
},

Registrar o controle

A tarefa final na criação do controle do cliente é registrar a classe do cliente chamando o método registerClass.Porque a classe é um controle do cliente, a chamada para o método registerClass inclui a nome da classe de JavaScript para registrar.Ela também especifica Control como a classe base.

O exemplo a seguir mostra a chamada para o método registerClass para o controle Samples.SampleTextBox.O exemplo também inclui uma chamada para o método notifyScriptLoaded do objeto Sys.Application.Essa chamada é necessária para notificar o Microsoft AJAX Library em que o arquivo JavaScript foi carregado.

Samples.SampleTextBox.registerClass('Samples.SampleTextBox', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

O exemplo a seguir mostra o código completo para o controle do cliente Samples.SampleTextBox.

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

//
// Define the control properties.
//
Samples.SampleTextBox = function(element) { 
    Samples.SampleTextBox.initializeBase(this, [element]);

    this._highlightCssClass = null;
    this._nohighlightCssClass = null;
}

//
// Create the prototype for the control.
//

Samples.SampleTextBox.prototype = {


    initialize : function() {
        Samples.SampleTextBox.callBaseMethod(this, 'initialize');

        this._onfocusHandler = Function.createDelegate(this, this._onFocus);
        this._onblurHandler = Function.createDelegate(this, this._onBlur);

        $addHandlers(this.get_element(), 
                     { 'focus' : this._onFocus,
                       'blur' : this._onBlur },
                     this);

        this.get_element().className = this._nohighlightCssClass;
    },

    dispose : function() {
        $clearHandlers(this.get_element());

        Samples.SampleTextBox.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;          
        }
    },


    //
    // Control 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.SampleTextBox.descriptor = {
    properties: [   {name: 'highlightCssClass', type: String},
                    {name: 'nohighlightCssClass', type: String} ]
}

// Register the class as a type that inherits from Sys.UI.Control.
Samples.SampleTextBox.registerClass('Samples.SampleTextBox', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Compilação dinamicamente o controle para teste

Qualquer controle de servidor Web, sistema autônomo o controle neste tópico, deve ser compilado antes que você pode referenciá-los em uma página da Web.Você pode usar o recurso de compilação dinâmicos do ASP.NET versão 2.0 para testar controladores de servidor Web sem precisar compilar manualmente os controles em um conjunto de módulos (assembly).Isso economiza tempo quando você estiver inicialmente escrevendo e depurando o código de controle de servidor Web.As etapas a seguir mostram como usar a pasta App_Code para compilar seu controle dinamicamente.

Para colocar o controle na pasta App_Code para compilação dinâmica

  1. Crie uma pasta App_Code sob a pasta raiz da Web Site.

  2. Mova o .cs ou .vb arquivos de fonte do controle e as classes relacionadas para a pasta App_Code

    - ou -

    Se você anteriormente adicionou um conjunto de módulos (assembly) para o controle à pasta Bin, exclua o conjunto.Continue a editar os arquivos de origem na pasta App_Code.O controle código-fonte será ser compilado cada vez que você executar o seu projeto.

    Observação:

    Você pode precompilar um controle em um assembly e colocá o assembly na pasta bin , ou Você pode Coloque o arquivo de fonte do controle na pasta App_Code , mas você não poderá fazer ambos .Se você adicionar o controle para ambas as pastas, o analisador de páginas não poderão resolver uma referência ao controle em uma página e irá aumentar um erro.

  3. Execute a página da Web.

    O controle é compilado dinamicamente.

Testando o controle compilado dinamicamente em uma página da Web

O procedimento a seguir descreve como testar o controle em um ASP.NET AJAX - ativado página da Web.O código para o controle de servidor Web é compilado dinamicamente a partir da pasta App_Code.

Para usar o comportamento em um página ASP.NET

  1. Crie uma nova página da Web do ASP.NET.

  2. Se a página ainda não tiver um controle ScriptManager, adicione uma.

  3. Crie regras de estilo folhas de estilo em cascata para caixas de texto que são realçadas e para as caixas de texto que não são realçadas.

    Você pode realçar o controle de qualquer forma que desejar.Por exemplo, você pode alterar cor do plano de fundo do controle, adicionar uma borda ou alterar a fonte do texto.

  4. Adicionar um @ Register diretiva para a página e, em seguida, especifique o espaço para nome e o TagPrefix atributo para o controle, conforme mostrado no exemplo a seguir.

    Observação:

    Neste caso , o código de controle de servidor é na pasta App_Code, de modo que ele pode ser compilado dinamicamente.Portanto, um atributo de conjunto de módulos (assembly) não foi especificado.

  5. Adicione um TextBox e um controle Button para a página e defina suas propriedades ID.

    A marcação para os controles deve incluir .

  6. Adicione uma instância do controle FocusExtender à página.

  7. Defina a propriedade TargetControlID do controle FocusExtender como a identificação do controle Button que você adicionou anteriormente.

  8. Defina a propriedade HighlightCssClass para o estilo de realce de CSS e defina a propriedade NoHighlightCssClass como nenhum estilo de realce de CSS.

  9. Execute a página e selecione cada controle.

    Quando você selecionar o controle Button, ele é realçado.

O exemplo a seguir mostra uma página ASP.NET que usa o comportamento que foi criado neste tópico.

Compilando o controle em um conjunto de módulos (assembly)

Incorporando o componente JavaScript e código de extensão do controle de servidor Web em um assembly facilitará o controle personalizado implantar.Criar um conjunto de módulos (assembly) também facilita gerenciar o controle de versão para o controle.Além disso, um controle não pode ser adicionado à caixa de ferramentas de um designer de visual, a menos que ele seja compilado em um conjunto de módulos (assembly).

O procedimento a seguir descreve como criar uma nova biblioteca de código no seu projeto existente do tópico usando o Visual Studio.Você irá mover uma cópia dos seus arquivos de código para uma nova biblioteca de código no projeto para este tópico.Compilar o controle em uma biblioteca de códigos resultará em um assembly que você pode implantar.

Observação:

Para executar este procedimento, você deve estar usando Microsoft Visual Studio 2005.Não é possível usar Visual Web Developer 2005 Express Edition, pois Visual Web Developer Express Edition não permite que você crie dois projetos na mesma solução.

Para adicionar um novo biblioteca de códigos a seu projeto existente

  1. No Visual Studio, no menu Arquivo, clique em Novo e então em Projeto.

    A caixa de diálgo New Project é exibida.

  2. Em Tipos de Projeto, selecione Visual C# ou Visual Basic.

  3. Em Modelos, selecione Biblioteca de Classe e o nomeie o projeto Exemplos.

  4. Na lista Solução, selecione Adicionar para Solução e em seguida, clique em OK.

    A biblioteca de classes de exemplos é adicionado à solução existente.

Para mover o controle de servidor personalizado em uma biblioteca de código

  1. Adicione as seguintes referências ao projeto de biblioteca de classes de Exemplos, que são necessários pelo controle de servidor personalizado:

    • System.Drawing

    • System.Web

    • System.Web.Extensions

  2. In O gerenciador de soluções, copie o arquivo SampleTextBox.cs ou SampleTextBox.vb e o arquivo SampleTextBox.js do projeto original e, em seguida, adicione os arquivos copiados para a raiz do projeto de biblioteca de classes Exemplos.

  3. Na janela Propriedades para o arquivo SampletextBox.js, defina Criar ação para Recurso Incorporado.

  4. Adicione a propriedade a seguir ao arquivo AssemblyInfo.

    <Assembly: WebResource("Samples.SampleTextBox.js", "text/javascript")>

    [assembly: System.Web.UI.WebResource("Samples.SampleTextBox.js", "text/javascript")]
    Observação:

    O arquivo AssemblyInfo.vb está a Meu projeto o nó do gerenciador de soluções.Se você não vir todos os arquivos no Meu projeto nó, faça o seguinte: sobre o Projeto menu, clicar Mostrar todos os arquivos.O arquivo AssemblyInfo.cs está no nó Propriedades do Gerenciador de Soluções.

    A definição WebResource para arquivos JavaScript deve seguir um convenção de nomeclatura de [ namespace de assembly]. [nome_do_arquivo JavaScript] .js.

    Observação:

    Por padrão, Visual Estúdio Define o espaço para nome de assembly para o nome do assembly.Você pode editar o namespace do assembly nas propriedades do assembly.

  5. No arquivo de classe SampleTextBox, altere o objeto ScriptReference no método GetScriptReferences para fazer referência ao script de controle de cliente que está incorporado no conjunto "Exemplos".Para fazer isso, faça as seguintes alterações:

    • Substitua a propriedade Path com uma propriedade Assembly definida para "Exemplos".

    • Adicione uma propriedade Name e defina seu valor para "Samples.SampleTextBox.js".

    O exemplo a seguir mostra o resultado dessa alteração.

            Protected Overridable Function GetScriptReferences() As IEnumerable(Of ScriptReference)
            Dim reference As ScriptReference = New ScriptReference()
            reference.Assembly = "Samples"
            reference.Name = "Samples.SampleTextBox.js"

            Return New ScriptReference() {reference}
        End Function

            protected virtual IEnumerable<ScriptReference> GetScriptReferences()
        {
            ScriptReference reference = new ScriptReference();
            reference.Assembly = "Samples";
            reference.Name = "Samples.SampleTextBox.js";

            return new ScriptReference[] { reference };
        }

  6. Crie o projeto.

    Quando termina a compilação, você terá um assembly chamado Exemplos.dll.O arquivo de código JavaScript (SampleTextBox.js) é incorporado neste conjunto de módulos (assembly) sistema autônomo um recurso.

    Observação:

    Lembre-se recompilar o projeto de biblioteca de classes qualquer vez que você Adicionar novos arquivos de fonte ou alterar os já existentes.

Usando o controle compilado do seu assembly em uma página da Web

Você agora irá referenciar o controle personalizado compilado em um ASP.NET AJAX - ativado página da Web.

Para referenciar o controle personalizado em uma página da Web do ASP.NET habilitado por AJAX

  1. Crie um novo projeto ASP.NET AJAX.

  2. Na diretório raiz do Web Site, crie uma pasta Bin.

  3. Copie o conjunto Samples.dll da pasta Bin\Debug ou Bin\Release do projeto de classe Exemplos para a nova pasta Bin.

  4. Adicione um novo página da Web do ASP.NET chamado TestSampleTextBoxAssembly.aspx e, em seguida, adicione a seguinte marcação para a nova página.

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

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

    Porque o controle de servidor é compilado em um conjunto de módulos (assembly), a diretiva @ Register tem um atributo Assembly que faz referência ao assembly "Samples" além dos atributos Namespace e TagPrefix.

  5. Execute a página e selecione cada controle.

    Quando você selecionar o controle SampleTextBox, ele é realçado.

The Web page that uses the compiled custom control includes the Assembly attribute in the @ Register directive.Caso contrário, é o mesmo que a página da Web você usou para o controle na pasta App_Code.

Consulte também

Conceitos

Criando um controle do extensor para associar um comportamento do cliente com um controle de servidor Web

Usando o controle ASP.NET UpdatePanel com controles associado a dados

Referência

Classe de Sys.UI.Controlar

IScriptControl

ScriptManager