Crear un control extensor para asociar un comportamiento de cliente con un control de servidor web

Actualización: noviembre 2007

La funcionalidad de ASP.NET AJAX permite ampliar las funciones de una aplicación web para crear una experiencia del usuario más satisfactoria. Puede utilizar las funciones de ECMAScript (JavaScript), DHTML y AJAX del explorador web para incluir efectos visuales, procesos de cliente como la validación, etc.

Este tutorial muestra cómo crear un control extensor que encapsula un comportamiento de cliente y lo vincula a un control de servidor web. El comportamiento de cliente agrega funcionalidad a los elementos del Modelo de objetos de documento (DOM) del explorador. El control extensor se asocia después a uno o varios tipos de controles de servidor ASP.NET para agregar el comportamiento a dichos controles. Puede asociar varios controles extensores a un control de servidor ASP.NET.

En este tutorial, aprenderá a hacer lo siguiente:

• Crear un control extensor que encapsule el comportamiento del cliente y asociarlo a controles de servidor web en una página web ASP.NET.

• Crear un comportamiento del cliente que esté asociado al control extensor del servidor web.

• Controlar eventos desde el DOM del explorador utilizando el comportamiento del cliente.

  Nota:
  Puede agregar también funciones avanzadas del cliente a controles de servidor ASP.NET sin un control extensor independiente. Para obtener un ejemplo de cómo crear un control de servidor web que incluya las mismas funciones de cliente que se describen en este tutorial, vea Agregar funcionalidad de cliente a un control de servidor web.

• Compilar el control extensor personalizado en un ensamblado e incrustar los archivos JavaScript asociados como recursos en el mismo ensamblado.

• Hacer referencia al control extensor personalizado compilado en una página web habilitada para AJAX de ASP.NET.

Identificar los requisitos de cliente

En este tutorial se implementa un comportamiento de cliente simple que resalta un control en una página web (como el control TextBox o Button) cuando el control está seleccionado (o tiene el foco) en el explorador. Por ejemplo, el control podría cambiar el color de fondo cuando tiene el foco y, a continuación, podría volver al color predeterminado cuando el foco se mueve a otro control.

Para implementar este comportamiento, el control de cliente de este tutorial necesita las funciones que se indican en la tabla siguiente.

Crear el control extensor

Para encapsular el comportamiento del cliente para que puedan utilizarlo desarrolladores de páginas ASP.NET, puede utilizar un control extensor. Un control extensor es un control de servidor web que hereda la clase abstracta ExtenderControl en el espacio de nombres System.Web.UI. Los controles extensores se pueden aplicar a tipos de controles de servidor web específicos Los tipos de controles de servidor web a los que se puede aplicar un control extensor se identifican mediante el atributo TargetControlTypeAttribute.

El control extensor de este tutorial se puede aplicar a cualquier tipo de control de servidor web. En el ejemplo siguiente se muestra la definición de la clase.

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

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

El nuevo control extensor incluye dos propiedades que se utilizan para implementar los requisitos del cliente:

• HighlightCssClass, que identifica la clase CSS que se aplicará al elemento DOM para resaltar el control cuando tiene el foco.

• NoHighlightCssClass, que identifica la clase CSS que se aplicará al elemento DOM cuando no tiene el foco.

Heredar la clase abstracta ExtenderControl

En la tabla siguiente se muestran los miembros de la clase abstracta ExtenderControl que debe implementar en un control extensor.

El control extensor de este tutorial utiliza el método GetScriptDescriptors() para definir la instancia del tipo de comportamiento del cliente. El control crea un nuevo objeto ScriptBehaviorDescriptor (la clase ScriptBehaviorDescriptor se deriva de la clase ScriptDescriptor) e incluye el objeto en el valor devuelto para el método GetScriptDescriptors.

El objeto ScriptBehaviorDescriptor incluye el nombre de la clase cliente (Samples.FocusBehavior) y el valor ClientID del control de servidor web (de destino) asociado. El nombre de la clase cliente y los valores de la propiedad ClientID se pasan al constructor del objeto ScriptBehaviorDescriptor. Una referencia al control de servidor web de destino se proporciona como parámetro al método GetScriptDescriptors(Control). La referencia se puede utilizar para determinar el valor de ClientID del control de servidor web de destino, que es el valor de id para el elemento DOM representado.

La clase ScriptBehaviorDescriptor se utiliza para establecer los valores de propiedad del comportamiento del cliente, que se obtienen de las propiedades del control extensor del servidor. Para definir las propiedades del comportamiento del cliente, el control extensor utiliza el método AddProperty de la clase ScriptBehaviorDescriptor. El control extensor especifica, a continuación, el nombre y el valor de la propiedad del comportamiento del cliente, en función de la propiedad correspondiente del control extensor del servidor. En este ejemplo se utiliza un objeto ScriptBehaviorDescriptor para establecer los valores de las propiedades highlightCssClass y nohighlightCssClass en el comportamiento del cliente.

El control extensor proporciona el objeto ScriptBehaviorDescriptor en el valor devuelto del método GetScriptDescriptors. Por consiguiente, cada vez que el control de servidor web se representa en el explorador, ASP.NET representa JavaScript que crea una instancia del comportamiento del cliente con todas las propiedades y controladores de eventos definidos. La instancia de comportamiento se asocia al elemento DOM, en función de la propiedad ClientID representada desde el control de servidor web de destino. En el ejemplo siguiente se muestra marcado de ASP.NET declarativo que incluye un control de servidor ASP.NET y el control extensor de este tutorial en una página.

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

El resultado representado de la página incluye una llamada al método $create que identifica el comportamiento del cliente que se va a crear. Proporciona también las propiedades del comportamiento del cliente y el valor id del elemento DOM asignado por el comportamiento del cliente. En el ejemplo siguiente se muestra un método $create representado.

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

El control extensor de este tutorial utiliza el método GetScriptReferences para pasar la ubicación de la biblioteca de scripts que define el tipo de comportamiento del cliente. En el ejemplo, es la dirección URL del archivo de script denominado FocusBehaviour.js, que se crea más adelante en el tutorial. La referencia se realiza creando un nuevo objeto ScriptReference y, a continuación, estableciendo la propiedad Path en la dirección URL del archivo que contiene el código de cliente.

En el ejemplo siguiente se muestran las implementaciones de los métodos GetScriptDescriptors y 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 };
}

Crear el comportamiento del cliente

En el control extensor, el método GetScriptReferences especifica un archivo JavaScript (FocusBehavior.js) que contiene el código de cliente para el tipo de comportamiento. En esta sección se describe el código JavaScript de ese archivo.

El código del comportamiento del cliente coincide con los miembros especificados en los objetos ScriptDescriptor devueltos por el método GetScriptDescriptors. Un comportamiento del cliente también puede tener miembros que no se correspondan con los miembros del control extensor del servidor.

El control extensor de este tutorial establece el nombre del comportamiento del cliente en Samples.FocusBehavior y define dos propiedades del comportamiento del cliente, highlightCssClass y nohighlightCssClass.

Para obtener más información sobre cómo crear componentes y comportamientos de cliente, vea Crear una clase de componente de cliente utilizando el modelo de prototipo.

Crear el espacio de nombres de cliente

El código de cliente debe llamar primero al método registerNamespace de la clase Type para crear su espacio de nombres (Samples). En el ejemplo siguiente se muestra cómo registrar el espacio de nombres de cliente.

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

Definir la clase de cliente

La clase Samples.FocusBehavior define la clase de cliente Samples.FocusBehavior. Incluye dos propiedades que guardan los valores de propiedad proporcionados por el control de servidor web.

Definir el prototipo de la clase

Una vez definida la clase Samples.FocusBehavior, el código de cliente define el prototipo de la clase. El prototipo incluye los descriptores de acceso de propiedad get y set y los controladores de eventos para los eventos onblur y onfocus del elemento DOM. También incluye un método initialize al que se llama cuando se crea una instancia del comportamiento, y un método dispose que realiza la limpieza cuando la página ya no necesita el comportamiento.

Definir los controladores de eventos del elemento DOM

Los controladores de eventos de una clase de cliente se definen como métodos del prototipo de la clase. Los controladores se asocian a delegados de eventos y a eventos del DOM del explorador utilizando el método addHandlers, que se describe más adelante en este tema con el método initialize.

Definir los métodos de propiedad get y set

Cada propiedad identificada en el objeto ScriptDescriptor del método GetScriptDescriptors del control extensor debe tener los descriptores de acceso de cliente correspondientes. Los descriptores de acceso de propiedad de cliente se definen como métodos get_<property name> y set_<property name> del prototipo de la clase de cliente.

Implementar los métodos Initialize y Dispose

Se llama al método initialize cuando se crea una instancia del comportamiento. Utilice este método para establecer los valores de propiedad predeterminados, crear delegados de función y agregar los delegados como controladores de eventos.

El método initialize de la clase Samples.FocusBehavior hace lo siguiente:

• Llama al método initialize de la clase base Sys.UI.Behaviour.

• Llama al método addHandlers para agregar delegados de eventos como controladores para los eventos onfocus y onblur del elemento DOM asociado. Tenga en cuenta que la parte "on" del nombre del evento (por ejemplo, onfocus) no se especifica.

El método dispose se llama cuando una instancia del comportamiento ya no se usa en la página y se quita. Utilice este método para liberar los recursos que el comportamiento ya no necesita, como los controladores de eventos DOM.

El método dispose de la clase Sample.FocusBehavior hace lo siguiente:

• Llama al método clearHandlers para borrar los delegados de eventos como controladores de los eventos onfocus y onblur del elemento DOM asociado.

• Llama al método dispose de la clase base Behavior.

  Nota:
  El método dispose de una clase de cliente se podría llamar más de una vez. Asegúrese de que el código incluido en el método dispose tiene en cuenta esto.

Registrar el comportamiento

La tarea final de la creación del comportamiento del cliente es registrar la clase de cliente llamando al método registerClass. Como la clase es un comportamiento del cliente, la llamada al método registerClass incluye el nombre de la clase de JavaScript que se va a registrar. También especifica Behavior como clase base.

El siguiente ejemplo completo incluye una llamada al método notifyScriptLoaded de la clase Sys.Application. Esta llamada es necesaria para notificar a Microsoft AJAX Library que se ha cargado el archivo JavaScript.

En el ejemplo siguiente se muestra el código JavaScript completo del comportamiento de cliente de Samples.FocusBehavior. Para el código de este tutorial se debe asignar el nombre FocusBehavior.js al archivo JavaScript y se tiene que colocar en el directorio 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();

En el ejemplo siguiente se muestra el código completo de la 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>

En el ejemplo siguiente se muestra el código completo de la clase FocusExtender. Este código se coloca normalmente en el directorio 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 };
        }
    }
}

Compilar dinámicamente el control extensor para pruebas

Cualquier control de servidor web, como el control extensor de este tutorial, debe estar compilado antes de poder hacer referencia a él en una página web. Puede utilizar la característica de compilación dinámica de ASP.NET 2.0 para probar los controles de servidor web sin compilarlos manualmente en un ensamblado. De esta manera se ahorra tiempo en la escritura y depuración inicial del código del control de servidor web. En los pasos siguientes se muestra cómo utilizar la carpeta App_Code para compilar dinámicamente un control extensor.

Para colocar el control extensor en la carpeta App_Code para la compilación dinámica

1. Cree una carpeta App_Code en la carpeta raíz del sitio web.

2. Mueva los archivos de código fuente de los controles .cs o .vb y las clases relacionadas a la carpeta App_Code.

   O bien

   Si previamente ha agregado un ensamblado para el control a la carpeta Bin, elimínelo. La modificación de los archivos de código fuente se continúa en la carpeta App_Code. El código fuente del control se compilará cada vez que ejecute su proyecto.

   Nota:
   Puede compilar un control en un ensamblado y colocar el ensamblado en la carpeta Bin o colocar el archivo de código fuente del control en la carpeta App_Code, pero no puede hacer ambas cosas. Si agrega el control a ambas carpetas, el analizador de páginas no podrá resolver una referencia al control en una página y producirá un error.

3. Ejecute la página web. El control extensor se compila dinámicamente.

Probar el control extensor compilado dinámicamente en una página web

En el procedimiento siguiente se describe cómo probar el control extensor en una página web habilitada para AJAX de ASP.NET. El código del control de servidor web se compila dinámicamente desde la carpeta App_Code.

Para utilizar el comportamiento en una página ASP.NET

1. Cree una nueva página Web ASP.NET.

2. Si la página aún no tiene un control ScriptManager, agregue uno.

3. Cree las reglas del estilo CSS para los cuadros de texto que se van a resaltar y para los cuadros de texto que no se van a resaltar.

   Puede resaltar el control de la manera que desee. Por ejemplo, puede cambiar el color de fondo del control, agregar un borde o cambiar la fuente del texto.

4. Agregue una directiva @ Register a la página y, a continuación, especifique el espacio de nombres y el atributo TagPrefix del control extensor,

   Nota:
   En este ejemplo, el código del control de servidor está en la carpeta App_Code para que pueda compilarse dinámicamente. Por consiguiente, no se especifica un atributo de ensamblado.

5. Agregue los controles TextBox y Button a la página y establezca sus propiedades Id.

   El marcado de los controles debe incluir .

6. Agregue una instancia del control FocusExtender a la página.

7. Establezca la propiedad TargetControlID del control FocusExtender en el identificador del control Button que agregó previamente.

8. Establezca la propiedad HighlightCssClass en el estilo CSS de resaltado y establezca la propiedad NoHighlightCssClass en el estilo CSS de no resaltado.

9. Ejecute la página y seleccione cada control.

   Observe que al seleccionar el control Button, se resalta.

10. Cambie la propiedad TargetControlID del control FocusExtender al identificador del control TextBox y, a continuación, ejecute de nuevo la página.

    Esta vez, el control TextBox se resalta cuando tiene el foco. El comportamiento encapsulado en el control FocusExtender se puede aplicar a diferentes controles de servidor ASP.NET en la página. Si desea que el comportamiento se aplique a varios controles, puede agregar varias instancias del control extensor a la página y asociar cada instancia a un control de servidor ASP.NET diferente.

Compilar el control extensor en un ensamblado

Incrustar el componente JavaScript y el código de extensión del control de servidor web en un ensamblado facilitará la implementación del control extensor personalizado. Crear un ensamblado también facilita la administración del control de versiones del control. Por otra parte, no se pueden agregar controles al cuadro de herramientas del diseñador a menos que se compilen en un ensamblado.

En el procedimiento siguiente se describe cómo crear una nueva biblioteca de código en su proyecto de tutorial existente mediante Visual Studio. Moverá una copia de sus archivos de código a una nueva biblioteca de código del proyecto para este tutorial. La compilación del control extensor en una biblioteca de código crea un ensamblado que se puede implementar.

Nota:
Para realizar este procedimiento, debe estar utilizando Microsoft Visual Studio 2005 o Visual Studio 2008. No puede utilizar Microsoft Visual Web Developer Express, porque Visual Web Developer Express no permite crear dos proyectos en la misma solución.

Para agregar una nueva biblioteca de código a su proyecto existente

1. En Visual Studio, en el menú Archivo, haga clic en Nuevo y en Proyecto.

   Aparecerá el cuadro de diálogo Nuevo proyecto.

2. En Tipos de proyecto, seleccione Visual C# o Visual Basic.

3. En Plantillas, seleccione Biblioteca de clases y asigne el nombre Samples al proyecto.

4. En la lista Solución, seleccione Agregar a solucióny, a continuación, haga clic en Aceptar.

   La biblioteca de clases Samples se agrega a la solución existente.

Para mover el control extensor de servidor personalizado a una biblioteca de código

1. Agregue al proyecto de biblioteca de clases Samples las referencias siguientes, requeridas por el control extensor de servidor personalizado:

   • System.Drawing

   • System.Web

   • System.Web.Extensions

2. En el Explorador de soluciones, copie el archivo FocusExtender.cs o FocusExtender.vb y el archivo FocusBehavior.js del proyecto de tutorial original a la raíz del proyecto de biblioteca de clases Samples.

3. En la ventana Propiedades del archivo FocusBehavior.js, establezca Acción de compilación en Recurso incrustado.

   

4. Agregue la siguiente propiedad al archivo AssemblyInfo.

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

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

   Nota:
   El archivo AssemblyInfo.vb está en el nodo My Project del Explorador de soluciones. Si no ve ningún archivo en el nodo My Project, siga este procedimiento: en el menú Proyecto, haga clic en Mostrar todos los archivos. El archivo AssemblyInfo.cs está en el nodo Propiedades del Explorador de soluciones.

   La definición WebResource para los archivos JavaScript debe seguir la convención de nomenclatura [espacio de nombres de ensamblado].[nombre del archivo JavaScript].js.

   Nota:
   De forma predeterminada, Visual Studio establece el espacio de nombres de ensamblado en el nombre de ensamblado. Puede modificar el espacio de nombres de ensamblado en las propiedades del ensamblado.

5. En el archivo de clase FocusExtender, cambie el objeto ScriptReference en el método GetScriptReferences para que haga referencia al script de control de cliente incrustado en el ensamblado Samples. Para ello, realice las modificaciones siguientes:

   • Reemplace la propiedad Path por una propiedad Assembly establecida en "Samples".

   • Agregue una propiedad Name y establezca su valor en "Samples.FocusBehavior.js".

   En el ejemplo siguiente se muestra el resultado de este cambio.

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

6. Genere el proyecto.

   Cuando finalice la compilación, tendrá un ensamblado denominado Samples.dll. El archivo de código JavaScript (FocusBehavior.js) se incrusta en este ensamblado como un recurso.

   Nota:
   Recuerde que debe volver a generar el proyecto de biblioteca de clases siempre que agregue nuevos archivos de código fuente o cambie los existentes.

Utilizar el control extensor compilado desde su ensamblado en una página web

Ahora, hará referencia al control extensor personalizado compilado en una página web habilitada para AJAX de ASP.NET.

Para hacer referencia al control extensor personalizado compilado en una página web habilitada para AJAX de ASP.NET

1. Cree un nuevo proyecto AJAX de ASP.NET.

2. En el directorio raíz del sitio web, cree una carpeta Bin.

3. Copie el ensamblado Samples.dll desde la carpeta Bin\Debug o Bin\Release del proyecto de clase Samples a la nueva carpeta Bin.

4. Agregue una nueva página web ASP.NET denominada TestFocusExtender.aspx y, a continuación, agregue el marcado siguiente a la nueva página.

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

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

   Debido a que el control de servidor se compila en un ensamblado, la directiva @ Register tiene un atributo Assembly que hace referencia al ensamblado Samples, además de los atributos Namespace y TagPrefix.

5. Ejecute la página y seleccione cada control.

   Al seleccionar el control FocusBehavior, se resalta.

La página web que utiliza el control extensor personalizado compilado incluye el atributo Assembly en la directiva @ Register. Por lo demás, es igual que la página web utilizada para el control en la carpeta App_Code.

Vea también

Conceptos

Agregar funcionalidad de cliente a un control de servidor web

Usar el control UpdatePanel de ASP.NET con controles enlazados a datos

Referencia

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager