Exemplarische Vorgehensweise: Erweiterte Verwendung des ASP.NET-Wizard-Steuerelements

Aktualisiert: November 2007

Das Wizard-Steuerelement in ASP.NET vereinfacht viele Aufgaben, die mit dem Erstellen von Formularen und dem Erfassen von Benutzereingaben verbunden sind. In dieser exemplarischen Vorgehensweise erstellen Sie mithilfe des Wizard-Steuerelements ein Formular, in dem die Adressinformationen von Benutzern erfasst werden, in dem sich Benutzer für oder gegen E-Mail-Aktualisierungen entscheiden können und das den Benutzern zur endgültigen Bestätigung nochmals mit den eingegebenen Daten und den ausgewählten Optionen angezeigt wird. Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

• Bearbeiten des Layouts eines Schritts im Assistenten

• Hinzufügen eines benutzerdefinierten Schritts im Assistenten

• Programmgesteuertes Erfassen eines Ereignisses im Assistenten

• Verzweigen des Assistenten in Abhängigkeit von der Benutzerauswahl

• Anzeigen von Benutzerdaten in einem abschließenden Schritt

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Microsoft Visual Web Developer

• .NET Framework

Erstellen der Website

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (beispielsweise beim Durcharbeiten des Themas Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und mit dem Abschnitt "Hinzufügen eines Wizard-Steuerelements zur Seite" weiter unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei nacheinander auf Neu und auf Website.

   Das Dialogfeld Neue Website wird angezeigt.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

4. Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem die Seiten der Website gespeichert werden sollen.

   Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

6. Klicken Sie auf OK.

   Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Hinzufügen eines Wizard-Steuerelements zur Seite

So fügen Sie der Seite ein Wizard-Steuerelement hinzu

1. Wechseln Sie in die Entwurfsansicht.

2. Ziehen Sie aus der Gruppe Standard der Toolbox ein Wizard-Steuerelement auf die Seite.

Erfassen von Namens- und Adressinformationen

Konfigurieren Sie als Nächstes die einzelnen Schritte des Assistenten, um die Benutzerdaten zu erfassen, eine E-Mail-Adresse abzufragen und die erfassten Daten im abschließenden Schritt anzuzeigen.

Erfassen Sie zunächst den Namen, die Adresse, die Stadt, den Staat und die Postleitzahl des Benutzers.

So konfigurieren Sie den ersten Schritt

1. Ziehen Sie einen der Ziehpunkte am Rand des Wizard-Steuerelements, um das Steuerelement auf das Zweifache seiner Standardgröße zu vergrößern.

2. Klicken Sie im Wizard-Steuerelement auf den unterstrichenen Text Step 1, und klicken Sie dann im Wizard-Steuerelement auf den bearbeitbaren Bereich rechts von Step 1.

   Sie können jetzt den Anzeigebereich für Schritt 1 bearbeiten.

3. Geben Sie Name ein.

4. Ziehen Sie aus der Gruppe Standard der Toolbox ein TextBox-Steuerelement neben den Text.

5. Ändern Sie im Eigenschaftenfenster die ID des TextBox-Steuerelements von TextBox1 in Name.

6. Wiederholen Sie den Vorgang, indem Sie Beschriftungen und TextBox-Steuerelemente hinzufügen (benennen Sie die Steuerelemente, da Sie später auf sie verweisen müssen), um Folgendes zu erfassen:

   • Address

   • City

   • State

   • PostalCode

7. Speichern Sie die Datei.

Hinzufügen einer E-Mail-Aktualisierungsauswahl

In diesem Teil der exemplarischen Vorgehensweise können Benutzer auswählen, ob sie E-Mail-Aktualisierungen erhalten möchten.

So fügen Sie eine E-Mail-Aktualisierungsauswahl hinzu

1. Klicken Sie auf Step 2.

2. Klicken Sie auf den bearbeitbaren Bereich neben Step 2, und geben Sie Would you like to receive e-mail updates? ein.

3. Geben Sie unterhalb der Frage Yes ein.

4. Ziehen Sie aus der Gruppe Standard der Toolbox ein RadioButton-Steuerelement neben das Wort Yes.

5. Geben Sie No ein.

6. Ziehen Sie ein anderes RadioButton-Steuerelement der Toolbox auf das Steuerelement neben dem Wort No.

Hinzufügen eines benutzerdefinierten Schritts zum Erfassen einer E-Mail-Adresse

In diesem Abschnitt fügen Sie dem Assistenten, der die E-Mail-Adresse des Benutzers erfasst, einen benutzerdefinierten Schritt hinzu. Später wird Code hinzugefügt, um diesen Schritt zu überspringen, wenn keine E-Mail-Aktualisierungen angezeigt werden sollen.

Hinzufügen eines benutzerdefinierten Schritts zum Erfassen der E-Mail-Adresse des Benutzers

1. Klicken Sie mit der rechten Maustaste auf das Wizard-Steuerelement außerhalb des Bearbeitungsbereichs, und klicken Sie auf Smarttag anzeigen.

2. Wählen Sie im Dialogfeld Wizard-Aufgaben die Option WizardSteps hinzufügen/entfernen aus.

   Der WizardStep-Auflistungs-Editor wird angezeigt.

3. Klicken Sie in der Dropdownliste Hinzufügen der Schaltfläche Hinzufügen auf WizardStep.

4. Klicken Sie auf OK.

   Im Wizard-Steuerelement wird der neue Schritt angezeigt.

5. Klicken Sie auf den neuen Schritt, um in den Bearbeitungsmodus zu wechseln.

6. Geben Sie im bearbeitbaren Bereich E-mail address ein.

7. Ziehen Sie aus der Gruppe Standard der Toolbox ein TextBox-Steuerelement auf das Steuerelement neben den Wörtern E-mail address.

8. Ändern Sie unter Eigenschaften die ID des TextBox-Steuerelements in EmailAddress, da Sie später im Code darauf verweisen müssen.

Hinzufügen eines abschließenden Schritts

Jetzt kann ein abschließender Schritt hinzugefügt werden, in dem die Daten nochmals den Benutzern angezeigt werden.

So fügen Sie einen abschließenden Schritt hinzu

1. Klicken Sie mit der rechten Maustaste auf das Wizard-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

2. Wählen Sie im Menü Wizard-Aufgaben des Steuerelements die Option WizardSteps hinzufügen/entfernen aus.

   Der WizardStep-Auflistungs-Editor wird angezeigt.

3. Klicken Sie in der Liste Hinzufügen auf WizardStep.

   Im Eigenschaftenbereich werden die Attribute des neuen Schritts angezeigt.

4. Legen Sie im Eigenschaftenfenster StepType auf Complete fest.

5. Klicken Sie auf OK.

   Das Wizard-Steuerelement fügt den neuen Schritt hinzu.

6. Klicken Sie auf den neuen Schritt des Steuerelements, und klicken Sie dann auf den bearbeitbaren Bereich rechts neben dem neuen Schritt.

7. Ziehen Sie aus der Gruppe Standard der Toolbox ein Label-Steuerelement auf den neuen Schritt.

8. Drücken Sie die EINGABETASTE, um eine neue Zeile zu erstellen.

9. Wiederholen Sie Schritt 7 fünf weitere Male, um insgesamt sechs Label-Steuerelemente zu erhalten:

   • Name

   • Address

   • City

   • Region or State

   • Postal Code

   • E-mail Address

10. Speichern Sie die Datei.

Bevor der Assistent ausgeführt wird, müssen die Bezeichnungen im abschließenden Schritt mit den Werten aufgefüllt werden, die vom Benutzer in den ersten drei Assistentenschritten angegeben wurden.

Hinzufügen von Code für den abschließenden Schritt

In dieser exemplarischen Vorgehensweise werden die Daten des Benutzers im abschließenden Schritt angezeigt. Um sicherzustellen, dass die Daten angezeigt werden, werden die Bezeichnungen des Schritts programmgesteuert aufgefüllt. Zum Anzeigen der Daten muss Code für das Load-Ereignis der Seite geschrieben werden.

So fügen Sie Code hinzu

1. Kehren Sie zu Default.aspx zurück, und doppelklicken Sie in der Entwurfsansicht auf die Entwurfsoberfläche.

   Der Code-Editor für die Seite wird geöffnet und erstellt ein Skelett der Page_Load-Methode.

2. Fügen Sie den folgenden hervorgehobenen Code hinzu, um den abschließenden Schritt aufzufüllen.

   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. Speichern Sie die Datei.

Testen des Wizard-Steuerelements

So testen Sie das Wizard-Steuerelement

1. Zeigen Sie Default.aspx in der Entwurfsansicht an.

2. Öffnen Sie das Menü Wizard-Aufgaben des Steuerelements, und wählen Sie Step 1 aus der Dropdownliste Schritt aus.

3. Drücken Sie STRG+F5, um die Seite auszuführen.

   Hinweis:
   Wenn die Seite in der Entwurfsansicht ausgeführt wird, startet der Browser möglicherweise mit dem derzeit aktuellen Schritt im Assistenten und nicht unbedingt mit dem ersten Schritt. Stellen Sie sicher, dass die ActiveStepIndex-Eigenschaft im Eigenschaftenfenster auf 0 (null) festgelegt ist, bevor die Seite gestartet wird.

4. Geben Sie die Namens- und Adressinformationen ein.

5. Klicken Sie auf Weiter.

6. Wählen Sie eine der beiden E-Mail-Optionen aus.

   Durch das Schreiben von entsprechendem Code kann die E-Mail-Option zu einem späteren Zeitpunkt in der exemplarischen Vorgehensweise behandelt werden.

7. Geben Sie eine E-Mail-Adresse ein.

8. Klicken Sie auf Fertig stellen.

   Die von Ihnen eingegeben Daten werden auf der Seite angezeigt.

Im nächsten Abschnitt wird der zum Überspringen des dritten Schritts der E-Mail-Erfassung erforderliche Code hinzugefügt, wenn der Benutzer keine E-Mail-Adresse angibt.

Hinzufügen von Code zum Überspringen des E-Mail-Schritts

Da die Datenerfassung und die Layoutteile des Assistenten jetzt vollständig sind, wird die entsprechende Logik hinzugefügt, damit Benutzer den Schritt für die Erfassung der E-Mail-Adresse überspringen können, wenn sie keine E-Mail-Aktualisierungen erhalten möchten. Hierzu wird das NextButtonClick-Ereignis des Wizard-Steuerelements behandelt. Wenn Sie das Ereignis behandeln, muss zunächst überprüft werden, ob der Assistent sich derzeit bei dem Schritt befindet, in dem der Benutzer eine Auswahl trifft. Wenn dies der Fall ist, muss überprüft werden, welches RadioButton-Steuerelement ausgewählt ist. Wenn der Benutzer No ausgewählt hat, fahren Sie mit der ActiveStepIndex-Eigenschaft des Wizard-Steuerelements fort, um den Schritt im Assistenten zu überspringen, in dem die E-Mail-Adresse des Benutzers abgefragt wird.

So fügen Sie Code zum Überspringen des dritten Schritts hinzu

1. Klicken Sie auf das Wizard-Steuerelement. Geben Sie im Eigenschaftenfenster die Zeichenfolge Wizard1_NextButtonClick für die NextButtonClick-Eigenschaft ein, und drücken Sie die EINGABETASTE.

   Im Code-Editor-Fenster wird die Code-Behind-Seite geöffnet.

2. Fügen Sie folgenden hervorgehobenen Code hinzu, mit dem überprüft wird, ob der richtige Schritt aktiv ist, und mit dem ermittelt wird, welches RadioButton-Steuerelement ausgewählt wurde und ob Schritt 3 des Assistenten übersprungen werden soll.

   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;
           }
        }
   }
   

   Das Festlegen der ActiveStepIndex-Eigenschaft bewirkt, dass der Assistent direkt zum angegebenen Schritt wechselt.

3. Speichern Sie die Datei.

Testen des Überspringens einer Seite

So testen Sie das programmgesteuerte Überspringen eines Schritts im Assistenten

1. Zeigen Sie Default.aspx in der Entwurfsansicht an.

2. Öffnen Sie das Menü Wizard-Aufgaben des Steuerelements, und wählen Sie Step 1 aus der der Dropdownliste Schritt aus.

3. Drücken Sie STRG+F5, um die Seite auszuführen.

4. Geben Sie die Namens- und Adressinformationen ein.

5. Klicken Sie auf Weiter.

6. Aktivieren Sie in Step 2 das Kontrollkästchen No.

7. Klicken Sie auf Weiter.

   Sie erreichen den abschließenden Schritt.

8. Kehren Sie mithilfe der Schaltfläche "Zurück" des Browsers zum ersten Schritt zurück, oder schließen Sie den Browser, und drücken Sie STRG+F5, um die Seite erneut auszuführen.

9. Geben Sie im ersten Schritt die Namens- und Adressinformationen ein.

10. Klicken Sie auf Weiter.

11. Aktivieren Sie in Step 2 das Kontrollkästchen Yes.

12. Klicken Sie auf Weiter.

13. Sie erreichen den Schritt für das Erfassen von E-Mail-Adressen.

14. Geben Sie eine E-Mail-Adresse ein.

15. Klicken Sie auf Weiter.

16. Sie erreichen den abschließenden Schritt.

Nächste Schritte

Das Wizard-Steuerelement vereinfacht die Erstellung von Formularen zur Erfassung von Benutzerdaten. Über die hier behandelten Themen hinaus haben Sie möglicherweise weitere Fragen zu Formularen und zur benutzerdefinierten Darstellung von Wizard-Steuerelementen. Beispielsweise könnte Folgendes von Interesse sein:

• Überschreiben der Standardtextbezeichnungen des Wizard-Steuerelements. Weitere Informationen finden Sie unter Übersicht über das Wizard-Webserversteuerelement.

• Validieren von Benutzereingaben im Wizard-Steuerelement. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Validieren der Benutzereingabe in einer Web Forms-Seite.

• Weitere Informationen zur grundlegenden Anwendung des Wizard-Steuerelements. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen eines einfachen ASP.NET-Wizard-Steuerelements.

Siehe auch

Referenz

Übersicht über das Wizard-Webserversteuerelement