Partager via

Walkthrough: Advanced Use of the ASP.NET Wizard Control

  • Article

The ASP.NET Wizard control simplifies many of the tasks associated with building forms and collecting user input. In this walkthrough, you use the Wizard control to create a form that collects a user's address information, allows them to opt in or opt out of e-mail updates, and then presents the data and choices back to them in a final confirmation step. Tasks illustrated in this walkthrough include:

  • Editing the layout of a wizard step.

  • Adding a custom wizard step.

  • Programmatically capturing a wizard event.

  • Branching your wizard based on user choices.

  • Displaying user data in a completion step.

Prerequisites

In order to complete this walkthrough, you will need:

  • Microsoft Visual Web Developer.

  • The .NET Framework.

Creating the Web Site

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

Note

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects in Visual Studio.

To create a file system Web site

  1. Open Visual Web Developer.

  2. On the File menu, click NewWeb 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 the Page

To add a Wizard control to the page

  1. Switch to Design view.

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

Collecting Name and Address Information

Next, you configure each step of your wizard to collect the user data, prompt for an e-mail address, and display the collected data in the completion step.

First, collect the user's name, address, city, state, and postal code.

To configure the first 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, and then click in the edit area to the right of Step 1 in the Wizard control.

    You can now edit the display area for step 1.

  3. Type Name.

  4. From the Standard group of the Toolbox, drag a TextBox control next to your text.

  5. In the Properties window, change the ID of the TextBox control from TextBox1 to Name.

  6. Repeat the process, adding captions and TextBox controls (remember to name the controls because you will need to refer to them later) to collect:

    • Address

    • City

    • State

    • PostalCode

  7. Save the file.

Adding an E-mail Update Choice

In this part of the walkthrough, you allow the user to choose whether they would like to receive e-mail updates.

To add an e-mail update choice

  1. Click Step 2.

  2. Click the editable area to the right of Step 2, and type Would you like to receive e-mail updates?.

  3. Beneath the question, type: Yes.

  4. From the Standard group of the Toolbox, drag a RadioButton control next to the word Yes.

  5. Type No.

  6. Drag another RadioButton from the Toolbox onto the control next to the word No.

Adding a Custom Step to Collect an E-mail Address

In this section, you add a custom step to the wizard that collects the user's e-mail address. Later, you will add code to skip this step if the user decides not to get e-mail updates.

Adding a custom step to collect the user's email

  1. Right-click the Wizard control outside of the edit areas and click Show Smart Tag.

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

    The WizardStep Collection Editor appears.

  3. In the Add drop-down list on the Add button, click Wizard Step.

  4. Click OK.

    The Wizard control displays the new step.

  5. Click the new step to switch it to edit mode.

  6. In the editable area, type E-mail address.

  7. From the Standard group of the Toolbox, drag a TextBox control onto the control next to the words E-mail Address.

  8. In Properties, change the ID of the TextBox control to EmailAddress because you will need to refer to it later in code.

Adding a Completion Step

Now you can add a completion step that will present the user's data back to them.

To add a completion step

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

  2. In the Wizard Tasks menu on the control, choose Add/Remove Wizard Steps.

    The WizardStep Collection Editor appears.

  3. In the Add list, click Wizard Step.

    The Properties area displays the attributes of the new step.

  4. In the Properties window, set StepType to Complete.

  5. Click OK.

    The Wizard control adds the new step.

  6. Click the new step on the control, and then click the editable area to the right of the new step.

  7. From the Standard group of the Toolbox, drag a Label control onto the new step.

  8. Press ENTER to create a new line.

  9. Repeat step 7 five more times, for a total of six Label controls corresponding to:

    • Name

    • Address

    • City

    • Region or State

    • Postal Code

    • E-mail Address

  10. Save the file.

Before you can run the wizard, you need to populate the labels in your completion step with the values the user supplied in the first three wizard steps.

Adding Code for the Completion Step

In this walkthrough, the completion step displays the user's data. To ensure the data is displayed, you populate the step's labels programmatically. To display the data, you write code for the page's Load event.

To add code

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

    The code editor opens for the page, and creates a skeleton Page_Load method.

  2. Add the following highlighted code to populate the completion step.

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

Testing the Wizard Control

To test the Wizard control

  1. Display Default.aspx in Design view.

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

  3. Press CTRL+F5 to run the page.

    Note

    When running the page from Design view, the browser might start on the currently active wizard step, not necessarily the first step. Be sure the wizard's ActiveStepIndex property is set to 0 in the Properties window before launching the page.

  4. Type name and address information.

  5. Click Next.

  6. Select either option for e-mail.

    You will write code to handle the e-mail option later in the walkthrough.

  7. Type an e-mail address.

  8. Click Finish.

    The data you entered is displayed on the page.

In the next section, you add the code necessary to skip the third step of collecting e-mail if the user chooses not to provide an e-mail address.

Adding Code to Skip the E-mail Step

Now that the data collection and layout portions of your wizard are complete, you will add the logic to allow the user to skip the step that collects the e-mail address if they do not want to receive e-mail updates. You do this by handling the Wizard control's NextButtonClick event. When you handle the event, you first check to see whether the wizard is currently on the step where the user makes a choice. If so, check to see which RadioButton control is selected. If the user has selected No, advance the Wizard control's ActiveStepIndex property to skip the wizard step that requests the user's e-mail address.

To add code to skip the third step

  1. Click the Wizard control. In the Properties window, type Wizard1_NextButtonClick for the NextButtonClick property and press ENTER.

    The code editor window opens to the code-behind page.

  2. Add the following highlighted code that checks for the correct step, determines which RadioButton control is selected, and determines whether to skip step 3 of the wizard.

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

    Setting the ActiveStepIndex property causes the wizard to move directly to the specified step.

  3. Save the file.

Testing the Ability to Skip a Step

To test skipping a wizard step programmatically

  1. Display Default.aspx in Design view.

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

  3. Press CTRL+F5 to run the page.

  4. Type name and address information.

  5. Click Next.

  6. In Step 2, select the No check box.

  7. Click Next.

    You arrive at the completion step.

  8. Use your browser's back button to return to the first step, or close the browser and press CTRL+F5 to run the page again.

  9. Type name and address information in the first step.

  10. Click Next.

  11. In Step 2, select the Yes check box.

  12. Click Next.

  13. You arrive at the e-mail address collection step.

  14. Type an e-mail address.

  15. Click Next.

  16. You arrive at the completion step.

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 forms as well as to applying a different look and feel to your Wizard control. For example, you might want to:

See Also

Reference

Wizard Web Server Control Overview