Partager via

Procédure pas à pas : création d'un contrôle Wizard ASP.NET de base

  • Article

Mise à jour : novembre 2007

La génération d'une série de formulaires pour rassembler les données utilisateur est une tâche courante dans le développement de sites Web. Le contrôle ASP.NET Wizard simplifie un grand nombre des tâches associées à la génération des formulaires et au groupement des données entrées d'utilisateur en fournissant un mécanisme qui vous permet de générer facilement des étapes, d'ajoutez une étape ou de réorganiser les étapes. Dans cette procédure pas à pas, vous utiliserez le contrôle ASP.NET Wizard pour simplifier la collecte de données en formant une série d'étapes indépendantes sans devoir écrire le code ou rendre les données utilisateur persistantes entre des étapes de formulaire. Vous créerez un Assistant simple qui rassemble un nom d'utilisateur et une adresse de messagerie, puis le présenterez à l'utilisateur dans l'étape d'achèvement. Cette procédure pas à pas illustre les tâches suivantes :

  • Ajout d'un contrôle Wizard à votre page.

  • Ajout de contrôles et de texte à une étape de l'Assistant.

  • Accès aux données de l'Assistant entre des étapes.

Composants requis

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

  • Visual Studio ou Visual Web Developer.

Création du site Web

Si vous avez déjà créé un site Web (par exemple, en effectuant les étapes décrites dans 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 », plus loin dans 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 (ou Visual Studio).

  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

Pour ajouter un contrôle de l'Assistant

  1. Basculez en mode Design pour Default.aspx.

  2. À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle Wizard dans la page.

    Le contrôle apparaît avec deux étapes par défaut déjà en place. En cliquant sur les étapes, vous pouvez modifier le texte et les contrôles affichés pendant cette étape.

Modification des étapes de l'Assistant

Lorsque vous faites glisser le contrôle Wizard sur la page, il affiche deux étapes prédéfinies par défaut. Pour cette procédure pas à pas, vous devez modifier les deux étapes et ajouter une étape d'achèvement qui affiche le résultat des deux premières étapes : un nom d'utilisateur et une adresse de messagerie.

Pour modifier la première étape de l'Assistant

  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 souligné Step 1 dans le contrôle de l'Assistant.

  3. Cliquez sur la zone d'édition du contrôle de l'Assistant.

    Vous pouvez maintenant modifier la zone d'affichage de l'étape.

  4. Tapez Nom :.

  5. Faites glisser un contrôle TextBox sur la zone active de l'Assistant, en regard du texte que vous venez de taper.

Vous pouvez maintenant modifier la seconde étape pour collecter l'adresse de messagerie d'un utilisateur.

Pour modifier la seconde étape de l'Assistant

  1. Cliquez sur Step 2 dans le contrôle de l'Assistant.

  2. Cliquez sur la zone d'édition du contrôle de l'Assistant.

  3. Tapez Email :.

  4. Faites glisser un contrôle TextBox sur la zone active de l'Assistant, en regard de l'étiquette de l'adresse de messagerie.

  5. Enregistrez le fichier.

Ajout d'une étape d'achèvement

Vous devez maintenant créer une étape d'achèvement qui servira de point de terminaison de votre Assistant. L'étape Complete n'a pas d'options de navigation.

Pour ajouter une étape d'achèvement

  1. Cliquez avec le bouton droit sur le contrôle de l'Assistant.

  2. Choisissez Afficher la balise active.

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

    L'Éditeur de collections WizardStep s'affiche.

  4. Dans la liste déroulante Ajouter du bouton Ajouter, sélectionnez Wizard Step.

    La zone Propriétés affiche maintenant la nouvelle étape.

  5. Affectez Terminée à la propriété Title.

  6. Affectez Complete à la propriété StepType.

  7. Cliquez sur OK.

Maintenant vous pouvez modifier votre étape d'achèvement. Pour les besoins de cette procédure pas à pas, configurez l'étape d'achèvement pour afficher les données que l'utilisateur a entrées lors des étapes précédentes.

Pour modifier l'étape d'achèvement

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

  2. Dans la boîte de dialogue Tâches Wizard, utilisez la liste déroulante Étape pour choisir l'étape Terminée.

    Remarque :

    Le nom affiché dans la liste déroulante sera le nom que vous avez donné à l'étape lorsque vous l'avez créée, Terminée dans cet exemple.

  3. Faites glisser un contrôle Label sur l'Assistant, en laissant le nom par défaut de Label1.

  4. Faites glisser un autre contrôle Label sur l'Assistant, en laissant le nom par défaut de Label2.

  5. Enregistrez le fichier.

L'étape d'achèvement affichera les données entrées par l'utilisateur. Utilisez l'événement Load de la page pour assigner les valeurs des deux premières étapes aux étiquettes que vous avez ajoutées à l'étape d'achèvement.

Pour afficher les données de l'utilisateur

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

    La page contient désormais une méthode Page_Load qui est générée pour vous.

  2. Ajoutez le code mis en surbrillance ci-dessous.

    Private Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) _
        Handles Me.Load
    Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
End Sub

    void Page_Load(Object sender, System.EventArgs e)
{
    Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
}

  3. Enregistrez le fichier.

Test du contrôle de l'Assistant

Vous pouvez à présent tester le contrôle Wizard.

Pour tester le contrôle de l'Assistant

  1. Afficher Default.aspx en mode Design.

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

  3. Cliquez sur le contrôle de l'Assistant, puis appuyez sur CTRL+F5.

  4. Dans l'étape 1, tapez un nom dans le contrôle TextBox de nom.

  5. Cliquez sur Suivant.

  6. Dans l'étape 2, tapez une adresse de messagerie dans le contrôle TextBox de l'adresse de messagerie.

  7. Cliquez sur Terminer.

    Vos données sont affichées.

Étapes suivantes

Le contrôle Wizard simplifie la création de formulaires pour collecter les données de l'utilisateur. Vous pouvez avoir des questions supplémentaires concernant la collecte de données de l'utilisateur et l'utilisation des formulaires. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :

Voir aussi

Référence

Vue d'ensemble du contrôle serveur Web Wizard