Création d'un contrôle d'extendeur pour associer un comportement client à un contrôle serveur Web
Mise à jour : novembre 2007
La fonctionnalité AJAX d'ASP.NET vous permet de développer les fonctions d'une application Web pour créer une riche expérience utilisateur. Vous pouvez utiliser les fonctions ECMAScript (JavaScript), DHTML et AJAX du navigateur Web pour ajouter des effets visuels, un traitement client tel que la validation, etc.
Ce didacticiel vous explique comment créer un contrôle d'extendeur qui encapsule un comportement client et l'associe à un contrôle serveur Web. Le comportement client ajoute des fonctionnalités aux éléments DOM (Document Object Model) du navigateur. Le contrôle d'extendeur est ensuite associé à un ou plusieurs types de contrôles serveur ASP.NET pour leur ajouter le comportement. Vous pouvez associer plusieurs contrôles d'extendeur à un contrôle serveur ASP.NET.
Dans ce didacticiel, vous allez apprendre à effectuer les opérations suivantes :
Créer un contrôle d'extendeur qui encapsule le comportement client et qui est attaché aux contrôles serveur Web sur une page Web ASP.NET.
Créer un comportement client associé au contrôle d'extendeur de serveur Web.
Gérer des événements à partir du DOM de navigateur à l'aide du comportement client.
.gif "Remarque")
Remarque :Vous pouvez également ajouter de riches fonctionnalités clientes aux contrôles serveur ASP.NET sans contrôle d'extendeur distinct. Pour obtenir un exemple de création d'un contrôle serveur Web qui inclut la même fonctionnalité cliente que ce didacticiel, consultez Ajout de fonctionnalités clientes à un contrôle serveur Web.
Compiler le contrôle d'extendeur personnalisé en assembly et intégrer les fichiers JavaScript associés en tant que ressources dans cet assembly.
Référencer le contrôle d'extendeur personnalisé qui a été compilé dans une page Web ASP.NET AJAX .
Définition de la configuration client requise
Ce didacticiel implémente un comportement client simple qui met en surbrillance un contrôle dans une page Web (tel qu'un contrôle TextBox ou Button ) lorsqu'il est sélectionné (ou a le focus) dans le navigateur. Par exemple, le contrôle peut changer de couleur d'arrière-plan lorsqu'il a le focus, puis retourner à sa couleur par défaut lorsque le focus est transféré vers un autre contrôle.
Pour implémenter ce comportement, le contrôle client dans ce didacticiel requiert les fonctions répertoriées dans le tableau suivant.
Fonction requise |
Implémentation |
|---|---|
Moyen de mettre en surbrillance un élément DOM. |
Pour mettre en surbrillance un élément DOM sur une page Web ASP.NET, le contrôle client applique un style de feuille de style en cascade (CSS) identifié par un nom de classe. Ce style peut être configuré par l'utilisateur. |
Une méthode pour rétablir l'élément DOM à son état ordinaire. |
Pour supprimer la mise en surbrillance d'un élément DOM sur une page ASP.NET, le contrôle client applique un style CSS identifié par un nom de classe. Ce style peut être configuré par l'utilisateur et appliqué à l'élément DOM en tant que style par défaut. |
Une méthode pour détecter qu'un élément DOM est sélectionné. |
Pour détecter qu'un élément DOM est sélectionné (ou, autrement dit, qu'il a le focus), le contrôle traite l'événement onfocus de l'élément DOM. |
Une méthode pour détecter qu'un élément DOM n'est pas sélectionné. |
Pour détecter qu'un contrôle n'est plus sélectionné, le contrôle traite l'événement onblur de l'élément DOM. |
Création du contrôle d'extendeur
Pour encapsuler le comportement client que les développeurs de pages ASP.NET vont utiliser, vous pouvez utiliser un contrôle d'extendeur. Un contrôle d'extendeur est un contrôle serveur Web qui hérite la classe abstraite ExtenderControl dans l'espace de noms System.Web.UI. Les contrôles d'extendeur peuvent être appliqués aux types de contrôle serveur Web spécifiques. Les types de contrôles serveur Web auxquels un contrôle d'extendeur peut être appliqué peuvent être déterminés à l'aide de l'attribut TargetControlTypeAttribute.
Le contrôle d'extendeur dans ce didacticiel peut être appliqué à tout type de contrôle serveur Web. L'exemple suivant illustre la définition de classe.
<TargetControlType(GetType(Control))> _
Public Class FocusExtender
Inherits ExtenderControl
[TargetControlType(typeof(Control))]
public class FocusExtender : ExtenderControl
Le nouveau contrôle d'extendeur inclut deux propriétés utilisées pour implémenter la configuration cliente requise :
HighlightCssClass, qui identifie la classe CSS appliquée à l'élément DOM pour mettre en surbrillance le contrôle lorsqu'il a le focus.
NoHighlightCssClass, qui identifie la classe CSS appliquée à l'élément DOM lorsqu'il n'a pas focus.
Héritage de la classe abstraite de contrôle d'extendeur
Le tableau suivant répertorie les membres de la classe abstraite ExtenderControl que vous devez implémenter dans un contrôle d'extendeur.
Member |
Description |
|---|---|
Retourne une collection d'objets ScriptDescriptor qui représentent des composants clients ECMAScript (JavaScript). notamment le type client à créer, les propriétés à affecter et les événements pour lesquels des gestionnaires doivent être ajoutés. |
|
Retourne une collection d'objets ScriptReference qui contiennent des informations à propos des bibliothèques de scripts clients à inclure avec le contrôle. Les bibliothèques de scripts clients définissent les types de clients et incluent tout autre code Javascript requis pour le contrôle. |
Le contrôle d'extendeur dans ce didacticiel utilise la méthode GetScriptDescriptors() pour définir l'instance du type de comportement client. Le contrôle crée un nouvel objet ScriptBehaviorDescriptor (la classe ScriptBehaviorDescriptor dérive de la classe ScriptDescriptor) et l'inclut dans la valeur de retour de la méthode GetScriptDescriptors.
L'objet ScriptBehaviorDescriptor inclut le nom de la classe cliente (Samples.FocusBehavior) et la valeur ClientID du contrôle serveur Web associé (cible). Le nom de la classe cliente et les valeurs de propriété ClientID sont fournies au constructeur de l'objet ScriptBehaviorDescriptor. Une référence au contrôle serveur Web cible est fournie, sous forme de paramètre, à la méthode GetScriptDescriptors(Control). La référence peut être utilisée pour déterminer la valeur ClientID du contrôle serveur Web cible, à savoir la valeur id pour l'élément DOM restitué.
La classe ScriptBehaviorDescriptor est utilisée pour définir les valeurs de propriété du comportement client obtenues à partir des propriétés du contrôle d'extendeur sur le serveur. Pour définir les propriétés du comportement client, le contrôle d'extendeur utilise la méthode AddProperty de la classe ScriptBehaviorDescriptor. Le contrôle d'extendeur spécifie ensuite le nom et valeur pour la propriété du comportement client, selon la propriété correspondante du contrôle d'extendeur de serveur. Cet exemple utilise un objet ScriptBehaviorDescriptor pour définir la valeur des propriétés highlightCssClass et nohighlightCssClass du comportement client.
Le contrôle d'extendeur fournit l'objet ScriptBehaviorDescriptor dans la valeur de retour de la méthode GetScriptDescriptors. Par conséquent, chaque fois que le contrôle serveur Web est restitué au navigateur, ASP.NET restitue le JavaScript qui crée une instance du comportement client avec toutes les propriétés et tous les gestionnaires d'événements définis. L'instance de comportement est attachée à l'élément DOM en fonction de la propriété ClientID restituée à partir du contrôle serveur Web cible. L'exemple suivant illustre le balisage déclaratif ASP.NET qui inclut un contrôle serveur ASP.NET et le contrôle d'extendeur de ce didacticiel dans une page.
<asp:TextBox ID="TextBox1" />
<sample: FocusExtender
ID="FocusExtender1"
HighlightCssClass="MyHighLight"
NoHighlightCssClass="MyLowLight"
TargetControlID="TextBox1" />
La sortie restituée de la page inclut un appel à la méthode $create qui identifie le comportement client à créer. Il fournit également des valeurs pour les propriétés du comportement client et la valeur id de l'élément DOM ciblé par le comportement client. L'exemple suivant illustre une méthode $create restituée :
$create(Samples.FocusBehavior, {"highlightCssClass":"MyHighLight","nohighlightCssClass":"MyLowLight"}, null, null, $get('TextBox1'));
Le contrôle d'extendeur dans ce didacticiel utilise la méthode GetScriptReferences pour transmettre l'emplacement de la bibliothèque de scripts qui définit le type de comportement client. Dans l'exemple, il s'agit d'une URL vers le fichier de script nommé FocusBehavior.js qui va être créé dans la suite de ce didacticiel. La référence est réalisée en créant un nouvel objet ScriptReference et en affectant ensuite l'URL du fichier qui contient le code client à la propriété Path.
L'exemple suivant illustre l'implémentation des méthodes GetScriptDescriptors et 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 };
}
Création du comportement client
Dans le contrôle d'extendeur, la méthode GetScriptReferences spécifie un fichier JavaScript (FocusBehavior.js) qui contient le code client du type de comportement. Cette section décrit le code Javascript de ce fichier.
Le code de comportement client correspond aux membres spécifiés dans les objets ScriptDescriptor retournés par la méthode GetScriptDescriptors. Un comportement client peut également avoir des membres qui ne correspondent pas aux membres du contrôle d'extendeur de serveur.
Le contrôle d'extendeur dans ce didacticiel affecte au comportement client le nom Samples.FocusBehavior et définit deux propriétés du comportement client : highlightCssClass et nohighlightCssClass.
Pour plus d'informations sur la création de composants et comportements clients, consultez Création d'une classe Component cliente à l'aide du modèle de prototype.
Création de l'espace de noms client
Le code client doit d'abord appeler la méthode registerNamespace de la classe Type pour créer son espace de noms (Samples). L'exemple suivant illustre la méthode d'enregistrement de l'espace de noms client.
// Register the namespace for the control.
Type.registerNamespace('Samples');
Définition de la classe cliente
La classe Samples.FocusBehavior définit la classe Samples.FocusBehavior cliente. Elle inclut deux propriétés auxquelles sont attribuées les valeurs de propriété fournies par le contrôle serveur Web.
Définition du prototype de classe
Après avoir défini la classe Samples.FocusBehavior, le code client définit son prototype. Le prototype inclut les accesseurs de propriété get et set, ainsi que les gestionnaires d'événements pour les événements onfocus et onblur de l'élément DOM. Il inclut également une méthode initialize appelée lors de la création d'une instance du comportement et une méthode dispose qui exécute un nettoyage lorsque la page n'a plus besoin du comportement.
Définition des gestionnaires d'événements pour l'élément DOM
Les gestionnaires d'événements d'une classe cliente sont définis en tant que méthodes de prototype de classe. Les gestionnaires sont associés à des délégués d'événements et à des événements de l'élément DOM du navigateur par la méthode addHandlers décrite dans la suite de cette rubrique avec la méthode initialize.
Définition des méthodes de propriété Get et Set
Chaque propriété identifiée dans l'objet ScriptDescriptor de la méthode GetScriptDescriptors du contrôle d'extendeur doit avoir des accesseurs clients correspondants. Les accesseurs de propriété cliente sont définis en tant que méthodes get_<property name> et set_<property name> du prototype de classe cliente.
Implémentation des méthodes Initialize et Dispose
La méthode initialize est appelée lors de la création du comportement. Utilisez cette méthode pour définir des valeurs de propriété par défaut, créer les délégués de fonction et ajouter les délégués en tant que gestionnaires d'événements.
La méthode initialize de la classe Samples.FocusBehavior exécute les opérations suivantes :
Elle appelle la méthode initialize de la classe de base Sys.UI.Behavior.
Elle appelle la méthode addHandlers pour ajouter des délégués d'événements en tant que gestionnaires pour les événements onfocus et onblur de l'élément DOM associé. Notez que la partie « on » du nom de l'événement (par exemple, onfocus) n'est pas spécifiée.
La méthode dispose est appelée lorsqu'une instance du comportement n'est plus utilisée sur la page et qu'elle est supprimée. Utilisez-la pour libérer les ressources inutiles au comportement, telles que les gestionnaires d'événements DOM.
La méthode dispose de la classe Sample.FocusBehavior exécute les opérations suivantes :
Elle appelle la méthode clearHandlers pour effacer les délégués d'événements en tant que gestionnaires des événements onfocus et onblur de l'élément DOM associé.
Elle appelle la méthode dispose de la classe de base Behavior.
Remarque :La méthode dispose d'une classe cliente peut être appelée plus d'une fois. Assurez-vous que le code inclus dans la méthode dispose en tient compte.
Enregistrement du comportement
La dernière tâche de création d'un comportement client consiste à enregistrer la classe cliente en appelant la méthode registerClass. La classe étant un comportement client, l'appel à la méthode registerClass inclut le nom de classe JavaScript à enregistrer. Il spécifie également Behavior comme classe de base.
L'exemple complet ci-dessous inclut un appel à la méthode notifyScriptLoaded de la classe Sys.Application. Cet appel est requis pour notifier Microsoft AJAX Library que le fichier JavaScript a été chargé.
L'exemple suivant présente le code JavaScript complet du comportement client Samples.FocusBehavior. Le code de ce didacticiel requiert que le fichier JavaScript soit nommé FocusBehavior.js pour être placé dans le répertoire 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();
L'exemple suivant présente le code complet pour la page 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>
L'exemple suivant présente le code complet pour la classe FocusExtender. Ce code est normalement placé dans le répertoire 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 };
}
}
}
Compilation dynamique du contrôle d'extendeur à des fins de tests
Tout contrôle serveur Web, tel que le contrôle d'extendeur décrit dans ce didacticiel, doit être compilé avant de pouvoir le référencer dans une page Web. Vous pouvez utiliser la fonctionnalité de compilation dynamique d'ASP.NET 2.0 pour tester les contrôles serveur Web sans les compiler manuellement dans un assembly. Elle permet de gagner du temps lors de la création et du débogage initiaux du code de contrôle serveur Web. Les étapes suivantes montrent comment utiliser le dossier App_Code pour compiler dynamiquement le contrôle d'extendeur.
Pour placer le contrôle d'extendeur dans le dossier App_Code afin de le compiler dynamiquement
Créez un dossier App_Code sous le dossier racine du site Web.
Transférez les fichiers sources .cs ou .vb du contrôle et les classes associées dans le dossier App_Code.
- ou -
Si vous avez auparavant ajouté dans le dossier Bin un assembly pour le contrôle, supprimez-le. Vous continuez à modifier les fichiers sources dans le dossier App_Code. Le code source du contrôle est compilé chaque fois que vous exécutez votre projet.
Remarque :Vous pouvez soit compiler un contrôle dans un assembly et placer l'assembly dans le dossier Bin, soit placer le fichier source du contrôle dans le dossier App_Code, mais pas les deux. Si vous ajoutez le contrôle aux deux dossiers, l'analyseur de page ne sera pas capable de résoudre une référence au contrôle dans une page et générera une erreur.
Exécutez la page Web. Le contrôle d'extendeur est compilé dynamiquement.
Test du contrôle d'extendeur compilé dynamiquement dans une page Web
La procédure suivante explique comment tester le contrôle d'extendeur dans une page Web ASP.NET AJAX. Le code du contrôle serveur Web est compilé dynamiquement à partir du dossier App_Code.
Pour utiliser le comportement dans une page ASP.NET
Créez une nouvelle page Web ASP.NET.
Si la page n'a pas encore de contrôle ScriptManager, ajoutez-en un.
Créez des règles de style CSS pour les zones de texte qui sont mises en surbrillance et pour celles qui ne le sont pas.
Vous pouvez choisir la mise en surbrillance à votre gré, par exemple en modifiant la couleur d'arrière-plan du contrôle, en ajoutant une bordure ou en changeant la police de caractère.
Ajoutez une directive @ Register à la page, puis spécifiez l'espace de noms et l'attribut TagPrefix pour le contrôle d'extendeur.
Remarque :Dans cet exemple, le code de contrôle serveur se situe dans le dossier App_Code pour pouvoir être compilé dynamiquement. Un attribut d'assembly n'est donc pas spécifié.
Ajoutez des contrôles TextBox et Button à la page, puis définissez leur propriété Id.
Le balisage des contrôles doit inclure .
Ajoutez une instance du contrôle FocusExtender à la page.
Affectez à la propriété TargetControlID du contrôle FocusExtender l'ID du contrôle Button ajouté précédemment.
Affectez à la propriété HighlightCssClass le style CSS de mise en surbrillance et à la propriété NoHighlightCssClass le style CSS sans mise en surbrillance.
Exécutez la page et sélectionnez chaque contrôle.
Remarquez que lorsque vous sélectionnez le contrôle Button, il est mis en surbrillance.
Modifiez la propriété TargetControlID du contrôle FocusExtender pour lui affecter l'ID du contrôle TextBox, puis exécutez une nouvelle fois la page.
Cette fois, le contrôle TextBox est mis en surbrillance lorsqu'il a le focus. Le comportement encapsulé dans le contrôle FocusExtender peut être appliqué à différents contrôles serveur ASP.NET sur la page. Pour appliquer comportement à plusieurs contrôles, vous pouvez ajouter plusieurs instances du contrôle d'extendeur à la page et associer chaque instance à un contrôle serveur ASP.NET différent.
Compilation du contrôle d'extendeur dans un assembly
L'intégration du composant JavaScript et du code d'extension de contrôle serveur Web dans un assembly simplifie le déploiement du contrôle d'extendeur personnalisé. La création d'un assembly simplifie également le contrôle de version pour le contrôle. De plus, il n'est pas possible d'ajouter des contrôles à la boîte à outils d'un concepteur sans les compiler dans un assembly.
La procédure suivante décrit la création d'une bibliothèque de code dans le projet du didacticiel à l'aide de Visual Studio. Vous allez transférer une copie de vos fichiers de code dans une nouvelle bibliothèque de code pour le projet de ce didacticiel. La compilation du contrôle d'extendeur dans une bibliothèque de code crée un assembly que vous pouvez déployer.
| Remarque : |
|---|
Pour exécuter cette procédure, vous devez utiliser Microsoft Visual Studio 2005 ou Visual Studio 2008. Vous ne pouvez pas utiliser Microsoft Visual Web Developer Express, parce que Visual Web Developer Express ne permet pas de créer deux projets dans la même solution. |
Pour ajouter une nouvelle bibliothèque de code à votre projet
Dans le menu Fichier de Visual Studio, cliquez sur Nouveau, puis sur Projet.
La boîte de dialogue Nouveau projet s'affiche.
Sous Types de projets, sélectionnez Visual C# ou Visual Basic.
Sous Modèles, sélectionnez Bibliothèque de classes, puis nommez le projet Samples.
Dans la liste Solution, sélectionnez Ajouter à la solution, puis cliquez sur OK.
La bibliothèque de classes Samples est ajoutée à la solution existante.
Pour transférer le contrôle d'extendeur de serveur personnalisé dans une bibliothèque de code
Ajoutez les références suivantes dont a besoin le contrôle d'extendeur de serveur personnalisé au projet de bibliothèque de classes Samples :
System.Drawing
System.Web
System.Web.Extensions
Dans l'Explorateur de solutions, copiez le fichier FocusExtender.cs ou FocusExtender.vb et le fichier FocusBehavior.js du projet d'origine du didacticiel vers la racine du projet de bibliothèque de classes Samples.
Dans le Fenêtre Propriétés pour le fichier FocusBehavior.js, définissez Action de génération à Ressource incorporée.
.png)
Ajoutez la propriété suivante au fichier AssemblyInfo.
<Assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")>[assembly: System.Web.UI.WebResource("Samples.FocusBehavior.js", "text/javascript")]Remarque :Le fichier AssemblyInfo.vb est dans le nœud My Project de l'Explorateur de solutions. Si vous ne voyez pas de fichiers dans le nœud My Project, procédez comme suit : dans le menu Projet, cliquez sur Afficher tous les fichiers. Le fichier AssemblyInfo.cs est dans le nœud Propriétés de l'Explorateur de solutions.
La définition WebResource des fichiers JavaScript doit suivre la convention d'affectation de noms [espace de noms de l'assembly].[nom du fichier JavaScript].js.
Remarque :Par défaut, Visual Studio affecte à l'espace de noms d'assembly le nom de l'assembly. Vous pouvez modifier l'espace de noms d'assembly dans les propriétés de l'assembly.
Dans le fichier de classe FocusExtender, modifiez l'objet ScriptReference dans la méthode GetScriptReferences pour référencer le script de contrôle client incorporé dans l'assembly Samples. Pour cela, apportez les modifications suivantes :
Remplacez la propriété Path par une propriété Assembly définie à « Samples ».
Ajoutez une propriété Name et définissez sa valeur à « Samples.FocusBehavior.js ».
L'exemple suivant affiche le résultat de cette modification.
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 Functionprotected override IEnumerable<ScriptReference> GetScriptReferences() { ScriptReference reference = new ScriptReference(); reference.Assembly = "Samples"; reference.Name = "Samples.FocusBehavior.js"; return new ScriptReference[] { reference }; }Générez le projet.
La compilation produit un assembly nommé Samples.dll. Le fichier de code Javascript (FocusBehavior.js) est incorporé en tant que ressource à cet assembly.
Remarque :N'oubliez pas de régénérer le projet de bibliothèque de classes chaque fois que vous ajoutez des nouveaux fichiers sources ou que vous modifiez des fichiers existants.
Utilisation du contrôle d'extendeur compilé d'un assembly dans une page Web
Le contrôle d'extendeur personnalisé compilé doit ensuite être référencé dans une page Web ASP.NET AJAX.
Pour référencer le contrôle d'extendeur personnalisé dans une page Web ASP.NET AJAX
Créez un nouveau projet ASP.NET AJAX.
Dans le répertoire racine du site Web, créez un répertoire Bin.
Copiez l'assembly Samples.dll du dossier Bin\Debug ou Bin\Release du projet de classe de Samples dans le nouveau dossier Bin.
Ajoutez une nouvelle page Web ASP.NET nommée TestFocusExtender.aspx, puis ajoutez le balisage suivant à la nouvelle page.
<%@ Register Assembly="Samples" Namespace="Samples.VB" TagPrefix="sample" %><%@ Register Assembly="Samples" Namespace="Samples.CS" TagPrefix="sample" %>Le contrôle serveur étant compilé dans un assembly, la directive @ Register comporte un attribut Assembly qui référence l'assembly Samples en plus des attributs Namespace et TagPrefix.
Exécutez la page et sélectionnez chaque contrôle.
Lorsque vous sélectionnez le contrôle FocusBehavior, il est mis en surbrillance.
La page Web qui utilise le contrôle d'extendeur personnalisé compilé inclut l'attribut Assembly dans la directive @ Register. Dans le cas contraire, elle est identique à la page Web vous avez utilisée pour le contrôle dans le dossier App_Code.
Voir aussi
Concepts
Ajout de fonctionnalités clientes à un contrôle serveur Web
Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles liés aux données