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

Artigo
10/15/2014

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 tutorial mostra como criar um controle do extensor que encapsula um cliente comportamento e links-lo para um controle de servidor Web.Comportamento do cliente adiciona funcionalidade a elementos de DOM (documento objeto Model) do navegador.O controle extensor é então associado com um ou mais tipos de controles de servidor ASP.NET para adicionar o comportamento aos controles de servidor.Você pode associar mais de um controle extensor com um controle de servidor ASP.NET.

Neste tutorial, você aprenderá como fazer o seguinte:

Criar um controle extensor que encapsula o comportamento do cliente e que é anexado ao controle de servidor Web em um página da Web ASP.NET.
Criar um comportamento do cliente que está associado ao controle extensor do servidor Web.

Manipular Eventos a partir do navegador DOM, usando o comportamento do cliente.

Observação:
Você também pode adicionar recursos de cliente avançado para ASP.NET controles de servidor sem um controle do extensor separado.Para obter um exemplo de como criar um controle de servidor Web que inclui o mesmo cliente recurso que é mostrado neste tutorial, consulte Adicionando recursos de cliente a um controle de servidor Web.

Compilar o controle extensor personalizado em um conjunto de módulos (assembly) e incorporar arquivos associados JavaScript como recursos no mesmo assembly.
Referência ao controle extensor personalizado compilado em um página da Web AJAX-Habilitada ASP.NET.

Identificando os requisitos do cliente

Este tutorial implementa um comportamento cliente simples que realça um controle em um página da Web (como um controle TextBox ou Button) quando o controle 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 tutorial requer os recursos que estão listados na tabela a seguir.

Capacidade necessária	Implementação
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 Extensor

Para encapsular o comportamento do cliente para uso por desenvolvedores de página ASP.NET, você pode usar um controle extensor.Um controle extensor é um controle de servidor Web que herda a classe abstrata ExtenderControl no namespace System.Web.UI.Controles extensores podem ser aplicados a tipos específicos de controle de servidor Web.Você identifica os tipos de controles de servidor Web para o qual um controle do extensor pode ser aplicada usando o atributo TargetControlTypeAttribute.

O controle extensor neste tutorial pode ser aplicada a qualquer tipo de controle de servidor Web.O exemplo a seguir mostra a definição de classe.

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

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

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.

Herdando a classe abstrata de Controle Extensor

A tabela a seguir lista membros da classe abstrata ExtenderControl que você deve implementar em um controle extensor.

Membro	Descrição
GetScriptDescriptors	Retorna uma coleção de ScriptDescriptor objetos que representam componentes de cliente do ECMAScript (JavaScript). 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 extensor neste tutorial usa o método GetScriptDescriptors() para definir a instância do tipo de comportamento do cliente.O controle cria um novo objeto ScriptBehaviorDescriptor (a classe ScriptBehaviorDescriptor deriva de classe ScriptDescriptor) e inclui o objeto no valor de retorno para o método GetScriptDescriptors.

O objeto ScriptBehaviorDescriptor inclui o nome da classe do cliente (Samples.FocusBehavior)e o valor ClientID para o de controle de servidor Web (de destino) associado.O nome da classe do cliente e os valores de propriedade ClientID são fornecidos para o construtor para o objeto ScriptBehaviorDescriptor.Uma referência para o controle de servidor Web de destino é fornecida como um parâmetro para o método GetScriptDescriptors(Control).A referência pode ser usada para determinar o valor ClientID do controle de servidor Web de destino, que é o valor id para o elemento DOM processado.

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

O controle extensor fornece o objeto ScriptBehaviorDescriptor 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 comportamento do cliente com todas as propriedades definidas e manipuladores de eventos.A instância do comportamento é anexada ao elemento DOM, com base na propriedade ClientID que é processada do controle de servidor Web de destino.O exemplo a seguir mostra declarativa marcação do ASP.NET que inclua um controle de servidor ASP.NET e o controle do extensor a partir deste tutorial em uma página.

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

A saída processada da página inclui uma chamada para o método $Create que identifica o comportamento do cliente para criar.Ele também fornece valores para propriedades do comportamento do cliente e o valor id do elemento DOM que o comportamento do cliente tem como destino.O exemplo a seguir mostra um método $create processado.

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

O controle extensor neste tutorial usa o método GetScriptReferences para passar o local da biblioteca de script que define o tipo do comportamento do cliente.No exemplo, este é um URL para o arquivo de script chamado FocusBehavior.js, que é criado mais tarde neste tutorial.A referência é feita, criando um novo objeto ScriptReference, e, em seguida, a configurando a propriedade Path para o 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 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 };
}

Criando o comportamento do cliente

No controle extensor, o método GetScriptReferences especifica um arquivo JavaScript (FocusBehavior.js) que contém o código do cliente para tipo de comportamento.Esta seção descreve o código JavaScript no arquivo.

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

O controle extensor neste tutorial define o nome do comportamento do cliente para Samples.FocusBehavior,e ele define duas propriedades do comportamento do cliente, highlightCssClass e nohighlightCssClass.

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

Criando o cliente namespace

O código do cliente deve chamar primeiro o registrar namespace método do Tipo classe para criar 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

The Samples.FocusBehavior classe define o Samples.FocusBehavior classe do cliente. Ele inclui duas propriedades para conter os valores de propriedade fornecidos pelo controle de servidor Web.

Definindo o protótipo de classe

Após a classe Samples.FocusBehavior é definida, o código do cliente define o protótipo para a classe.O protótipo inclui as propriedades de assessores get e set e manipuladores de eventos para os eventos onfocus e onblur do DOM elemento.Ele também inclui um método initialize que é chamado quando uma instância do comportamento é criada, e um método dispose que realiza a limpeza quando o comportamento 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.

Definindo as propriedades Obter e Definir Métodos

Cada propriedade identificada no objeto ScriptDescriptor do método GetScriptDescriptors do controle extensor 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.

Implementando os Métodos Inicialização e Apagar

O método initialize é chamado quando uma instância do comportamento é 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.FocusBehavior faz o seguinte:

Chama o método initialize da classe base Sys.UI.Behavior.
Chama o método addHandlers para adicionar representantes de eventos como manipuladores para os eventos onfocus e onblur do elemento DOM associado.Observe que a parte "em" do nome do evento (por exemplo, onfocus) não é especificado.

O método Dispose é chamado quando uma instância do comportamento 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 comportamento, como manipuladores de eventos DOM.

O método dispose da classe Sample.FocusBehavior 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 Behavior.

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.

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.

Registrando o comportamento

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

O exemplo concluído abaixo inclui uma telefonar para o notifyScriptLoaded método do Sys.aplicativo classe.Essa chamada é necessária para notificar o Microsoft AJAX Library em que o arquivo JavaScript foi carregado.

O exemplo a seguir mostra o código JavaScript completo para o Samples.FocusBehavior comportamento do cliente. O código neste tutorial requer o arquivo JavaScript será nomeado FocusBehavior.js e ser colocado no diretório de 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();

O exemplo a seguir mostra o código completo para a página ASP.NET.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <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" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <table border="0" cellpadding="2">
              <tr>
                <td><asp:Label  ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
                <td><asp:TextBox ID="TextBox1"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
                <td><asp:TextBox ID="TextBox2"  /></td>
              </tr>
              <tr>
                <td><asp:Label  ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
                <td><asp:TextBox ID="TextBox3"  /></td>
              </tr>
            </table>

            <asp:Button  ID="Button1" Text="Submit Form" />

            <sample:FocusExtender ID="FocusExtender1" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox1" />
            <sample:FocusExtender ID="FocusExtender2" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox2" />
            <sample:FocusExtender ID="FocusExtender3" 
                                  NoHighlightCssClass="LowLight"
                                  HighlightCssClass="HighLight"
                                  TargetControlID="TextBox3" />
            <sample:FocusExtender ID="FocusExtender4" 
                                  NoHighlightCssClass="LowLightButton"
                                  HighlightCssClass="HighLightButton"
                                  TargetControlID="Button1" />
        </div>

    </form>
</body>
</html>

O exemplo a seguir mostra o código completo para a classe FocusExtender.Normalmente, esse código é colocado no diretório 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 };
        }
    }
}

Compilando Dinamicamente o Controle Extensor para Teste

Qualquer controle de servidor Web, tal como o controle extensor neste tutorial, deve ser compilado antes de você poder referênciá-lo em um 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 dinamicamente seu controle extensor.

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

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

Mova os arquivos de controle de origem .cs ou .vb e qualquer classe relacionada 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 compilar um controle em um assembly e coloque o assembly na pasta bin , ou Você pode Coloque o arquivo de fonte do controle na pasta App_Code , mas Você pode não 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.

Execute a página da Web.O controle extensor é compilado dinamicamente.

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

O procedimento a seguir descreve como testar o controle extensor em um página da Web ASP.NET_AJAX-habilitada.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

Crie uma nova página da Web do ASP.NET.
Se a página ainda não tiver um controle ScriptManager, adicione uma.
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.

Adicionar um @ Register diretiva para a página e, em seguida, especifique o namespace e o TagPrefix atributo para controle do extensor

Observação:
Neste exemplo, o código de controle de servidor é na pasta App_Code portanto que Ele pode ser dinâmico aliado compilado .T herefore , um atributo de assembly não foi especificado.

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

A marcação para os controles deve incluir .
Adicione uma instância do controle FocusExtender à página.
Defina a propriedade TargetControlID do controle FocusExtender como a identificação do controle Button que você adicionou anteriormente.
Defina a propriedade HighlightCssClass para o estilo de realce de CSS e defina a propriedade NoHighlightCssClass como nenhum estilo de realce de CSS.
Execute a página e selecione cada controle.

Observe que quando você selecionar o controle Button, ele é realçado.
Altere a propriedade TargetControlID do controle FocusExtender para a identificação do controle TextBox e execute novamente a página.

Desta vez, o controle TextBox é realçado quando tiver o foco.O comportamento encapsulado no controle FocusExtender pode ser aplicado a diferentes controles de servidor ASP.NET na página.Se você desejar que o comportamento se aplique a vários controles, você pode adicionar várias instâncias do controle extensor para a página e associar um controle de servidor ASP.NET diferente a cada instância.

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

Incorporar o componente JavaScript e o código de extensão do controle de servidor Web em um conjunto de módulos (assembly) facilitará implantar seu controle extensor personalizado.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 um novo biblioteca de códigos no seu tutorial de projeto existente usando Visual Studio.Você moverá uma cópia dos arquivos do código em uma nova biblioteca de códigos no projeto para este tutorial.Compilar o controle extensor em um biblioteca de códigos cria um conjunto de módulos (assembly) que você pode implantar.

Observação:
Para executar este procedimento, você deve estar usando Microsoft Visual Studio 2005 ou Visual Studio 2008. Não é possível usar Microsoft Visual Web Developer 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

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

A caixa de diálgo New Project é exibida.
Em Tipos de Projeto, selecione Visual C# ou Visual Basic.
Em Modelos, selecione Biblioteca de Classe e o nomeie o projeto Exemplos.
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 a controle extensor do servidor personalizado para um biblioteca de códigos

Adicione as seguintes referências ao projeto de biblioteca de classes Exemplos, que são exigidos por controle extensor do servidor personalizados:
- System.Drawing
- System.Web
- System.Web.Extensions
Em Gerenciador de Soluções, copie o arquivo FocusExtender.cs ou FocusExtender.vb e o arquivo FocusBehavior.js do projeto original do tutorial para a raiz do projeto de biblioteca de classes Exemplos.
Na janela Propriedades para o arquivo FocusBehavior.js, defina Criar ação para Recurso Incorporado.

Adicione a propriedade a seguir ao arquivo AssemblyInfo.

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

[assembly: System.Web.UI.WebResource("Samples.FocusBehavior.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.

No arquivo de classe FocusExtender, altere o ScriptReference objeto na GetScriptReferences método para fazer referência ao script de controle de cliente incorporado no assembly 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.FocusBehavior.js".

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

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

Crie o projeto.

Quando termina a compilação, você terá um assembly chamado Exemplos.dll.O arquivo de código JavaScript (FocusBehavior.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.

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 extensor compilado de seu conjunto de módulos (assembly) em uma página da Web

Você agora fará referência ao controle extensor personalizado compilado em um página da Web ASP.NET_AJAX-habilitada.

Para referênciar o controle extensor personalizado em um página da Web ASP.NET_AJAX-habilitada.

Crie um novo projeto ASP.NET AJAX.
Na diretório raiz do Web Site, crie uma pasta Bin.
Copie o conjunto Samples.dll da pasta Bin\Debug ou Bin\Release do projeto de classe Exemplos para a nova pasta Bin.
Adicione um novo página da Web do ASP.NET chamado TestFocusExtender.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" %>
```
Como o controle do servidor é compilado em um assembly, a @ Register diretiva tem um Assembly atributo que referencia o conjunto de Exemplos juntamente com o Namespace e TagPrefix atributos.
Execute a página e selecione cada controle.

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

The Web page that uses the compiled custom extender 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

Adicionando recursos de cliente a um controle de servidor Web

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

Referência

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager

Compartilhar via