Utilisation des contrôles et des extensions de contrôle AJAX Control Toolkit (VB)

par Microsoft

Découvrez comment ajouter des contrôles et des extendeurs AJAX Control Toolkit à vos pages ASP.NET.

Le Kit de ressources de contrôle AJAX contient un ensemble de contrôles et d’extendeurs de contrôle. Dans ce bref tutoriel, vous allez apprendre à ajouter des contrôles et des extendeurs de contrôle à une page ASP.NET.

L'utilisation des contrôles d'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 à partir du Kit de ressources de contrôle AJAX. La page doit contenir un contrôle ScriptManager. Le contrôle ScriptManager est chargé d’inclure l’ensemble des contrôles JavaScript nécessaires requis par les contrôles AJAX Control Toolkit.

Par exemple, l’onglet Kit de ressources de contrôle AJAX 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 :

1. Créer une page ASP.NET nommée ShowEditor.aspx
2. Sélectionnez le contrôle ScriptManager sous l’onglet Extensions AJAX de la boîte à outils et faites glisser le contrôle sur la page.
3. Sélectionnez le contrôle Éditeur sous l’onglet Kit de ressources de contrôle AJAX dans la boîte à outils et faites glisser le contrôle sur la page (voir la figure 1). Le Concepteur doit ressembler à la figure 2.
4. 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.
5. La page de la figure 3 doit s’afficher.

Figure 01 : Sélection du contrôle Éditeur HTML (Cliquez pour afficher l’image de taille complète)

Figure 02 : Designer Visual Studio avec ScriptManager et contrôle de modification (Cliquer pour afficher l’image de taille complète)

Figure 03 : Page DisplayEditor.aspx(Cliquez pour afficher l’image de taille complète)

Utilisation des extensions de contrôle du toolkit AJAX

Le Kit de ressources de contrôle AJAX 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'extendeur de contrôle ConfirmButton étend le contrôle standard ASP.NET Button. L’extendeur 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 extendeurs de contrôle dans la page.

Procédez comme suit pour utiliser l’extendeur de contrôle ConfirmButton :

1. Créer une page ASP.NET nommée ShowConfirmButton.aspx
2. Ajoutez un contrôle ScriptManager à la page en faisant glisser le contrôle sur la page sous l’onglet Extensions AJAX.
3. Ajoutez un contrôle Bouton standard à la page en faisant glisser le Bouton depuis l’onglet Standard de la boîte à outils vers la surface du concepteur.
4. Cliquez sur l’option Ajouter une tâche Extender (voir la figure 4).
5. Dans la boîte de dialogue Choisir un extendeur, sélectionnez ConfirmButtonExtender (voir la figure 5), puis cliquez sur le bouton OK.
6. Sélectionnez le contrôle Button dans le Concepteur et développez le nœud Button1_ConfirmButtonExtender dans les extensions de la fenêtre Propriétés (voir la figure 6). Affectez la valeur « Vraiment ? » à la propriété ConfirmText.
7. 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 : Option Ajouter une tâche Extender(Cliquez pour afficher l’image de taille complète)

Figure 05 : Sélection de l’extendeur de contrôle ConfirmButton (Cliquez pour afficher l’image de taille complète)

Figure 06 : Définition d’une propriété ConfirmButton (Cliquez pour afficher l’image de taille complète)

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 de taille complète)

Notez que vous ne faites normalement pas glisser un extendeur de contrôle sur une page. Au lieu de cela, vous utilisez l’option Ajouter une tâche Extender pour ajouter un extendeur à un contrôle que vous avez déjà ajouté à une page. Notez également que vous définissez les propriétés de l’extendeur de contrôle en ouvrant la feuille de propriétés du 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.