Creazione di un controllo Extender di AJAX Control Toolkit personalizzato (VB)
da Microsoft
Gli estensioni personalizzati consentono di personalizzare ed estendere le funzionalità dei controlli ASP.NET senza dover creare nuove classi.
In questa esercitazione viene illustrato come creare un'estensione del controllo AJAX Control Toolkit personalizzata. Viene creato un semplice, ma utile estensione che modifica lo stato di un pulsante da disabilitato per abilitare quando si digita testo in una casella di testo. Dopo aver letto questa esercitazione, sarà possibile estendere la ASP.NET AJAX Toolkit con i propri estensioni di controllo.
È possibile creare estensioni di controllo personalizzate usando Visual Studio o Visual Web Developer (assicurarsi di avere la versione più recente di Visual Web Developer).
Panoramica dell'estensione DisabledButton
Il nuovo estensione del controllo è denominato l'estensione DisabledButton. Questo estensione avrà tre proprietà:
- TargetControlID: Casella di testo estesa dal controllo.
- TargetButtonIID - Pulsante disabilitato o abilitato.
- DisabledText: testo visualizzato inizialmente nel pulsante. Quando si inizia a digitare, il pulsante visualizza il valore della proprietà Button Text.
Si collega l'estensione DisabledButton a un controllo TextBox e Button. Prima di digitare qualsiasi testo, il pulsante è disabilitato e il Pulsante e TextBox sono simili al seguente:
(Fare clic per visualizzare l'immagine full-size)
Dopo aver avviato la digitazione del testo, il pulsante è abilitato e il pulsante e il pulsante sono simili al seguente:
(Fare clic per visualizzare l'immagine full-size)
Per creare l'estensione del controllo, è necessario creare i tre file seguenti:
- DisabledButtonExtender.vb: questo file è la classe di controllo lato server che gestirà la creazione dell'estensione e consente di impostare le proprietà in fase di progettazione. Definisce anche le proprietà che possono essere impostate sull'estensione. Queste proprietà sono accessibili tramite codice e in fase di progettazione e le proprietà di corrispondenza definite nel file di DisableButtonBehavior.js.
- DisabledButtonBehavior.js - Questo file è dove si aggiungerà tutta la logica dello script client.
- DisabledButtonDesigner.vb: questa classe abilita la funzionalità in fase di progettazione. È necessaria questa classe se si vuole che l'estensione del controllo funzioni correttamente con Visual Studio/Visual Web Developer Designer.
Un'estensione del controllo è quindi costituita 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.
Creazione del sito Web e del progetto di estensione personalizzati
Il primo passaggio consiste nel creare un progetto di libreria di classi e un sito Web in Visual Studio/Visual Web Developer. Verrà creato l'estensione personalizzata nel progetto della libreria di classi e si testerà l'estensione personalizzata nel sito Web.
Iniziamo con il sito Web. Seguire questa procedura per creare il sito Web:
- Selezionare l'opzione di menu File, Nuovo sito Web.
- Selezionare il modello di sito Web ASP.NET .
- Assegnare un nome al nuovo sito Web Website1.
- Fare clic sul pulsante OK .
È quindi necessario creare il progetto di libreria di classi che conterrà il codice per l'estensione del controllo:
- Selezionare l'opzione di menu File, Aggiungi, Nuovo progetto.
- Selezionare il modello libreria di classi .
- Assegnare un nome alla nuova libreria di classi con il nome CustomExtenders.
- Fare clic sul pulsante OK .
Dopo aver completato questi passaggi, la finestra Esplora soluzioni dovrebbe essere simile alla figura 1.
Figura 01: Soluzione con il sito Web e il progetto libreria di classi(Fare clic per visualizzare l'immagine full-size)
È quindi necessario aggiungere tutti i riferimenti di assembly necessari al progetto di libreria di classi:
Fare clic con il pulsante destro del mouse sul progetto CustomExtenders e selezionare l'opzione di menu Aggiungi riferimento.
Selezionare la scheda .NET.
Aggiungere riferimenti agli assembly riportati di seguito:
- System.Web.dll
- System.Web.Extensions.dll
- System.Design.dll
- System.Web.Extensions.Design.dll
Selezionare la scheda Sfoglia.
Aggiungere un riferimento all'assembly AjaxControlToolkit.dll. Questo assembly si trova nella cartella in cui è stato scaricato il Toolkit di controllo AJAX.
È possibile verificare di aver aggiunto tutti i riferimenti corretti facendo clic con il pulsante destro del mouse sul progetto, selezionando Proprietà e facendo clic sulla scheda Riferimenti (vedere La figura 2).
Figura 02: Cartella riferimenti con riferimenti obbligatori(Fare clic per visualizzare l'immagine full-size)
Creazione dell'estensione del controllo personalizzato
Ora che è disponibile la libreria di classi, è possibile iniziare a creare il controllo di estensione. Iniziamo con le ossa bare di una classe di controllo di estensione personalizzata (vedi Elenco 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
Esistono diverse cose che si notano sulla classe di estensione del controllo in List 1. Prima di tutto, si noti che la classe eredita dalla classe ExtenderControlBase di base. Tutti i controlli di estensione 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 estensione del controllo.
Si noti quindi che la classe include i due attributi seguenti correlati allo script client:
- WebResource: causa l'inserimento di un file 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'estensione personalizzato. L'attributo ClientScriptResource viene usato per recuperare lo script di MyControlBehavior.js dall'assembly quando viene usato l'estensione personalizzata 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 il foglio delle proprietà e assegnare il valore Embedded Resource alla proprietà Build Action.
Si noti che l'estensione del controllo include anche un attributo TargetControlType. Questo attributo viene usato per specificare il tipo di controllo esteso dall'estensione del controllo. Nel caso dell'elenco 1, l'estensione del controllo viene usata per estendere un controllo TextBox.
Si noti infine che l'estensione personalizzata 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'estensione del controllo lato server al comportamento lato client.
Andiamo avanti e implementiamo il codice per l'estensione DisabledButton. Il codice per questo estensione è disponibile nell'elenco 2.
Elenco 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'estensione DisabledButton in List 2 ha due proprietà denominate TargetButtonID e DisabledText. L'IDReferenceProperty applicato alla proprietà TargetButtonID impedisce di assegnare qualsiasi elemento diverso dall'ID di un controllo Button a questa proprietà.
Gli attributi WebResource e ClientScriptResource associano un comportamento lato client situato in un file denominato DisabledButtonBehavior.js con questo estensione. Questo file JavaScript viene illustrato nella sezione successiva.
Creazione del comportamento dell'estensione personalizzato
Il componente lato client di un estensione del controllo è denominato 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 in List 3 contiene una classe lato client denominata DisabledButtonBehavior. Questa classe, come il gemello lato server, include due proprietà denominate TargetButtonID e DisabledText che è 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 nella Casella di testo associata a questo comportamento, viene eseguito il gestore keyup. Il gestore keyup abilita o disabilita il pulsante a seconda che textBox associato al comportamento contenga qualsiasi testo.
Tenere presente che è necessario compilare il file JavaScript nell'elenco 3 come risorsa incorporata. Selezionare il file nella finestra Esplora soluzioni, aprire il foglio delle proprietà e assegnare il valore Embedded Resource alla proprietà Build Action (vedere la figura 3). Questa opzione è disponibile sia in Visual Studio che in Visual Web Developer.
Figura 03: Aggiunta di un file JavaScript come risorsa incorporata(Fare clic per visualizzare l'immagine full-size)
Creazione dell'estensione personalizzata Designer
C'è un'ultima classe che è necessario creare per completare l'estensione. È necessario creare la classe di progettazione nell'elenco 4. Questa classe è necessaria per eseguire il comportamento corretto dell'estensione con Visual Studio/Visual Web Developer Designer.
Elenco 4 - DisabledButtonDesigner.vb
Imports AjaxControlToolkit.Design
Public Class DisabledButtonDesigner
Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)
End Class
Si associa la finestra di progettazione in List 4 all'estensione 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'estensione personalizzata
Dopo aver completato la creazione dell'estensione del controllo DisabledButton, è ora di usarla nel sito Web ASP.NET. Prima di tutto, è necessario aggiungere l'estensione personalizzata alla casella degli strumenti. Seguire questa procedura:
- Aprire una pagina ASP.NET facendo doppio clic sulla pagina nella finestra Esplora soluzioni.
- Fare clic con il pulsante destro del mouse sulla casella degli strumenti e selezionare l'opzione di menu Scegliere elementi.
- Nella finestra di dialogo Scegli elementi della casella degli strumenti passare all'assembly CustomExtenders.dll.
- Fare clic sul pulsante OK per chiudere la finestra di dialogo.
Al termine di questi passaggi, l'estensione del controllo DisabledButton deve essere visualizzata nella casella degli strumenti (vedere la figura 4).
Figura 04: DisabilitatoButton nella casella degli strumenti(Fare clic per visualizzare l'immagine full-size)
È quindi necessario creare una nuova pagina ASP.NET. Seguire questa procedura:
- Creare una nuova pagina di ASP.NET denominata ShowDisabledButton.aspx.
- Trascinare scriptManager nella pagina.
- Trascinare un controllo TextBox nella pagina.
- Trascinare un controllo Button nella pagina.
- Nella Finestra Proprietà modificare la proprietà Button ID sul valore btnSave e la proprietà Text sul valore Save*.
È stata creata una pagina con un controllo TextBox e Button standard ASP.NET.
È quindi necessario estendere il controllo TextBox con l'estensione DisabledButton:
- Selezionare l'opzione Aggiungi attività Extender per aprire la finestra di dialogo Estensione guidata (vedere Figura 5). Si noti che la finestra di dialogo include l'estensione DisabledButton personalizzata.
- Selezionare l'estensione DisabledButton e fare clic sul pulsante OK .
Figura 05: Finestra di dialogo Estensione guidata (Fare clic per visualizzare l'immagine full-size)
Infine, è possibile impostare le proprietà dell'estensione DisabledButton. È possibile modificare le proprietà dell'estensione DisabledButton modificando le proprietà del controllo TextBox:
- Selezionare TextBox nella Designer.
- Nella Finestra Proprietà espandere il nodo Extender (vedere la figura 6).
- Assegnare il valore Save alla proprietà DisabledText e il valore btnSave alla proprietà TargetButtonID.
Figura 06: Impostazione delle proprietà dell'estensione(Fare clic per visualizzare l'immagine full-size)
Quando si esegue la pagina (premendo F5), il controllo Button viene inizialmente disabilitato. Non appena si inizia a immettere testo nella casella di testo, il controllo Pulsante è abilitato (vedere figura 7).
Figura 07: Estensione DisabledButton in azione(Fare clic per visualizzare l'immagine full-size)
Riepilogo
L'obiettivo di questa esercitazione è spiegare come estendere AJAX Control Toolkit con controlli di estensione personalizzati. In questa esercitazione è stato creato un semplice estensione del controllo DisabledButton. Questa estensione è stata implementata creando una classe DisabledButtonExtender, un comportamento JavaScript DisabledButtonBehavior e una classe DisabledButtonDesigner. Si segue un set simile di passaggi ogni volta che si crea un estensione di controllo personalizzato.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per