Condividi tramite

Creazione di un Control Extender personalizzato dell'AJAX Control Toolkit (VB)

di Microsoft

Gli extender personalizzati consentono di personalizzare ed estendere le funzionalità dei controlli ASP.NET senza dover creare nuove classi.

In questa esercitazione si apprenderà come creare un extender di controllo AJAX Control Toolkit personalizzato. Creiamo un nuovo extender semplice ma utile che modifica lo stato di un pulsante da disabilitato a abilitato quando si inserisce del testo in una casella di testo. Dopo aver letto questa esercitazione, sarà possibile estendere il toolkit ASP.NET AJAX con i propri extender di controllo.

È possibile creare extender di controllo personalizzati usando Visual Studio o Visual Web Developer (assicurarsi di avere la versione più recente di Visual Web Developer).

Panoramica dell'estensione DisabledButton

Il nostro nuovo extender di controllo si chiama DisabledButton extender. Questo extender avrà tre proprietà:

  • TargetControlID - Il TextBox che il controllo estende.
  • TargetButtonIID: pulsante disabilitato o abilitato.
  • TestoDisabilitato - Il testo visualizzato inizialmente nel pulsante. Quando inizi a digitare, il pulsante visualizza il valore della proprietà Testo del pulsante.

Collega l'extender DisabledButton a un controllo TextBox e a un controllo Button. Prima di digitare qualsiasi testo, il pulsante è disabilitato e TextBox e Button hanno un aspetto simile al seguente:

Immagine del pulsante disabilitato

(Fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver iniziato a digitare testo, il pulsante è abilitato e TextBox e Button hanno un aspetto simile al seguente:

Immagine del pulsante abilitato

(Fare clic per visualizzare l'immagine a dimensione intera)

Per creare l'extender di controllo, è necessario creare i tre file seguenti:

  • DisabledButtonExtender.vb : questo file è la classe di controllo lato server che gestirà la creazione dell'extender e consente di impostare le proprietà in fase di progettazione. Definisce anche le proprietà che possono essere impostate sull'extender. Queste proprietà sono accessibili tramite codice e in fase di progettazione e corrispondono alle proprietà definite nel file DisableButtonBehavior.js.
  • DisabledButtonBehavior.js: questo file è quello in cui aggiungerai tutta la logica dello script client.
  • DisabledButtonDesigner.vb: questa classe abilita la funzionalità in fase di progettazione. Questa classe è necessaria se si vuole che l'extender del controllo funzioni correttamente con Visual Studio/Visual Web Developer Designer.

Un extender di controllo è quindi costituito da un controllo lato server, un comportamento lato client e una classe di progettazione lato server. Si apprenderà come creare tutti e tre questi file nelle sezioni seguenti.

Creare il sito Web e il progetto personalizzati dell'extender

Il primo passaggio consiste nel creare un progetto di libreria di classi e un sito Web in Visual Studio/Visual Web Developer. Si creerà l'extender personalizzato nel progetto di libreria di classi e si testerà l'extender personalizzato nel sito Web.

Iniziamo con il sito Web. Seguire questa procedura per creare il sito Web:

  1. Selezionare l'opzione di menu File, Nuovo sito Web.
  2. Selezionare il modello sito Web ASP.NET .
  3. Assegnare al nuovo sito Web il nome Website1.
  4. Fare clic sul pulsante OK .

Successivamente, è necessario creare il progetto di libreria di classi che conterrà il codice per l'extender del controllo:

  1. Selezionare l'opzione di menu File, Aggiungi, Nuovo progetto.
  2. Selezionare il modello Libreria di classi .
  3. Assegnare alla nuova libreria di classi il nome CustomExtenders.
  4. Fare clic sul pulsante OK .

Dopo aver completato questi passaggi, la finestra Esplora soluzioni sarà simile alla figura 1.

Soluzione con il sito Web e il progetto di libreria di classi

Figura 01: Soluzione con un progetto di libreria di siti Web e classi (fare clic per visualizzare l'immagine a dimensione intera)

Successivamente, è necessario aggiungere tutti i riferimenti all'assembly necessari al progetto di libreria di classi:

  1. Fare clic con il pulsante destro del mouse sul progetto CustomExtenders e scegliere l'opzione di menu Aggiungi riferimento.

  2. Selezionare la scheda .NET.

  3. Aggiungere riferimenti agli assembly seguenti:

    1. System.Web.dll
    2. System.Web.Extensions.dll
    3. System.Design.dll
    4. System.Web.Extensions.Design.dll

  4. Selezionare la scheda Sfoglia.

  5. Aggiungere un riferimento all'assembly AjaxControlToolkit.dll. Questo assembly si trova nella cartella in cui è stato scaricato AJAX Control Toolkit.

È possibile verificare di aver aggiunto tutti i riferimenti corretti facendo clic con il pulsante destro del mouse sul progetto, scegliendo Proprietà e facendo clic sulla scheda Riferimenti (vedere la figura 2).

Cartella Riferimenti con i riferimenti necessari

Figura 02: Cartella riferimenti con riferimenti obbligatori(Fare clic per visualizzare l'immagine a dimensione intera)

Creazione dell'estensione di controllo personalizzato

Ora che è disponibile la libreria di classi, è possibile iniziare a creare il controllo extender. Iniziamo con la struttura di base di una classe extender personalizzata (vedi Listato 1).

Elenco 1 - MyCustomExtender.vb

Imports AjaxControlToolkit
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls

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

<ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class MyControlExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property MyProperty() As String
        Get
            Return GetPropertyValue("MyProperty", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("MyProperty", value)
        End Set
    End Property
End Class

Ci sono diversi aspetti che si possono notare riguardo alla classe estesa del controllo in Elenco 1. Prima di tutto, si noti che la classe eredita dalla classe Base ExtenderControlBase. Tutti i controlli extender di AJAX Control Toolkit derivano da questa classe di base. Ad esempio, la classe base include la proprietà TargetID che è una proprietà obbligatoria di ogni extender di controllo.

Si noti quindi che la classe include i due attributi seguenti correlati allo script client:

  • WebResource: fa sì che un file venga incluso come risorsa incorporata in un assembly.
  • ClientScriptResource: causa il recupero di una risorsa script da un assembly.

L'attributo WebResource viene usato per incorporare il file JavaScript MyControlBehavior.js nell'assembly quando viene compilato l'extender personalizzato. L'attributo ClientScriptResource viene usato per recuperare lo script MyControlBehavior.js dall'assembly quando viene usato l'extender personalizzato in una pagina Web.

Per consentire il funzionamento degli attributi WebResource e ClientScriptResource, è necessario compilare il file JavaScript come risorsa incorporata. Selezionare il file nella finestra Esplora soluzioni, aprire la finestra delle proprietà e assegnare il valore Risorsa incorporata alla proprietà Azione di compilazione.

Si noti che l'extender del controllo include anche un attributo TargetControlType. Questo attributo viene utilizzato per specificare il tipo di controllo che viene esteso dall'estensore di controllo. Nel caso di Listing 1, l'estensione del controllo viene usata per estendere un controllo TextBox.

Si noti infine che l'extender personalizzato include una proprietà denominata MyProperty. La proprietà è contrassegnata con l'attributo ExtenderControlProperty. I metodi GetPropertyValue() e SetPropertyValue() vengono usati per passare il valore della proprietà dall'extender del controllo lato server al comportamento lato client.

Procediamo ad implementare il codice per l'estensione DisabledButton. Il codice per questo extender è disponibile nell'elenco 2.

Listato 2 - DisabledButtonExtender.vb

Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit

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

<Designer(GetType(DisabledButtonExtender))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
    Inherits ExtenderControlBase

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    <IDReferenceProperty(GetType(Button))> _
    Public Property TargetButtonID() As String
        Get
            Return GetPropertyValue("TargetButtonID", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("TargetButtonID", value)
        End Set
    End Property

    <ExtenderControlProperty(), DefaultValue("")> _
    Public Property DisabledText() As String
        Get
            Return GetPropertyValue("DisabledText", "")
        End Get
        Set(ByVal value As String)
            SetPropertyValue("DisabledText", value)
        End Set
    End Property

End Class

L'extender DisabledButton nell'elenco 2 ha due proprietà denominate TargetButtonID e DisabledText. L'IDReferenceProperty applicato alla proprietà TargetButtonID impedisce l'assegnazione di elementi diversi dall'ID di un controllo Button a questa proprietà.

Gli attributi WebResource e ClientScriptResource associano un comportamento lato client che si trova in un file denominato DisabledButtonBehavior.js a questo extender. Questo file JavaScript verrà illustrato nella sezione successiva.

Creazione del comportamento dell'extender personalizzato

Il componente lato client di un extender di controllo è detto comportamento. La logica effettiva per la disabilitazione e l'abilitazione del pulsante è contenuta nel comportamento DisabledButton. Il codice JavaScript per il comportamento è incluso nell'elenco 3.

Elenco 3 - DisabledButton.js

Type.registerNamespace('CustomExtenders');

CustomExtenders.DisabledButtonBehavior = function(element) {

    CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);

    this._targetButtonIDValue = null;
    this._disabledTextValue = null;

}

CustomExtenders.DisabledButtonBehavior.prototype = {

    initialize : function() {
        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');

        // Initalization code
        $addHandler(this.get_element(), 'keyup', 
        Function.createDelegate(this, this._onkeyup));
        this._onkeyup();
    },

    dispose : function() {
        // Cleanup code 

        CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
    },

    // Property accessors 
    //
    get_TargetButtonID : function() {
        return this._targetButtonIDValue;
    },

    set_TargetButtonID : function(value) {
        this._targetButtonIDValue = value;
    },

    get_DisabledText : function() {
        return this._disabledTextValue;
    },

    set_DisabledText : function(value) {
        this._disabledTextValue = value;
    },

  _onkeyup : function() {
  
    var e = $get(this._targetButtonIDValue);
    if (e) {
      var disabled = ("" == this.get_element().value);
      e.disabled = disabled;
      if ( this._disabledTextValue) {
        if (disabled) {
          this._oldValue = e.value;
          e.value = this._disabledTextValue;
        }
        else
        {
          if(this._oldValue){
            e.value = this._oldValue;
          }
        }
      }
    }
  }

}

CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);

Il file JavaScript nell'elenco 3 contiene una classe lato client denominata DisabledButtonBehavior. Questa classe, come il gemello lato server, include due proprietà denominate TargetButtonID e DisabledText a cui è possibile accedere usando get_TargetButtonID/set_TargetButtonID e get_DisabledText/set_DisabledText.

Il metodo initialize() associa un gestore eventi keyup all'elemento di destinazione per il comportamento. Ogni volta che si digita una lettera nel controllo TextBox associato a questo comportamento, viene eseguito il gestore keyup. Il gestore dell'evento keyup abilita o disabilita il Button a seconda che il TextBox associato al comportamento contenga testo.

Tenere presente che è necessario compilare il file JavaScript nell'elenco 3 come risorsa incorporata. Selezionare il file nella finestra Esplora soluzioni, aprire la finestra delle proprietà e assegnare il valore Risorsa incorporata alla proprietà Azione di compilazione (vedere la figura 3). Questa opzione è disponibile sia in Visual Studio che in Visual Web Developer.

Aggiunta di un file JavaScript come risorsa incorporata

Figura 03: Aggiunta di un file JavaScript come risorsa incorporata (fare clic per visualizzare l'immagine a dimensione intera)

Creazione della finestra di progettazione dell'estensione personalizzata

È necessario creare un'ultima classe per completare l'extender. È necessario creare la classe di progettazione nell'elenco 4. Questa classe è necessaria per fare in modo che l'extender si comporti correttamente con Visual Studio/Visual Web Developer Designer.

Listing 4 - DisabledButtonDesigner.vb

Imports AjaxControlToolkit.Design

Public Class DisabledButtonDesigner
    Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)

End Class

Associa il progettista nel Listato 4 all'extender DisabledButton con l'attributo Designer. È necessario applicare l'attributo Designer alla classe DisabledButtonExtender come segue:

<Designer(GetType(DisabledButtonDesigner))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
   Inherits ExtenderControlBase

Uso dell'extender personalizzato

Ora che abbiamo completato la creazione dell'extender del controllo DisabledButton, è il momento di usarlo nel nostro sito Web ASP.NET. Prima di tutto, è necessario aggiungere l'extender personalizzato alla casella degli strumenti. Segui questi passaggi:

  1. Aprire una pagina ASP.NET facendo doppio clic sulla pagina nella finestra Esplora soluzioni.
  2. Fare clic con il pulsante destro del mouse sulla casella degli strumenti e scegliere l'opzione di menu Scegli elementi.
  3. Nella finestra di dialogo Scegli elementi della casella degli strumenti, sfoglia fino all'assembly CustomExtenders.dll.
  4. Fare clic sul pulsante OK per chiudere la finestra di dialogo.

Dopo aver completato questi passaggi, l'extender del controllo DisabledButton verrà visualizzato nella casella degli strumenti (vedere la figura 4).

DisabledButton nella casella degli strumenti

Figura 04: DisabledButton nella casella degli strumenti(Fare clic per visualizzare l'immagine a dimensione intera)

Successivamente, è necessario creare una nuova pagina di ASP.NET. Segui questi passaggi:

  1. Creare una nuova pagina di ASP.NET denominata ShowDisabledButton.aspx.
  2. Trascinare uno ScriptManager nella pagina.
  3. Trascinare un controllo TextBox nella pagina.
  4. Trascina il controllo Pulsante sulla pagina.
  5. Nella finestra Proprietà modificare la proprietà ID pulsante impostando il valore btnSave e la proprietà Text sul valore Save*.

Abbiamo creato una pagina con un controllo standard ASP.NET TextBox e Button.

Successivamente, è necessario estendere il controllo TextBox con l'extender DisabledButton:

  1. Selezionare l'opzione Aggiungi Extender per aprire la finestra di dialogo della procedura guidata Extender (vedere la Figura 5). Nota che la finestra di dialogo include l'extender DisabledButton personalizzato.
  2. Selezionare l'extender DisabledButton e fare clic sul pulsante OK.

Finestra di dialogo Estensione guidata

Figura 05: Finestra di dialogo Procedura guidata Extender (Fare clic per visualizzare l'immagine a dimensione intera)

Infine, è possibile impostare le proprietà dell'estensore DisabledButton. È possibile modificare le proprietà dell'extender DisabledButton modificando le proprietà del controllo TextBox:

  1. Selezionare il TextBox nel Designer.
  2. Nella finestra Proprietà espandere il nodo Extenders (vedere la figura 6).
  3. Assegnare il valore Save alla proprietà DisabledText e il valore btnSave alla proprietà TargetButtonID.

Impostazione delle proprietà dell'extender

Figura 06: Impostazione delle proprietà dell'extender (fare clic per visualizzare l'immagine a dimensione intera)

Quando si esegue la pagina (premendo F5), il controllo Button è inizialmente disattivato. Non appena si inizia a digitare del testo nel controllo TextBox, si abilita il pulsante (vedere la figura 7).

Estensore DisabledButton in azione

Figura 07: Estensione DisabledButton in azione(Fare clic per visualizzare l'immagine a dimensione intera)

Sommario

L'obiettivo di questa esercitazione era spiegare come estendere AJAX Control Toolkit con controlli extender personalizzati. In questa esercitazione è stato creato un semplice extender di controllo DisabledButton. Questo extender è stato implementato creando una classe DisabledButtonExtender, un comportamento JavaScript DisabledButtonBehavior e una classe DisabledButtonDesigner. Si segue un set di passaggi simile ogni volta che si crea un extender di controllo personalizzato.

Precedente

  • Last updated on