Utilisation de contrôles AJAX Control Toolkit et extendeurs de contrôle (VB)
par Microsoft
Découvrez comment ajouter des contrôles et des extensions AJAX Control Toolkit à vos pages ASP.NET.
Ajax Control Toolkit contient un ensemble de contrôles et d’extension de contrôle. Dans ce bref tutoriel, vous allez apprendre à ajouter des contrôles et des extensions de contrôle à une page de ASP.NET.
Notes
Pour obtenir des instructions sur l’installation d’AJAX Control Toolkit et l’ajout d’AJAX Control Toolkit à la boîte à outils Visual Studio/Visual Web Developer, consultez le tutoriel Prise en main du kit de ressources de contrôle AJAX.
Utilisation des contrôles AJAX Control Toolkit
Un contrôle AJAX Control Toolkit fonctionne comme un contrôle ASP.NET normal. Vous pouvez faire glisser le contrôle de la boîte à outils vers une page ASP.NET. Vous pouvez ajouter le contrôle à la page en mode Création ou En mode Source.
Il existe une exigence particulière lors de l’utilisation des contrôles du kit de ressources de contrôle AJAX. La page doit contenir un contrôle ScriptManager. Le contrôle ScriptManager est chargé d’inclure tous les JavaScript nécessaires requis par les contrôles AJAX Control Toolkit.
Par exemple, l’onglet Ajax Control Toolkit inclut un contrôle nommé contrôle Editor. Ce contrôle affiche un éditeur HTML enrichi. Procédez comme suit pour ajouter le contrôle Éditeur à une page :
- Créer une page ASP.NET nommée ShowEditor.aspx
- Sélectionnez le contrôle ScriptManager sous l’onglet Extensions AJAX de la boîte à outils, puis faites glisser le contrôle sur la page.
- Sélectionnez le contrôle Éditeur sous l’onglet Ajax Control Toolkit dans la boîte à outils, puis faites glisser le contrôle sur la page (voir figure 1). Le Designer doit ressembler à la figure 2.
- Exécutez le site web en sélectionnant l’option de menu Déboguer, Démarrer le débogage ou en appuyant sur la touche F5.
- Vous devriez voir la page dans la figure 3.
Figure 01 : Sélection du contrôle Éditeur HTML (Cliquer pour afficher l’image en taille réelle)
Figure 02 : Visual Studio Designer avec le contrôle ScriptManager et Modifier (Cliquez pour afficher l’image en taille réelle)
Figure 03 : Page DisplayEditor.aspx(Cliquez pour afficher l’image en taille réelle)
Utilisation des extendeurs de contrôle AJAX Control Toolkit
Ajax Control Toolkit contient également des extendeurs de contrôle. Comme son nom l’indique, un extendeur de contrôle étend les fonctionnalités d’un contrôle existant. Par exemple, l’extension de contrôle ConfirmButton étend le contrôle standard ASP.NET Button. L’extension modifie le comportement du contrôle Button afin que le bouton affiche une boîte de dialogue de confirmation lorsque vous cliquez dessus.
Un extendeur de contrôle, tout comme un contrôle AJAX Control Toolkit, nécessite un contrôle ScriptManager. Vous devez ajouter un contrôle ScriptManager à une page avant de commencer à utiliser des extensions de contrôle dans la page.
Procédez comme suit pour utiliser l’extension de contrôle ConfirmButton :
- Créer une page ASP.NET nommée ShowConfirmButton.aspx
- Ajoutez un contrôle ScriptManager à la page en faisant glisser le contrôle sur la page à partir de sous l’onglet Extensions AJAX.
- Ajoutez un contrôle Bouton standard à la page en faisant glisser le bouton sous l’onglet Standard de la boîte à outils sur la surface Designer.
- Cliquez sur l’option Ajouter une tâche d’extension (voir figure 4).
- Dans la boîte de dialogue Choisir un extendeur, sélectionnez ConfirmButtonExtender (voir figure 5), puis cliquez sur le bouton OK.
- Sélectionnez le contrôle Button dans le Designer et développez le nœud Extenders, Button1_ConfirmButtonExtender dans le Fenêtre Propriétés (voir figure 6). Attribuez la valeur « Really ? » à la propriété ConfirmText.
- Exécutez la page en sélectionnant l’option de menu Déboguer, Démarrer le débogage ou appuyez sur la touche F5.
Figure 04 : l’option Ajouter une tâche Extender (Cliquez pour afficher l’image de taille réelle)
Figure 05 : Sélection de l’extendeur de contrôle ConfirmButton (Cliquez pour afficher l’image en taille réelle)
Figure 06 : Définition d’une propriété ConfirmButton(Cliquez pour afficher l’image de taille réelle)
Lorsque la page s’ouvre, un bouton doit s’afficher. Lorsque vous cliquez sur le bouton, vous obtenez la boîte de dialogue de confirmation dans la figure 7.
Figure 07 : Affichage de la boîte de dialogue de confirmation (Cliquez pour afficher l’image en taille réelle)
Notez que vous ne faites normalement pas glisser d’extension de contrôle sur une page. Au lieu de cela, vous utilisez l’option Ajouter une tâche d’extension pour ajouter un extendeur à un contrôle que vous avez déjà ajouté à une page. Notez, en outre, que vous définissez les propriétés de l’extenseur de contrôle en ouvrant la feuille de propriétés pour le contrôle en cours d’extension.
Un seul contrôle ASP.NET peut être étendu par plusieurs extendeurs de contrôle. La feuille de propriétés du contrôle en cours d’extension répertorie tous les extendeurs de contrôle associés au contrôle.