Creazione di un controllo Extender per associare un comportamento client a un controllo server Web

Articolo
10/22/2014

Aggiornamento: novembre 2007

La funzionalità AJAX di ASP.NET consente di espandere le funzionalità di un'applicazione Web per creare un'esperienza utente dettagliata. È possibile utilizzare funzionalità ECMAScript (JavaScript), DHTML e AJAX del browser Web per includere effetti visivi, elaborazione client, ad esempio convalida, e così via.

In questa esercitazione viene illustrato come creare un controllo Extender che incapsula un comportamento client e lo collega a un controllo server Web. Un comportamento client aggiunge funzionalità agli elementi DOM (Document Object Model) del browser. Il controllo Extender viene quindi associato a uno o più tipi di controlli server ASP.NET per aggiungere il comportamento a tali controlli server. È possibile associare più controlli Extender a un controllo server ASP.NET.

In questa esercitazione verrà illustrato come effettuare le seguenti attività:

Creare un controllo Extender che incapsula il comportamento client e viene associato ai controlli server Web in una pagina Web ASP.NET.
Creare un comportamento client associato al controllo Extender server Web.

Gestire eventi dal DOM del browser utilizzando il comportamento client.

Nota:
È inoltre possibile aggiungere funzionalità client dettagliate ai controlli server ASP.NET senza un controllo Extender separato. Per un esempio di come creare un controllo server Web che includa la stessa funzionalità client illustrata in questa esercitazione, vedere Aggiunta di funzionalità client a un controllo server Web.

Compilare il controllo Extender personalizzato in un assembly e incorporare i file JavaScript associati come risorse nello stesso assembly.
Fare riferimento al controllo Extender personalizzato compilato in una pagina Web ASP.NET con supporto AJAX.

Identificazione dei requisiti client

In questa esercitazione viene implementato un semplice comportamento client che evidenzia un controllo in una pagina Web, ad esempio un controllo TextBox o Button, quando il controllo viene selezionato (o ha lo stato attivo) nel browser. Ad esempio, il controllo potrebbe modificare il colore di sfondo quando ha lo stato attivo, quindi ritornare al colore predefinito quando lo stato attivo viene spostato su un altro controllo.

Per implementare questo comportamento, il controllo client illustrato in questa esercitazione richiede le funzionalità elencate nella tabella seguente.

Funzionalità obbligatoria	Implementazione
Evidenziazione di un elemento DOM.	Per evidenziare un elemento DOM in una pagina Web ASP.NET, il controllo client applica uno stile del foglio di stile CSS identificato da un nome della classe. Questo stile è configurabile dall'utente.
Ripristino dello stato non evidenziato dell'elemento DOM.	Per rimuovere l'evidenziazione da un elemento DOM in una pagina ASP.NET, il controllo client applica uno stile CSS identificato da un nome della classe. Questo stile è configurabile dall'utente e viene applicato all'elemento DOM come stile predefinito.
Identificazione di un elemento DOM selezionato.	Per identificare quando un elemento DOM è selezionato (ha lo stato attivo), il controllo gestisce l'evento onfocus dell'elemento DOM.
Identificazione di un elemento DOM non selezionato.	Per identificare quando un controllo non è più selezionato, il controllo gestisce l'evento onblur dell'elemento DOM.

Creazione del controllo Extender

Per incapsulare il comportamento client per l'utilizzo da parte degli sviluppatori della pagina ASP.NET, è possibile utilizzare un controllo Extender. Un controllo Extender è un controllo server Web che eredita la classe astratta ExtenderControl nello spazio dei nomi System.Web.UI. I controlli Extender possono essere applicati a tipi di controllo server Web specifici. Identificare i tipi di controlli server Web ai quali può essere applicato un controllo Extender utilizzando l'attributo TargetControlTypeAttribute.

Il controllo Extender illustrato in questa esercitazione può essere applicato a qualsiasi tipo di controllo server Web. Nell'esempio seguente viene illustrata la definizione della classe.

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

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

Il nuovo controllo Extender include due proprietà utilizzate per implementare i requisiti client:

HighlightCssClass, che identifica la classe CSS che verrà applicata all'elemento DOM per evidenziare il controllo con lo stato attivo.
NoHighlightCssClass, che identifica la classe CSS che verrà applicata all'elemento DOM quando non ha lo stato attivo.

Eredità dalla classe astratta ExtenderControl

Nella tabella riportata di seguito sono elencati i membri della classe astratta ExtenderControl che è necessario implementare in un controllo Extender.

Membro	Descrizione
GetScriptDescriptors	Restituisce un insieme di oggetti ScriptDescriptorche rappresentano componenti client ECMAScript (JavaScript). ovvero il tipo client da creare, le proprietà da assegnare e gli eventi per aggiungere i gestori.
GetScriptReferences	Restituisce un insieme di oggetti ScriptReference che contengono informazioni sulle librerie di script client incluse con il controllo. Le librerie di script client definiscono i tipi di client e includono il codice JavaScript necessario per il controllo.

Il controllo Extender illustrato in questa esercitazione utilizza il metodo GetScriptDescriptors() per definire l'istanza del tipo di comportamento client. Il controllo crea un nuovo oggetto ScriptBehaviorDescriptor (la classe ScriptBehaviorDescriptor deriva dalla classe ScriptDescriptor) e include l'oggetto nel valore restituito per il metodo GetScriptDescriptors.

L'oggetto ScriptBehaviorDescriptor include il nome della classe client (Samples.FocusBehavior) e il valore ClientID per il controllo server Web associato (destinazione). Il nome della classe client e i valori della proprietà ClientID vengono forniti al costruttore per l'oggetto ScriptBehaviorDescriptor. Un riferimento al controllo server Web di destinazione viene fornito come un parametro al metodo GetScriptDescriptors(Control). Il riferimento può essere utilizzato per determinare il valore ClientID del controllo server Web di destinazione, che rappresenta il valore id dell'elemento DOM sottoposto a rendering.

La classe ScriptBehaviorDescriptor viene utilizzata per impostare i valori della proprietà del comportamento client ottenuti dalle proprietà del controllo Extender nel server. Per definire le proprietà del comportamento client, il controllo Extender utilizza il metodo AddProperty della classe ScriptBehaviorDescriptor. Il controllo Extender specifica quindi il nome e il valore della proprietà del comportamento client, in base alla proprietà corrispondente del controllo Extender server. In questo esempio viene utilizzato un oggetto ScriptBehaviorDescriptor per impostare i valori per le proprietà highlightCssClass e nohighlightCssClass nel comportamento client.

Il controllo Extender fornisce l'oggetto ScriptBehaviorDescriptor nel valore restituito per il metodo GetScriptDescriptors. Pertanto, ogni volta che viene eseguito il rendering del controllo server Web nel browser, ASP.NET consente di eseguire il rendering di JavaScript creando un'istanza del comportamento client con tutte le proprietà e i gestori eventi definiti. L'istanza del comportamento viene associata all'elemento DOM, in base alla proprietà ClientID sottoposta a rendering dal controllo server Web di destinazione. Nell'esempio seguente viene illustrato il markup ASP.NET dichiarativo che include un controllo server ASP.NET e il controllo Extender di questa esercitazione in una pagina.

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

L'output del rendering della pagina include una chiamata al metodo $create che identifica il comportamento client da creare. Fornisce anche i valori per le proprietà del comportamento client e il valore id dell'elemento DOM utilizzato come destinazione dal comportamento client. Nell'esempio seguente viene illustrato un metodo $create sottoposto a rendering.

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

Il controllo Extender illustrato in questa esercitazione utilizza il metodo GetScriptReferences per passare il percorso della libreria di script che definisce il tipo di comportamento client. Nell'esempio si tratta di un URL al file script denominato FocusBehavior.js, creato più avanti in questa esercitazione. Il riferimento viene fatto creando un nuovo oggetto ScriptReference e impostando quindi la proprietà Path sull'URL del file che contiene il codice client.

Nell'esempio seguente vengono illustrate le implementazioni dei metodi 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 };
}

Creazione del comportamento client

Nel controllo Extender il metodo GetScriptReferences specifica un file JavaScript (FocusBehavior.js) che contiene il codice client per il tipo di comportamento. In questa sezione viene descritto il codice JavaScript presente in tale file.

Il codice del comportamento client corrisponde ai membri specificati negli oggetti ScriptDescriptor restituiti dal metodo GetScriptDescriptors. Un comportamento client può avere anche membri che non corrispondono ai membri del controllo Extender server.

Il controllo Extender illustrato in questa esercitazione imposta il nome del comportamento client su Samples.FocusBehavior e definisce due proprietà del comportamento client, highlightCssClass e nohighlightCssClass.

Per ulteriori informazioni sulla creazione di componenti e comportamenti client, vedere Creazione di una classe Component del client tramite il modello di prototipo.

Creazione dello spazio dei nomi del client

Il codice client deve chiamare prima il metodo registerNamespace della classe Type per creare il proprio spazio dei nomi (Samples). Nell'esempio seguente viene illustrato come registrare lo spazio dei nomi client.

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

Definizione della classe client

La classe Samples.FocusBehavior definisce la classe client Samples.FocusBehavior. Questa classe include due proprietà che espongono i valori delle proprietà forniti dal controllo server Web.

Definizione del prototipo della classe

Dopo aver definito la classe Samples.FocusBehavior, il codice client definisce il prototipo della classe. Il prototipo include le funzioni di accesso get e set della proprietà e i gestori eventi per gli eventi onfocus e onblur dell'elemento DOM. Include inoltre un metodo initialize chiamato quando viene creata un'istanza del comportamento e un metodo dispose che esegue la pulitura quando il comportamento non è più richiesto dalla pagina.

Definizione dei gestori eventi per l'elemento DOM

I gestori eventi per una classe client vengono definiti come metodi del prototipo della classe. I gestori sono associati ai delegati dell'evento e agli eventi del browser DOM utilizzando il metodo addHandlers illustrato più avanti in questo argomento insieme al metodo Initialize.

Definizione dei metodi Get e Set della proprietà

Ogni proprietà identificata nell'oggetto ScriptDescriptor del metodo GetScriptDescriptors del controllo Extender deve avere le funzioni di accesso client corrispondenti. Le funzioni di accesso delle proprietà client vengono definite come metodi get_<property name> e set_<property name> del prototipo della classe client.

Implementazione dei metodi Initialize e Dispose

Il metodo initialize viene chiamato quando viene creata un'istanza del comportamento. Utilizzare questo metodo per impostare i valori predefiniti della proprietà, creare i delegati della funzione e aggiungere i delegati come gestori eventi.

Il metodo initialize della classe Samples.FocusBehavior effettua le seguenti operazioni:

Chiama il metodo initialize della classe di base Sys.UI.Behavior.
Chiama il metodo addHandlers per aggiungere i delegati dell'evento come i gestori per gli eventi onfocus e onblur dell'elemento DOM associato. Notare che la parte "on" del nome dell'evento, ad esempio onfocus, non viene specificata.

Il metodo dispose viene chiamato quando un'istanza del comportamento non viene più utilizzata nella pagina e viene rimossa. Utilizzare questo metodo per liberare le risorse che non sono più necessarie per il comportamento, ad esempio i gestori eventi DOM.

Il metodo dispose della classe Sample.FocusBehavior effettua le seguenti operazioni:

Chiama il metodo clearHandlers per cancellare i delegati dell'evento come i gestori per gli eventi onfocus e onblur dell'elemento DOM associato.
Chiama il metodo dispose della classe di base Behavior.

Nota:

Il metodo dispose di una classe client potrebbe essere chiamato più volte. Verificare che il codice incluso nel metodo dispose tenga conto di tale eventualità.

Nota:
Il metodo dispose di una classe client potrebbe essere chiamato più volte. Verificare che il codice incluso nel metodo dispose tenga conto di tale eventualità.

Registrazione del comportamento

L'ultima operazione per la creazione del comportamento client prevede la registrazione della classe client chiamando il metodo registerClass. Poiché la classe è un comportamento client, la chiamata al metodo registerClass include il nome della classe JavaScript da registrare. Specifica inoltre Behavior come classe di base.

Nel seguente esempio completo viene inclusa una chiamata al metodo notifyScriptLoaded della classe Sys.Application. Questa chiamata è necessaria per notificare alla Microsoft AJAX Library il caricamento del file JavaScript.

Nell'esempio seguente viene illustrato il codice JavaScript completo del comportamento client Samples.FocusBehavior. Il codice in questa esercitazione richiede che al file JavaScript sia assegnato il nome FocusBehavior.js e che tale file sia inserito nella directory 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();

Nell'esempio riportato di seguito viene illustrato il codice completo della pagina 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>

Nell'esempio seguente viene illustrato il codice completo della classe FocusExtender. Questo codice viene inserito generalmente nella directory 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 };
        }
    }
}

Compilazione dinamica del controllo Extender per il test

Prima di poter fare riferimento in una pagina Web a un controllo server Web, ad esempio al controllo Extender illustrato in questa esercitazione, è necessario compilarlo. È possibile utilizzare la funzionalità di compilazione dinamica di ASP.NET versione 2.0 per verificare i controlli server Web senza la necessità di doverli compilare manualmente in un assembly. In questo modo si risparmia tempo durante la scrittura e il debug iniziali del codice del controllo server Web. Nei passaggi seguenti viene illustrato come utilizzare la cartella App_Code per compilare dinamicamente il controllo Extender.

Per inserire il controllo Extender nella cartella App_Code per la compilazione dinamica

Creare una cartella App_Code nella cartella radice del sito Web.

Spostare i file di origine del controllo, con estensione cs o vb, e tutte le classi correlate nella cartella App_Code.

-oppure-

Se è già presente un assembly per il controllo nella cartella Bin, eliminare l'assembly. Continuare a modificare i file di origine nella cartella App_Code. Il codice sorgente del controllo verrà compilato ogni volta che si esegue il progetto.

Nota:
È possibile compilare un controllo in un assembly e salvare l'assembly nella cartella Bin oppure salvare il file di origine del controllo nella cartella App_Code, ma non è possibile effettuare entrambe le operazioni. Se si aggiunge il controllo in entrambe le cartelle, il parser della pagina non sarà in grado di risolvere un riferimento al controllo in una pagina e genererà un errore.

Eseguire la pagina Web. Il controllo Extender viene compilato dinamicamente.

Test del controllo Extender compilato dinamicamente in una pagina Web

Nella procedura descritta di seguito viene illustrato come testare il controllo Extender in una pagina Web ASP.NET con supporto AJAX. Il codice per il controllo server Web viene compilato dinamicamente dalla cartella App_Code.

Per utilizzare il comportamento in una pagina ASP.NET

Creare una nuova pagina Web ASP.NET.
Se nella pagina non è già presente un controllo ScriptManager, aggiungerne uno.
Creare le regole di stile CSS per le caselle di testo evidenziate e per le caselle di testo che non sono evidenziate.

È possibile evidenziare il controllo in qualsiasi modo. Ad esempio, è possibile modificare il colore di sfondo del controllo, aggiungere un bordo o modificare il tipo di carattere del testo.

Aggiungere una direttiva @ Register nella pagina, quindi specificare lo spazio dei nomi e l'attributo TagPrefix per il controllo Extender.

Nota:
In questo esempio il codice del controllo server si trova nella cartella App_Code in modo da poter essere compilato dinamicamente. Pertanto, non viene specificato un attributo dell'assembly.

Aggiungere un controllo TextBox e un controllo Button alla pagina e impostare le relative proprietà Id.

Il markup dei controlli deve includere .
Aggiungere un'istanza del controllo FocusExtender alla pagina.
Impostare la proprietà TargetControlID del controllo FocusExtender sull'ID del controllo Button aggiunto precedentemente.
Impostare la proprietà HighlightCssClass sullo stile CSS di evidenziazione e impostare la proprietà NoHighlightCssClass su uno stile CSS di non evidenziazione.
Eseguire la pagina e selezionare ciascun controllo.

Notare che quando viene selezionato, il controllo Button è evidenziato.
Modificare la proprietà TargetControlID del controllo FocusExtender impostandola sull'ID del controllo TextBox e rieseguire la pagina.

Questa volta, il controllo TextBox viene evidenziato quando ha lo stato attivo. Il comportamento incapsulato nel controllo FocusExtender può essere applicato a diversi controlli server ASP.NET della pagina. Se si desidera applicare il comportamento a più controlli, è possibile aggiungere più istanze del controllo Extender alla pagina e associare ogni istanza a un controllo server ASP.NET diverso.

Compilazione del controllo Extender in un assembly

Incorporando il componente JavaScript e il codice di estensione del controllo server Web in un assembly, risulterà più semplice distribuire il controllo Extender personalizzato. La creazione di un assembly semplifica inoltre la gestione del controllo della versione per il controllo. Inoltre, non è possibile aggiungere i controlli alla casella degli strumenti di una finestra di progettazione se non sono stati compilati in un assembly.

Nella procedura descritta di seguito viene illustrato come creare una nuova libreria di codice nel progetto esistente di questa esercitazione utilizzando Visual Studio. Una copia dei file di codice verrà spostata in una nuova libreria di codice nel progetto di questa esercitazione. La compilazione del controllo Extender in una libreria di codice crea un assembly che è possibile distribuire.

Nota:
Per eseguire questa procedura, è necessario utilizzare Microsoft Visual Studio 2005 o Visual Studio 2008. Non è possibile utilizzare Microsoft Visual Web Developer Express Edition, perché Visual Web Developer Express Edition non consente la creazione di due progetti nella stessa soluzione.

Per aggiungere una nuova libreria di codice al progetto esistente

In Visual Studio scegliere Nuovo dal menu File, quindi Progetto.

Verrà visualizzata la finestra di dialogo Nuovo progetto.
In Tipi progetto selezionare Visual C# o Visual Basic.
In Modelli selezionare Libreria di classi e denominare il progetto Samples.
Nell'elenco Soluzione selezionare Aggiungi a soluzione, quindi fare clic su OK.

La libreria di classi Samples viene aggiunta alla soluzione esistente.

Per spostare il controllo Extender server personalizzato in una libreria di codice

Aggiungere i riferimenti seguenti al progetto Libreria di classi Samples, richiesti dal controllo Extender server personalizzato:
- System.Drawing
- System.Web
- System.Web.Extensions
In Esplora soluzioni copiare il file FocusExtender.cs o FocusExtender.vb e il file FocusBehavior.js dal progetto originale dell'esercitazione alla radice del progetto Libreria di classi Samples.
Nella finestra Proprietà del file FocusBehavior.js impostare Operazione di compilazione su Risorsa incorporata.

Aggiungere al file AssemblyInfo la seguente proprietà.

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

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

Nota:
Il file AssemblyInfo.vb si trova nel nodo Progetto di Esplora soluzioni. Se non sono presenti file nel nodo Progetto, scegliere Mostra tutti i file dal menu Progetto. Il file AssemblyInfo.cs si trova nel nodo Proprietà di Esplora soluzioni.

La definizione WebResource per i file JavaScript deve seguire una convenzione di denominazione di [spazio dei nomi dell'assembly].[Nome file JavaScript].js.

Nota:
Per impostazione predefinita, in Visual Studio lo spazio dei nomi dell'assembly viene impostato sul nome dell'assembly. È possibile modificare lo spazio dei nomi dell'assembly nelle proprietà dell'assembly.

Nel file della classe FocusExtender, modificare l'oggetto ScriptReference nel metodo GetScriptReferences per fare riferimento allo script del controllo client incorporato nell'assembly Samples. A tale scopo, effettuare le seguenti modifiche:

Sostituire la proprietà Path con la proprietà Assembly impostata su "Samples".
Aggiungere una proprietà Name e impostarne il valore su "Samples.FocusBehavior.js".

Nell'esempio seguente viene illustrato il risultato di questa modifica.

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

Compilare il progetto.

Al termine della compilazione, si avrà un assembly denominato Samples.dll. Il file di codice JavaScript (FocusBehavior.js) viene incorporato in questo assembly come risorsa.

Nota:

Ricordarsi di ricompilare il progetto Libreria di classi ogni volta che vengono aggiunti nuovi file di origine o vengono modificati i file esistenti.

Nota:
Ricordarsi di ricompilare il progetto Libreria di classi ogni volta che vengono aggiunti nuovi file di origine o vengono modificati i file esistenti.

Utilizzo del controllo Extender compilato dal relativo assembly in una pagina Web

Verrà ora fatto riferimento al controllo Extender personalizzato compilato in una pagina Web ASP.NET con supporto AJAX.

Per fare riferimento al controllo Extender personalizzato in una pagina Web ASP.NET con supporto AJAX

Creare un nuovo progetto ASP.NET AJAX.
Nella cartella radice del sito Web, creare una cartella Bin.
Copiare l'assembly Samples.dll dalla cartella Bin\Debug o Bin\Release del progetto Libreria di classi Samples nella nuova cartella Bin.
Aggiungere una nuova pagina Web ASP.NET denominata TestFocusExtender.aspx, quindi aggiunge il markup seguente alla nuova pagina.
```
<%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %>
```
```
<%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>
```
Poiché il controllo server viene compilato in un assembly, la direttiva @ Register possiede un attributo Assembly che fa riferimento all'assembly Samples, oltre agli attributi Namespace e TagPrefix.
Eseguire la pagina e selezionare ciascun controllo.

Quando viene selezionato, il controllo FocusBehavior è evidenziato.

La pagina Web che utilizza il controllo Extender personalizzato compilato include l'attributo Assembly nella direttiva @ Register. In caso contrario, corrisponde alla pagina Web utilizzata per il controllo nella cartella App_Code.

Vedere anche

Concetti

Aggiunta di funzionalità client a un controllo server Web

Utilizzo del controllo UpdatePanel ASP.NET con più controlli con associazione a dati

Riferimenti

Sys.UI.Behavior Class CTP

ExtenderControl

ScriptManager

Condividi tramite