Share via

Walkthrough: Creating a Basic ASP.NET Wizard Control

  • Article

Building a series of forms to collect user data is a common task when developing Web sites. The ASP.NET Wizard control simplifies many of the tasks associated with building forms and collecting user input by providing a mechanism that allows you to easily build steps, add a new step, or reorder the steps. In this walkthrough, you will use the ASP.NET Wizard control to simplify data collection as a series of independent steps without having to write code or making user data persist between form steps. You will create a simple wizard that collects a user name and e-mail address, and then present it back to the user in the completion step. Tasks illustrated in this walkthrough include:

  • Adding a Wizard control to your page.

  • Adding controls and text to a wizard step.

  • Accessing the wizard's data between steps.

Prerequisites

In order to complete this walkthrough, you will need:

  • Visual Studio or Visual Web Developer.

Creating the Web Site

If you have already created a Web site (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to "Adding a Wizard Control" later in this walkthrough. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

  1. Open Visual Web Developer (or Visual Studio).

  2. On the File menu, click New Web Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

  4. In the Location box, enter the name of the folder where you want to keep the pages of your Web site.

    For example, type the folder name C:\WebSites.

  5. In the Language list, click the programming language you prefer to work in.

  6. Click OK.

    Visual Web Developer creates the folder and a new page named Default.aspx.

Adding a Wizard Control

To add a Wizard control

  1. Switch to Design view for Default.aspx.

  2. From the Standard tab of the Toolbox, drag a Wizard control onto the page.

    The control appears with two default steps already in place. Clicking the steps allows you to edit the text and controls displayed during that step.

Editing Wizard Steps

When the Wizard control is dragged onto the page, it shows two predefined steps by default. For this walkthrough, you will edit both steps, and add a completion step that shows the result of the first two steps: a user name and an e-mail address.

To edit the first wizard step

  1. Drag one of the handles at the edge of the Wizard control to enlarge the control to about twice its default size.

  2. Click the underlined text Step 1 in the Wizard control.

  3. Click the edit area for the Wizard control.

    You can now edit the step's display area.

  4. Type Name:.

  5. Drag a TextBox control onto the active area of the wizard, next to the text you just typed.

You can now edit the second step to collect a user's e-mail address.

To edit the second wizard step

  1. Click Step 2 in the Wizard control.

  2. Click the edit area for the Wizard control.

  3. Type Email:.

  4. Drag a TextBox control onto the active area of the wizard, next to your e-mail label.

  5. Save the file.

Adding a Completion Step

You will now create a completion step that acts as the end point of your wizard. The Complete step has no navigational options.

To add a completion step

  1. Right-click the Wizard control.

  2. Choose Show Smart Tag.

  3. In the Wizard Tasks dialog box, choose Add/Remove Wizard Steps.

    The WizardStep Collection Editor appears.

  4. From the Add drop-down list on the Add button, select Wizard Step.

    The Properties area now shows the new step.

  5. Set the Title property to Finished.

  6. Set the StepType property to Complete.

  7. Click OK.

Now you can edit your new completion step. For the purposes of this walkthrough, configure the completion step to show the data the user entered on the previous steps.

To edit the completion step

  1. Right-click the Wizard control and choose Show Smart Tag.

  2. In the Wizard Tasks dialog box, use the Step drop-down list to choose the Finished step.

    Note

    The name in the drop-down list will be the name you gave the step when you created it, Finished in this example.

  3. Drag a Label control onto the wizard, leaving the default name of Label1.

  4. Drag another Label control onto the wizard, leaving the default name of Label2.

  5. Save the file.

The completion step will display the data entered by the user. Use the page's Load event to assign the values from the first two steps to the labels you added to the completion step.

To show the user's data

  1. Return to Default.aspx and, in Design view, double-click the design surface.

    The page now contains a Page_Load method that is stubbed out for you.

  2. Add the following highlighted code.

    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. Save the file.

Testing the Wizard Control

Now you can test the Wizard control.

To test the Wizard control

  1. View Default.aspx in Design view.

  2. Display the Wizard Tasks menu on the control and select Step 1 from the Step drop-down list.

  3. Click the Wizard control, and then press CTRL+F5.

  4. Type a name in the name TextBox control for Step 1.

  5. Click Next.

  6. Type an e-mail address in the e-mail TextBox control for Step 2.

  7. Click Finish.

    Your data is displayed.

Next Steps

The Wizard control simplifies the creation of forms to gather user data. In addition to what has been covered here, you might have other questions related to user data collection and forms use. For example, you might want to:

See Also

Reference

Wizard Web Server Control Overview