Exemplarische Vorgehensweise: Erstellen eines einfachen ASP.NET-Wizard-Steuerelements

  • Artikel

Aktualisiert: November 2007

Das Erstellen einer Reihe von Formularen zum Erfassen von Benutzerdaten stellt eine häufige Aufgabe bei der Entwicklung von Websites dar. Mit dem Wizard-ASP.NET-Steuerelement werden viele der Aufgaben im Zusammenhang mit dem Erstellen von Formularen und dem Erfassen von Benutzereingaben mithilfe eines Mechanismus vereinfacht, der das einfache Erstellen von Schritten, das Hinzufügen eines neuen Schritts und das Neuanordnen von Schritten ermöglicht. In dieser exemplarischen Vorgehensweise wird das Wizard-ASP.NET-Steuerelement verwendet, um das Erfassen von Daten zu einer Reihe unabhängiger Schritte zu vereinfachen, ohne Code schreiben zu müssen und ohne dass Benutzerdaten zwischen Formularschritten beibehalten werden. Sie erstellen einen einfachen Assistenten, der einen Benutzernamen und eine E-Mail-Adresse erfasst, und zeigen ihn dann im abschließenden Schritt dem Benutzer an. Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Hinzufügen eines Wizard-Steuerelements zur Seite.

  • Hinzufügen von Steuerelementen und Text zu einem Schritt im Assistenten.

  • Zugreifen auf die Daten des Assistenten zwischen Schritten.

Vorbereitungsmaßnahmen

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

  • Visual Studio oder Visual Web Developer.

Erstellen der Website

Wenn Sie bereits eine Website erstellt haben (z. B., indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer ausgeführt haben), können Sie diese Website verwenden und mit "Hinzufügen eines Wizard-Steuerelements" 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 (oder Visual Studio).

  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

So fügen Sie ein Wizard-Steuerelement hinzu

  1. Wechseln Sie zur Entwurfsansicht für Default.aspx.

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

    Das Steuerelement wird mit zwei bereits vorhandenen Standardschritten angezeigt. Durch Klicken auf die Schritte können Sie den Text und die Steuerelemente bearbeiten, die für diesen Schritt angezeigt werden.

Bearbeiten von Schritten im Assistenten

Wenn das Wizard-Steuerelement auf die Seite gezogen wird, werden standardmäßig zwei vordefinierte Schritte angezeigt. In dieser exemplarischen Vorgehensweise bearbeiten Sie die beiden Schritte und fügen einen abschließenden Schritt hinzu, in dem die Ergebnisse der ersten beiden Schritte angezeigt werden: ein Benutzername und eine E-Mail-Adresse.

So bearbeiten Sie den ersten Schritt im Assistenten

  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 Schritt 1.

  3. Klicken Sie auf den Bearbeitungsbereich für das Wizard-Steuerelement.

    Sie können jetzt den Anzeigebereich des Schritts bearbeiten.

  4. Geben Sie Name: ein.

  5. Ziehen Sie ein TextBox-Steuerelement auf den aktiven Bereich des Assistenten neben den gerade eingegebenen Text.

Sie können jetzt den zweiten Schritt bearbeiten, um die E-Mail-Adresse eines Benutzers zu erfassen.

So bearbeiten Sie den zweiten Schritt im Assistenten

  1. Klicken Sie im Wizard-Steuerelement auf Schritt 2.

  2. Klicken Sie auf den Bearbeitungsbereich für das Wizard-Steuerelement.

  3. Geben Sie Email: ein.

  4. Ziehen Sie ein TextBox-Steuerelement auf den aktiven Bereich des Assistenten neben die Beschriftung E-Mail.

  5. Speichern Sie die Datei.

Hinzufügen eines abschließenden Schritts

Nun erstellen Sie einen abschließenden Schritt, der den Endpunkt des Assistenten darstellt. Der Complete-Schritt umfasst keine Navigationsoptionen.

So fügen Sie einen abschließenden Schritt hinzu

  1. Klicken Sie mit der rechten Maustaste auf das Wizard-Steuerelement.

  2. Wählen Sie Smarttag anzeigen aus.

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

    Der WizardStep-Auflistungs-Editor wird angezeigt.

  4. Wählen Sie aus der Dropdownliste Hinzufügen auf der Schaltfläche Hinzufügen die Option Assistenten-Schritt aus.

    Der neue Schritt wird jetzt im Bereich Eigenschaften angezeigt.

  5. Legen Sie die Title-Eigenschaft auf Finished fest.

  6. Legen Sie die StepType-Eigenschaft auf Complete fest.

  7. Klicken Sie auf OK.

Jetzt kann der neue abschließende Schritt bearbeitet werden. Konfigurieren Sie den abschließenden Schritt für diese exemplarische Vorgehensweise so, dass die vom Benutzer in den vorherigen Schritten eingegebenen Daten angezeigt werden.

So bearbeiten Sie den abschließenden Schritt

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

  2. Wählen Sie im Dialogfeld Wizard-Aufgaben mithilfe der Dropdownliste Schritt den Finished-Schritt aus.

    Hinweis:

    Der Name in der Dropdownliste entspricht dem Namen, der dem Schritt bei dessen Erstellung zugewiesen wurde. Im Beispiel entspricht dies Finished.

  3. Ziehen Sie ein Label-Steuerelement auf den Assistenten, und behalten Sie den Standardnamen Label1 bei.

  4. Ziehen Sie ein weiteres Label-Steuerelement auf den Assistenten, und behalten Sie den Standardnamen Label2 bei.

  5. Speichern Sie die Datei.

Im abschließenden Schritt werden die vom Benutzer eingegebenen Daten angezeigt. Weisen Sie mithilfe des Load-Ereignisses der Seite die Werte aus den ersten zwei Schritten den Bezeichnungen zu, die dem abschließenden Schritt hinzugefügt wurden.

So zeigen Sie die Daten des Benutzers an

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

    Die Seite enthält nun eine Page_Load-Methode, die als Stub-Out-Methode bereitgestellt ist.

  2. Fügen Sie den folgenden hervorgehobenen Code hinzu.

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

Testen des Wizard-Steuerelements

Nun kann das Wizard-Steuerelement getestet werden.

So testen Sie das Wizard-Steuerelement

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

  2. Zeigen Sie das Menü Wizard-Aufgaben für das Steuerelement an, und wählen Sie aus der Dropdownliste Schritt die Option Schritt 1 aus.

  3. Klicken Sie auf das Wizard-Steuerelement, und drücken Sie dann STRG+F5.

  4. Geben Sie im TextBox-Steuerelement für den Namen in Schritt 1 einen Namen ein.

  5. Klicken Sie auf Weiter.

  6. Geben Sie im TextBox-Steuerelement für die E-Mail-Adresse in Schritt 2 eine E-Mail-Adresse ein.

  7. Klicken Sie auf Fertig stellen.

    Die Daten werden angezeigt.

Nächste Schritte

Das Wizard-Steuerelement vereinfacht das Erstellen von Formularen zum Erfassen von Benutzerdaten. Möglicherweise haben Sie noch Fragen im Zusammenhang mit der Erfassung von Benutzerdaten und der Verwendung von Formularen, die über die hier beschriebenen Schritte hinausgehen. Auf diese Weise können Sie beispielsweise folgende Vorgänge durchführen:

Siehe auch

Referenz

Übersicht über das Wizard-Webserversteuerelement