Creating the Form

To demonstrate how to use the wizard control, we will need to create a simple web site with a form that we will add our wizard control to. To begin, create a new ASP.NET Empty Web Site and:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to design mode.
  7. Drag and drop a wizard control onto the web form.
  8. Expand the Wizard Tasks menu.
  9. Click Add/Remove WizardSteps…
  10. Add the following steps with the appropriate titles and ID’s:
    <td “=””>ID

    Title
    WizardStep1 Name and Position
    WizardStep2 Contact
    WizardStep3 Notes
    WizardStep4 Summary
    WizardStep5 Finish;
  11. Set the StepType property of WizardStep4 to ‘Finish’.
  12. Set the StepType property of WizardStep5 to ‘Complete’.
  13. Click ok.

Once we have our wizard setup with our appropriate steps, we need to go in and build a simple form for each. For this example we will keep it simple by just adding in some text boxes for the user to add data into, and then display that data back to them in the summary step. To begin:

  1. Open Default.aspx up to design mode.
  2. Expand the Wizard Tasks menu.
  3. Select Name and Position from the Step drop down list.
  4. In the editable area of the wizard control, add the following text: ‘UserName: ‘.
  5. Drag and drop a textbox next to the text.
  6. Change the ID property to ‘Name’.
  7. Add a break line.
  8. Add the following text: ‘Position: ‘.
  9. Drag and drop a textbox next to the text.
  10. Change the ID property to ‘Position’.
  11. Expand the Wizard Tasks menu.
  12. Select Contact from the Step drop down list.
  13. In the editable area of the wizard control, add the following text: ‘E-Mail: ‘.
  14. Drag and drop a textbox next to the text.
  15. Change the ID property to ‘Mail’.
  16. Add a break line.
  17. Add the following text: ‘Mobile: ‘.
  18. Drag and drop a textbox next to the text.
  19. Change the ID property to ‘Mobile’.
  20. Expand the Wizard Tasks menu.
  21. Select Notes from the Step drop down list.
  22. In the editable area of the wizard control, add the following text: ‘Notes: ‘.
  23. Drag and drop a textbox next to the text.
  24. Change the ID property to ‘Notes’.
  25. Change the TextMode property to ‘MultiLine’.
  26. Set the Rows property to ’6′.
  27. Set the Columns property to ’18′.
  28. Expand the Wizard Tasks menu.
  29. Select Summary from the Step drop down list.
  30. Drag and drop a label into the editable area of the wizard control.
  31. Change the ID property to ‘LabMessage’.
  32. Expand the Wizard Tasks menu.
  33. Select Finish from the Step drop down list.
  34. Drag and drop a label into the editable area of the wizard control.
  35. Change the ID property to ‘LabFinish’.

Now that we have a simple form for each of our wizard steps, we need to add some code that will first display a summary of our data in the summary step, and then display a success message when the wizard is completed. To do this, select the wizard control and double click the NextButtonClick event in the properties window. Then, add the following code to that event method:

This code will check to see if the current wizard step is the finish step type. If it is, we will display a summary of our data in the summary label. Next, open Default.aspx up to design mode and double click the wizard control to generate the OnFinish event method. Then, add the following code to that method:

This code simply displays a success message once the final step is complete.

Testing

To test this out load up the web site and enter some input into the text boxes of the first three steps. Ensure that a summary of your data is being displayed on the summary step and that a success message is displayed in the finish step. This demonstrates how you can easily use the wizard control to create organized forms to collect user input.

Download Source Files