Share via

Procédure pas à pas : utilisation avancée du contrôle Wizard ASP.NET

  • Article

Mise à jour : novembre 2007

Le contrôle Wizard ASP.NET simplifie un grand nombre des tâches associées à la génération de formulaires et à la collecte d'entrées d'utilisateur. Dans cette procédure pas à pas, vous utilisez le contrôle Wizard pour créer un formulaire qui collecte les informations sur les adresses d'un utilisateur, leur permet de s'abonner ou d'annuler l'abonnement à une liste de publipostage sur les mises à jour d'adresse de messagerie et leur présente ensuite les données et les choix lors d'une dernière étape de confirmation. Cette procédure pas à pas illustre les tâches suivantes :

  • Modification de la disposition d'une étape de l'Assistant.

  • Ajout d'une étape personnalisée de l'Assistant.

  • Capture d'un événement de l'Assistant par programme.

  • Création de branche de votre Assistant en fonction des choix de l'utilisateur.

  • Affichage des données utilisateur dans une étape d'achèvement.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

  • Microsoft Visual Web Developer.

  • .NET Framework

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, à l'aide de la rubrique Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site et passer à l'étape "Ajout d'un contrôle de l'Assistant à la page" de cette procédure. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

    Par exemple, tapez le nom du dossier C:\SitesWeb.

  5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx.

Ajout d'un contrôle de l'Assistant à la page.

Pour ajouter un contrôle de l'Assistant à la page

  1. Basculez en mode Design.

  2. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle Wizard sur la page.

Rassemblement des informations sur les noms et les adresses

Ensuite, vous configurez chaque étape de votre Assistant afin de rassembler les données utilisateur, de demander une adresse de messagerie et d'afficher les données recueillies dans l'étape d'achèvement.

En premier lieu, collectez le nom, l'adresse, la ville, l'état et le code postal de l'utilisateur.

Pour configurer la première étape

  1. Faites glisser l'une des poignées du bord du contrôle de l'Assistant afin de doubler la taille par défaut du contrôle.

  2. Cliquez sur le texte Step 1 souligné dans le contrôle de l'Assistant, puis cliquez dans la zone de modification à droite de Step 1 dans le contrôle de l'Assistant.

    Vous pouvez maintenant modifier la zone d'affichage pour étape 1.

  3. Tapez Name.

  4. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle TextBox près de votre texte.

  5. Dans la fenêtre Propriétés, modifiez l'ID du contrôle TextBox de TextBox1 en Name.

  6. Répétez le processus, en ajoutant des légendes et des contrôles TextBox (n'oubliez pas de nommer les contrôles car vous devrez leur faire référence ultérieurement) à collecter :

    • Adresse

    • City

    • État

    • PostalCode

  7. Enregistrez le fichier.

Ajout d'un choix de mise à jour d'adresse de messagerie

Dans cette partie de la procédure pas à pas, vous permettez à l'utilisateur de choisir s'il souhaite recevoir des mises à jour d'adresse de messagerie.

Pour ajouter un choix de mise à jour d'adresse de messagerie

  1. Cliquez sur Step 2.

  2. Cliquez sur la zone modifiable à droite de Step 2 et tapez Souhaitez-vous recevoir des mises à jour d'adresse de messagerie ?.

  3. Sous la question, tapez : Oui.

  4. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle RadioButton près du mot Oui.

  5. Type Non.

  6. Faites glisser un autre RadioButton de la Boîte à outils sur le contrôle près du mot Non.

Ajout d'une étape personnalisée pour collecter une adresse de messagerie

Dans cette section, vous ajoutez une étape personnalisée à l'Assistant qui collecte l'adresse de messagerie de l'utilisateur. Ultérieurement, vous allez ajouter du code afin d'ignorer cette étape si l'utilisateur décide de ne pas obtenir de mises à jour d'adresse de messagerie.

Ajout d'une étape personnalisée permettant de collecter l'adresse de messagerie de l'utilisateur

  1. Cliquez avec le bouton droit sur le contrôle de l'Assistant en dehors des zones de modification et cliquez sur Afficher la balise active.

  2. Dans la boîte de dialogue Tâches Wizard, sélectionnez Ajouter/Supprimer WizardSteps.

    L'Éditeur de collections WizardStep s'affiche.

  3. Dans la liste déroulante Ajouter du bouton Ajouter, cliquez sur WizardStep.

  4. Cliquez sur OK.

    Le contrôle de l'Assistant affiche la nouvelle étape.

  5. Cliquez sur la nouvelle étape pour le basculer en mode Édition.

  6. Dans la zone modifiable, tapez Adresse de messagerie.

  7. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle TextBox sur le contrôle près des mots Adresse de messagerie.

  8. Dans Propriétés, modifiez l'ID du contrôle TextBox en EmailAddress car vous devrez lui faire référence ultérieurement dans le code.

Ajout d'une étape d'achèvement

Maintenant vous pouvez ajouter une étape d'achèvement qui présentera les données de l'utilisateur à l'utilisateur.

Pour ajouter une étape d'achèvement

  1. Cliquez avec le bouton droit sur le contrôle de l'Assistant, puis cliquez sur Afficher la balise active.

  2. Dans le menu Tâches Wizard, sur le contrôle, choisissez Ajouter/Supprimer WizardSteps.

    L'Éditeur de collections WizardStep s'affiche.

  3. Dans la liste Ajouter, cliquez sur WizardStep.

    La zone Propriétés affiche les attributs de la nouvelle étape.

  4. Dans la fenêtre Propriétés, affectez à StepType la valeur Complete.

  5. Cliquez sur OK.

    Le contrôle de l'Assistant ajoute la nouvelle étape.

  6. Cliquez sur la nouvelle étape sur le contrôle, puis cliquez sur la zone modifiable à droite de la nouvelle étape.

  7. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle Label sur la nouvelle étape.

  8. Appuyez sur ENTRÉE pour créer une nouvelle ligne.

  9. Répétez encore cinq fois l'étape 7, pour obtenir un total de six contrôles Label correspondant à :

    • Name

    • Address

    • City

    • Region or State

    • Postal Code

    • E-mail Address

  10. Enregistrez le fichier.

Avant de pouvoir exécuter l'Assistant, vous devez remplir les étiquettes au cours de l'étape d'achèvement avec les valeurs que l'utilisateur a fournies au cours des trois premières étapes de l'Assistant.

Ajout de code pour l'étape d'achèvement

Dans cette procédure pas à pas, l'étape d'achèvement affiche les données de l'utilisateur. Pour garantir l'affichage des données, vous remplissez les étiquettes de l'étape par programme. Pour afficher les données, vous écrivez le code pour l'événement Load de la page.

Pour ajouter le code

  1. Basculez sur Default.aspx et, en mode Design, double-cliquez sur l'aire de conception.

    L'éditeur de code s'ouvre pour la page et crée une méthode Page_Load squelette.

  2. Ajoutez le code mis en surbrillance suivant pour remplir l'étape d'achèvement.

    Private Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    Label1.Text = Name.Text
    Label2.Text = Address.Text
    Label3.Text = City.Text
    Label4.Text = State.Text
    Label5.Text = PostalCode.Text
    Label6.Text = EmailAddress.Text
End Sub

    void Page_Load(object sender, EventArgs e)
{
    Label1.Text = Name.Text;
    Label2.Text = Address.Text;
    Label3.Text = City.Text;
    Label4.Text = State.Text;
    Label5.Text = PostalCode.Text;
    Label6.Text = EmailAddress.Text;
}

  3. Enregistrez le fichier.

Test du contrôle de l'Assistant

Pour tester le contrôle de l'Assistant

  1. Affichez Default.aspx en mode Design.

  2. Ouvrez le menu Tâches Wizard sur le contrôle et sélectionnez Step 1 dans la liste déroulante Étape.

  3. Appuyez sur CTRL+F5 pour exécuter la page.

    Remarque :

    Lors de l'exécution de la page à partir du mode Design, le navigateur peut démarrer sur l'étape de l'Assistant actuellement active et non à la première étape. Assurez-vous que la propriété ActiveStepIndex de l'Assistant a la valeur 0 dans la fenêtre Propriétés avant de lancer la page.

  4. Tapez les informations sur le nom et les adresses.

  5. Cliquez sur Suivant.

  6. Sélectionnez l'une ou l'autre des options pour l'adresse de messagerie.

    Vous allez écrire le code pour gérer l'option d'adresse de messagerie ultérieurement dans la procédure pas à pas.

  7. Tapez une adresse de messagerie.

  8. Cliquez sur Terminer.

    Les données que vous entrez sont affichées sur la page.

Dans la section suivante, vous ajoutez le code nécessaire pour ignorer la troisième étape de collecte d'adresse de messagerie si l'utilisateur choisit de ne pas fournir d'adresse de messagerie.

Ajout de code pour ignorer l'étape d'adresse de messagerie

Maintenant que la collecte de données et les parties de disposition de votre Assistant sont remplies, vous allez ajouter la logique pour permettre à l'utilisateur d'ignorer l'étape qui collecte l'adresse de messagerie s'il ne souhaite pas recevoir de mises à jour d'adresse de messagerie. Pour ce faire, gérez l'événement NextButtonClick du contrôle Wizard. Lorsque vous gérez l'événement, vérifiez tout d'abord si l'Assistant est actuellement sur l'étape où l'utilisateur effectue un choix. Si tel est le cas, vérifiez quel contrôle RadioButton est sélectionné. Si l'utilisateur a sélectionné Non, avancez la propriété ActiveStepIndex du contrôle Wizard pour ignorer l'étape de l'Assistant qui demande l'adresse de messagerie de l'utilisateur.

Pour ajouter le code pour ignorer la troisième étape

  1. Cliquez sur le contrôle de l'Assistant. Dans la fenêtre Propriétés, tapez Wizard1_NextButtonClick pour la propriété NextButtonClick et appuyez sur ENTRÉE.

    La fenêtre de l'éditeur de code s'ouvre pour la page code-behind.

  2. Ajoutez le code mis en surbrillance suivant qui vérifie que l'étape est correcte, détermine quel contrôle RadioButton est sélectionné et détermine s'il faut ignorer l'étape 3 de l'Assistant.

    Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
   Handles Wizard1.NextButtonClick
   If Wizard1.ActiveStepIndex = 1 Then
       If RadioButton1.Checked Then
           ' Collect e-mail address.
           Wizard1.ActiveStepIndex = 2
       Else
           Wizard1.ActiveStepIndex = 3
       End If
   End If
End Sub

    void Wizard1_NextButtonClick(object sender, 
    System.Web.UI.WebControls.WizardNavigationEventArgs e)
{
     if (Wizard1.ActiveStepIndex == 1)
     {
        if (RadioButton1.Checked)
            // Collect ee-mail address.
        {
           Wizard1.ActiveStepIndex = 2;
        } 
        else 
        {
           Wizard1.ActiveStepIndex = 3;
        }
     }
}

    La définition de la propriété ActiveStepIndex engendre le déplacement de l'Assistant directement à l'étape spécifiée.

  3. Enregistrez le fichier.

Test de la capacité à ignorer une étape

Pour tester le fait d'ignorer une étape de l'Assistant par programme

  1. Affichez Default.aspx en mode Design.

  2. Ouvrez le menu Tâches Wizard sur le contrôle et sélectionnez Step 1 dans la liste déroulante Étape.

  3. Appuyez sur CTRL+F5 pour exécuter la page.

  4. Tapez les informations sur le nom et les adresses.

  5. Cliquez sur Suivant.

  6. À l'étape 2, activez la case à cocher Non.

  7. Cliquez sur Suivant.

    Vous accédez à l'étape d'achèvement.

  8. Utilisez le bouton Précédente de votre navigateur pour retourner à la première étape ou fermez le navigateur et appuyez sur CTRL+F5 pour exécuter la page à nouveau.

  9. Tapez les informations sur le nom et sur l'adresse à la première étape.

  10. Cliquez sur Suivant.

  11. À l'étape 2, activez la case à cocher Oui.

  12. Cliquez sur Suivant.

  13. Vous accédez à l'étape de collecte d'adresse de messagerie.

  14. Tapez une adresse de messagerie.

  15. Cliquez sur Suivant.

  16. Vous accédez à l'étape d'achèvement.

Étapes suivantes

Le contrôle Wizard simplifie la création de formulaires pour collecter les données de l'utilisateur. En plus de ce qui a été traité ici, vous pouvez avoir d'autres questions relatives aux formulaires ainsi qu'à l'application d'une apparence différente à votre contrôle Wizard. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :

Voir aussi

Référence

Vue d'ensemble du contrôle serveur Web Wizard