Creazione di un controllo Extender di AJAX Control Toolkit personalizzato (C#)
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'estensione del controllo AJAX Control Toolkit personalizzata. Viene creato un semplice, ma utile, nuovo extender che modifica lo stato di un controllo Button da disabilitato a abilitato quando si digita il testo in un controllo TextBox. Dopo aver letto questa esercitazione, sarà possibile estendere il toolkit ASP.NET AJAX con i propri extender 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'extender DisabledButton
Il nuovo extender di controllo è denominato extender DisabledButton. Questo extender avrà tre proprietà:
- TargetControlID: controllo TextBox esteso dal controllo.
- TargetButtonIID: pulsante disabilitato o abilitato.
- DisabledText: testo visualizzato inizialmente in Button. Quando si inizia a digitare, il pulsante visualizza il valore della proprietà Testo pulsante.
L'estensione DisabledButton viene associata a un controllo TextBox e Button. Prima di digitare testo, il pulsante è disabilitato e Il controllo TextBox e Button hanno un aspetto simile al seguente:
(Fare clic per visualizzare l'immagine a dimensione intera)
Dopo aver iniziato a digitare testo, il pulsante è abilitato e il controllo TextBox e Button hanno un aspetto simile al seguente:
(Fare clic per visualizzare l'immagine a dimensione intera)
Per creare l'estensione del controllo, è necessario creare i tre file seguenti:
- DisabledButtonExtender.cs: questo file è la classe di controllo lato server che gestirà la creazione dell'estensione e consentirà 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 consente di aggiungere tutta la logica dello script client.
- DisabledButtonDesigner.cs: questa classe abilita la funzionalità della fase di progettazione. Questa classe è necessaria se si vuole che l'estensione 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.
Creazione del sito Web e del progetto extender personalizzati
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'estensione personalizzata nel progetto di 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 sito Web ASP.NET .
- Assegnare al nuovo sito Web il nome Website1.
- Fare clic sul pulsante OK .
Successivamente, è 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 alla nuova libreria di classi il nome CustomExtenders.
- Fare clic sul pulsante OK .
Dopo aver completato questi passaggi, la finestra di Esplora soluzioni dovrebbe essere simile alla figura 1.
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 assembly necessari al progetto di libreria di classi:
Fare clic con il pulsante destro del mouse sul progetto CustomExtenders e scegliere 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 AJAX Control Toolkit.
Dopo aver completato questi passaggi, la cartella Riferimenti al progetto di libreria di classi avrà un aspetto simile alla figura 2.
Figura 02: Fa riferimento alla cartella con i riferimenti necessari (fare clic per visualizzare l'immagine a dimensione intera)
Creazione dell'estensione del controllo personalizzato
Ora che è disponibile la libreria di classi, è possibile iniziare a creare il controllo extender. Si inizierà con le ossa bare di una classe di controllo extender personalizzata (vedere Listato 1).
Listato 1 - MyCustomExtender.cs
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
[assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")]
namespace CustomExtenders
{
[ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class MyControlExtender : ExtenderControlBase
{
[ExtenderControlProperty]
[DefaultValue("")]
public string MyProperty
{
get
{
return GetPropertyValue("MyProperty", "");
}
set
{
SetPropertyValue("MyProperty", value);
}
}
}
}
Esistono diversi aspetti che si notano sulla classe extender del controllo in Listato 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 di 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: fa sì che un file venga incluso come risorsa incorporata in un assembly.
- ClientScriptResource: fa sì che una risorsa script venga recuperata 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 l'estensione personalizzata viene usata in una pagina Web.
Per il corretto 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 esteso dall'extender del controllo. Nel caso dell'elenco 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'estensione del controllo lato server al comportamento lato client.
Procedere e implementare il codice per l'estensione DisabledButton. Il codice per questo extender è disponibile nell'elenco 2.
Elenco 2 - DisabledButtonExtender.cs
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
[assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")]
namespace CustomExtenders
{
[ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class DisabledButtonExtender : ExtenderControlBase
{
[ExtenderControlProperty]
[DefaultValue("")]
[IDReferenceProperty(typeof(Button))]
public string TargetButtonID
{
get
{
return GetPropertyValue("TargetButtonID", "");
}
set
{
SetPropertyValue("TargetButtonID", value);
}
}
[ExtenderControlProperty]
[DefaultValue("")]
public string DisabledText
{
get
{
return GetPropertyValue("DisabledText", "");
}
set
{
SetPropertyValue("DisabledText", value);
}
}
}
}
L'estensione DisabledButton in Listing 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 viene illustrato nella sezione successiva.
Creazione del comportamento dell'extender personalizzato
Il componente lato client di un extender di controllo è denominato comportamento. La logica effettiva per la disabilitazione e l'abilitazione di Button è 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 keyup abilita o disabilita il controllo Button a seconda che il controllo 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.
Figura 03: Aggiunta di un file JavaScript come risorsa incorporata (fare clic per visualizzare l'immagine a dimensione intera)
Creazione del Designer extender personalizzato
È necessario creare un'ultima classe per completare l'estensione. È necessario creare la classe di progettazione in Listing 4. Questa classe è necessaria per fare in modo che l'extender si comporti correttamente con Visual Studio/Visual Web Developer Designer.
Elenco 4 - DisabledButtonDesigner.cs
using System.Web.UI.WebControls;
using System.Web.UI;
namespace CustomExtenders
{
class DisabledButtonDesigner : AjaxControlToolkit.Design.ExtenderControlBaseDesigner
{
}
}
La finestra di progettazione in Listato 4 viene associata all'estensione DisabledButton con l'attributo Designer. È necessario applicare l'attributo Designer alla classe DisabledButtonExtender come segue:
[Designer(typeof(DisabledButtonDesigner))]
[ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class DisabledButtonExtender : ExtenderControlBase
{
Uso dell'estensione personalizzata
Dopo aver completato la creazione dell'extender del controllo DisabledButton, è possibile usarlo nel sito Web di 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 scegliere l'opzione di menu Scegli elementi.
- Nella finestra di dialogo Scegli elementi casella degli strumenti passare all'assembly CustomExtenders.dll.
- Fare clic sul pulsante OK per chiudere la finestra di dialogo.
Dopo aver completato questi passaggi, l'extender del controllo DisabledButton dovrebbe essere visualizzato nella casella degli strumenti (vedere la figura 4).
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. 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 impostando il valore btnSave e la proprietà Text sul valore Save*.
È stata creata una pagina con un controllo Standard ASP.NET TextBox e Button.
Successivamente, è necessario estendere il controllo TextBox con l'estensione DisabledButton:
- Selezionare l'opzione Aggiungi attività Extender per aprire la finestra di dialogo Estensione guidata (vedere la 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 Procedura guidata estensione (fare clic per visualizzare l'immagine a dimensione intera)
Infine, è possibile impostare le proprietà dell'estensione DisabledButton. È possibile modificare le proprietà dell'extender DisabledButton modificando le proprietà del controllo TextBox:
- Selezionare il controllo TextBox nel Designer.
- Nella Finestra Proprietà espandere il nodo Extenders (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 a dimensione intera)
Quando si esegue la pagina (premendo F5), il controllo Pulsante viene inizialmente disabilitato. Non appena si inizia a immettere testo nella casella di testo, il controllo Pulsante è abilitato (vedere la figura 7).
Figura 07: Estensione DisabledButton in azione(Fare clic per visualizzare l'immagine a dimensione intera)
Riepilogo
L'obiettivo di questa esercitazione è spiegare come estendere AJAX Control Toolkit con controlli extender personalizzati. In questa esercitazione è stato creato un semplice extender del 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.
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