Share via

Agregar funcionalidad de cliente a un control de servidor web

  • Artículo

Actualización: noviembre 2007

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

En este tema se muestra cómo crear un control de servidor web personalizado que utiliza características de AJAX de ASP.NET para ampliar la funcionalidad del explorador. Puede agregar la funcionalidad a elementos DOM (Document Object Model, modelo de objetos de documento) mediante un control de cliente. El control de cliente puede asociarse a un control de servidor implementando la interfaz IScriptControl en el control de servidor.

En este tema aprenderá a hacer lo siguiente:

  • Crear un control de servidor web que encapsule el comportamiento de cliente y que incluya propiedades que los usuarios puedan establecer para controlar el comportamiento.

  • Crear un control de cliente asociado al control de servidor web.

  • Administrar los eventos de los elementos DOM del explorador en el control de cliente.

    Nota:

    También puede agregar funciones de cliente enriquecidas a los controles de servidor web creando un control extensor. Este control extensor encapsula las funciones de cliente en un comportamiento y se puede asociar a un control de servidor web. Debido a que un control extensor no forma parte de su control asociado, puede crear un único control extensor que puede asociarse a varios tipos de controles de servidor web. Para obtener un ejemplo, vea Crear un control extensor para asociar un comportamiento de cliente con un control de servidor web.

  • Compile el control de servidor web personalizado en un ensamblado e incruste los archivos JavaScript asociados como recursos en el mismo ensamblado.

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

Identificar los requisitos de cliente

El primer paso para agregar el comportamiento de cliente a un control de servidor web es decidir cuál será el comportamiento del control en el explorador. A continuación, determine la funcionalidad de cliente necesaria para implementar el comportamiento.

El control de servidor web que se crea en este tema implementa un comportamiento de cliente simple. El control (un control TextBox ) se resalta cuando se selecciona (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 tema necesita las funciones enumeradas en la tabla siguiente.

  • Una manera de resaltar un elemento DOM.
    Para resaltar un elemento DOM en una página web ASP.NET, el control de cliente aplica un estilo de una hoja de estilos en cascada (CSS), identificado por un nombre de clase. Este estilo es configurable por el usuario.

  • Una manera de devolver el elemento DOM a su estado no resaltado.
    Para quitar el resaltado de un elemento DOM en una página web ASP.NET, el control de cliente aplica un estilo CSS, identificado por un nombre de clase. Este estilo es configurable por el usuario y se aplica al elemento DOM como estilo predeterminado.

  • Una manera de identificar cuándo un elemento DOM está seleccionado.
    Para identificar cuándo un elemento DOM está seleccionado (tiene el foco), el control administra el evento onfocus del elemento DOM.

  • Una manera de identificar cuándo un elemento DOM no está seleccionado.
    Para identificar cuándo un elemento DOM no está seleccionado, el control administra el evento onblur del elemento DOM.

Crear el control de servidor web

Un control de servidor web que incluye características de cliente mediante la funcionalidad de AJAX en ASP.NET es como cualquier otro control de servidor web. Sin embargo, el control también implementa la interfaz IScriptControl del espacio de nombres System.Web.UI. El control de este tema amplía el control de ASP.NET TextBox heredando la clase TextBox e implementando la interfaz IScriptControl.

En el ejemplo siguiente se muestra la definición de la clase.

Public Class SampleTextBox
    Inherits TextBox
    Implements IScriptControl

public class SampleTextBox : TextBox, IScriptControl

El nuevo control de servidor web incluye dos propiedades que se utilizan para implementar los requisitos de 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.

Implementar la interfaz IScriptControl

La tabla siguiente enumera los miembros de la interfaz IScriptControl que debe implementar en un control de servidor web.

  • GetScriptDescriptors
    Devuelve una colección de los objetos ScriptDescriptor que contienen información sobre las instancias de componentes de cliente utilizadas con el control de servidor web. Incluye el tipo de cliente que se va a crear, las propiedades que se van a asignar y los eventos para los que se van a agregar controladores.

  • GetScriptReferences
    Devuelve una colección de los objetos ScriptReference que contienen información sobre las bibliotecas de scripts de cliente que se van incluir con el control. Las bibliotecas de scripts de cliente definen los tipos de cliente y otro código JavaScript necesario para el comportamiento.

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

El objeto ScriptControlDescriptor incluye el nombre de la clase de cliente (Samples.SampleTextBox) y el valor ClientID del control de servidor web. Este valor se utiliza como valor de id para el elemento DOM representado. El nombre de la clase de cliente y los valores de la propiedad ClientID se pasan al constructor del objeto ScriptControlDescriptor.

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

El control de servidor web proporciona el objeto ScriptControlDescriptor en el valor devuelto para el 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 control de cliente con todas las propiedades y controladores de eventos definidos. La instancia del control se asocia al elemento DOM, en función de la propiedad ClientID que se representa a partir del control de servidor web. En el ejemplo siguiente se muestra el marcado de ASP.NET declarativo que incluye el control de servidor web de este tema en una página.

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

El resultado representado de la página incluye una llamada al método $create que identifica la clase de cliente que se va a crear. También proporciona los valores de las propiedades del cliente y el valor id del objeto DOM al que el control de cliente está asociado. En el ejemplo siguiente se muestra un método $create representado.

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

El control de servidor web de ejemplo utiliza el método GetScriptReferences para pasar la ubicación de la biblioteca de scripts que define el tipo de control de cliente. En este ejemplo, es una dirección URL al archivo de script denominado SampleTextBox.js, que se creará más adelante. 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 muestra las implementaciones de los métodos GetScriptDescriptors y 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 el control de cliente

Los controles de cliente se deben registrar con el objeto ScriptManager para la página actual. Para ello, llame al método RegisterScriptControl<TScriptControl> de la clase ScriptManager y proporcione una referencia al control de cliente.

El control de servidor web de ejemplo se registra como un control de cliente con el control ScriptManager en la página. Para ello, el control invalida el método OnPreRender del control TextBox base. A continuación, llama al método RegisterScriptControl() para registrarse como un control de cliente. Además, el control registra los descriptores del script creados por el método GetScriptDescriptors. Para ello, llama al método RegisterScriptDescriptors() del método Render del control.

En el ejemplo siguiente se muestran las llamadas a los métodos RegisterScriptControl() y 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);
}

En el ejemplo siguiente se muestra el código completo del control 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();
        }
    }
}

Crear el control de cliente

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

El código del control del cliente coincide con los miembros especificados en los objetos ScriptDescriptor devueltos por el método GetScriptDescriptors. Un control de cliente también puede tener miembros que no corresponden a los miembros de la clase de control de servidor web.

El control de servidor web de ejemplo establece el nombre del control de cliente en Samples.SampleTextBox y define dos propiedades del control de cliente: highlightCssClass y nohighlightCssClass.

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

Registrar el espacio de nombres de cliente

El código del control de cliente debe llamar primero al método registerNamespace de la clase Type para registrar 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

Una vez registrado el espacio de nombres de cliente, el código define la clase Samples.SampleTextBox. Esta clase incluye dos propiedades que guardan los valores de propiedad proporcionados por el control de servidor web. También incluye dos delegados de eventos que especifican los controladores de los eventos onblur y onfocus del elemento DOM asociado al control Samples.SampleTextBox.

En el ejemplo siguiente se muestra la definición de la clase Samples.SampleTextBox.

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

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

Definir el prototipo de la clase

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

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.

En el siguiente ejemplo se muestran los métodos de controlador de eventos del control Samples.SampleTextBox.

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

Definir los métodos de propiedad get y set

Cada propiedad identificada en el objeto ScriptDescriptor del método GetScriptDescriptors del control de servidor web 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.

Nota:

JavaScript distingue entre mayúsculas y minúsculas. Los nombres de los descriptores de acceso set y get deben coincidir exactamente con los nombres de propiedad identificados en el objeto ScriptDescriptor del método GetScriptDescriptors del control de servidor web.

En el ejemplo siguiente se muestra los descriptores de acceso de propiedad get y set del control 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');
    }
}

Implementar los métodos Initialize y Dispose

Se llama al método initialize cuando se crea una instancia del control. 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.SampleTextBox hace lo siguiente:

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

  • Llama al método addHandlers para agregar delegados de eventos como controladores para los eventos onblur y onfocus del elemento HTML asociado (<input type="text">). La parte "on" del nombre del evento (por ejemplo, onfocus) no se especifica.

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

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

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

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

    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.

En el ejemplo siguiente se muestra la implementación de los métodos initialize y dispose del prototipo 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 el control

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

En el ejemplo de código siguiente se muestra la llamada al método registerClass del control Samples.SampleTextBox. El ejemplo también incluye una llamada al método notifyScriptLoaded del objeto Sys.Application. Esta llamada es necesaria para notificar a Microsoft AJAX Library que se ha cargado el archivo JavaScript.

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

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

En el ejemplo siguiente se muestra el código completo del control de 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();

Compilar dinámicamente el control para pruebas

Cualquier control de servidor web, como el control de este tema, 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. Los pasos siguientes muestran cómo utilizar la carpeta App_Code para compilar dinámicamente un control.

Para colocar el control 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 .cs o .vb del control y las clases relacionadas a la carpeta App_Code

    O bien

    Si previamente ha agregado un ensamblado para el control a la carpeta Bin, elimine el ensamblado. 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 precompilar 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 se compila dinámicamente.

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

El procedimiento siguiente describe cómo probar el control 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, como se muestra en el ejemplo siguiente.

    Nota:

    En este caso, 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.

    Al seleccionar el control Button, se resalta.

En el ejemplo siguiente se muestra una página ASP.NET que utiliza el comportamiento creado en este tema.

Compilar el control 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 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.

El procedimiento siguiente describe cómo crear una nueva biblioteca de código en el proyecto del tema existente mediante Visual Studio. Se trasladará una copia de los archivos de código fuente a una nueva biblioteca de código del proyecto correspondiente a este tema. La compilación del control en una biblioteca de código producirá un ensamblado que se puede implementar.

Nota:

Para realizar este procedimiento, debe estar utilizando Microsoft Visual Studio 2005. No puede utilizar Visual Web Developer 2005 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ón y, a continuación, haga clic en Aceptar.

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

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

  1. Agregue al proyecto de bibliotecas de clase Samples las referencias siguientes, requeridas por el control de servidor personalizado:

    • System.Drawing

    • System.Web

    • System.Web.Extensions

  2. En el Explorador de soluciones, copie el archivo SampleTextBox.cs o SampleTextBox.vb y el archivo SampleTextBox.js del proyecto de original y, a continuación, agregue los archivos copiados a la raíz del proyecto de bibliotecas de clase Samples.

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

  4. Agregue la propiedad siguiente al archivo AssemblyInfo.

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

    [assembly: System.Web.UI.WebResource("Samples.SampleTextBox.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, haga el siguiente: 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 SampleTextBox, 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.SampleTextBox.js".

    El ejemplo siguiente muestra el resultado de este cambio.

            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. Genere el proyecto.

    Cuando la compilación finalice, tendrá un ensamblado denominado Samples.dll. El archivo de código JavaScript (SampleTextBox.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 compilado a partir de su ensamblado en una página web

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

Para hacer referencia al control personalizado 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 de Samples a la nueva carpeta Bin.

  4. Agregue una nueva página web ASP.NET denominada TestSampleTextBoxAssembly.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 SampleTextBox, se resalta.

La página web que utiliza el control 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

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

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

Referencia

Sys.UI.Control (Clase)

IScriptControl

ScriptManager