ASP Wizard & WizardStep Controls

ASP 4.0 provides Wizard Control to collect data from the user in an organized way. This control displays WizardStep Controls sequentially and each WizardStep collects logically related data. The Wizard control is based on MultiView and View control, which we discussed the previous lab. The wizard acting as a MultiView can display a WizardStep as a view and allows the user to navigate through all the views (WizardStep) to feed-in their input. In this Lab, we will create a web form with Wizard Control which will collect user input to order Pizza.

1: Add Wizard Pages to Wizard

In this step, we will create a Wizard Control and add pages to it. Step chart is below:

Add Wizard & WizardSteps

1) Add a new web form to the website and name it as 11_WizardControl.aspx
2) From the toolbox, pick the Wizard Control and drag it to the form.
3) Once dropped, the Wizard Control shows a three sets of controls by default. Step1 and Step2 are the Wizard steps and Wizard Control shows the first step to the user. The rectangle box is the WizardStep Control, which is a child to the Wizard and can hold multiple other controls like buttons, checkboxes, etc. The Next button is part of the Wizard Control and based on user navigation, the Wizard will show Previous, Next, Finish buttons.
4) Now, we will remove the default steps and add our own. Click on the Add/Remove WizardSteps. If Wizard Control does not show this Quick Menu, click on the arrow button.
5) In the WizardStep Collection Editor, select step and click Remove. This way, you can remove both the Wizard Steps.
6) Click the add button 4 times. This will add four WizardStep controls to the Wizard. The number represents each wizardstep and at runtime, we can use these numbers to set an active wizard step or to enquire the same.

Set WizardStep Properties

7) Select Wizard Step 1 or WizardStep Control at index location 0. The right-side pane shows the properties for the WizardStep Control.
8) Set Title and ID for the Wizard Step. Note, the browser will show the Title on the left side of the wizard. This title is a quick step indicator for the user.
9) 10) 11) 12) 13) 14) Shows the same step of setting the control properties for each WizardStep Control.
15) In the Design View, you can see how your wizard looks.

Note, we are not yet done with the controls for each wizard’s steps. We do that in the next Major Step.

2: Add Child Controls to WizardStep

Now our Wizard is ready with WizardStep Controls. But these steps are empty at this moment, and we will populate them in this section. Step Chart is below:

Setup WizardStep Controls

1) Open the Design View and Click on the link Bread Type to activate the first step in design mode. Then, drag & drop three radio button controls in the empty rectangle just above the next button.
2) Click on the Pizza Size link and drop two radio controls for this step.
3) Click on the toppings link and fill the WizardStep control with three check boxes.
4) Finally, setup Summary Step with a single Label Control. With these four steps, we populated each wizard page with relevant controls to get user input.
5) We will setup Bread Type page to get what type of bread the user wants to have.
6) Set GroupName property of all three radio controls on this page to Bread. This will help to keep these three-radio control in a single group and the user can select only one among the bread type.
7) Set ID property for each of the Radio button controls as shown. We refer to this ID and runtime to know the user choice.
8) Set the Text property as shown in the chart. In the design view, you can verify the page shows the display text of the Radio buttons.
9) 10) The same way setup the second page.
11) 12) Setup the third page to collect pizza toppings and cheese requirements.
13) 14) This will be our final page which shows the user choice for baking the pizza.

Test Run

15) Launch the web page with the run command. When the page displays click on the Bread type. This will show the very first page, which means Wizard Control sets the WizardStep Control at index location 0.
16) Check you can select only one Bread Type here. Also notice the Wizard Control displays Next button.
17) Select the Pizza Size to move to the second step. Now the Wizard shows one more button called Previous. Since you are at second step, you can either move to the first page or advance to the next page by these Next and Previous buttons.
18) Make sure you pick either small or large.
19) Click the Next button to advance to the next step. Note, like we did previously, you can also click the Toppings Link.
21) Make sure checkboxes are working.
20) Click on the Summary Link and notice the wizard does not display Next button as this is the final step and instead, it displays a Finish button.

3: Handle Wizard Button Clicks

In this section, we will handle the wizard button’s click event and, in the process, collect the information from the user. Step chart is below:

Collect Data from Wizard Control

1) Here, we are setting a few more properties to the ASP WizCard Control. The BackColor property will set a background color for the Wizard, and we set light yellow. Then, we also set a pleasing border for our wizard using the BorderStyle, BorderWidth and BorderColor properties. To make the example simple, we handled only NextButtonClick, FinishButtonClick and Load events from the Wizard.
2) With the properties set in the previous step, the wizard looks as shown here.
3) In the form-behind code, we have a member variable called str. This is where we will form the summary text of user choice.
4) The Web Form has the wizard. So, when the page loads, it loads the Wizard Control as well and raises the Load Event for the Wizard. We set ActiveStepIndex property to 0 so that the Wizard Control will display WizardStep Control at index location 1, which is the wizard page for Bread Type. Note, we are doing this only when the form loads for the first time by checking the IsPostBack property of the web page.
5) When your clicks the Next button, the Wizard will raise NextButtonClick event. In the handler code, we check the ActiveStepIndex is 2. This means; we are checking user clicked the next button on the Topping Page. When all the toppings are selected by the user, we display you got a discount. Meaningless, right? It should be the other way. But that is OK–the shop owner is crazy.

Summarise Wizard Data

6) In the last page, the wizard will display a Finish button and raises FinishButtonClick event when the user clicks it. In the string variable, first we append a header text via html’s H1 tag.
7) Here, we read the controls from the first WizardStep Control and add the bread type to the string variable str. Note, we read the controls based on its ids.
8) This piece of code is to know the pizza size opted by the user. Note how the Wizard control keep the values entered by the user between the post-backs.
9) Next, we read the toppings selection from the user. Since we are at the Wizard Finish page; we are reading all the control information from all the WizardStep controls hosted by the Wizard Control. Also note, here we use the html tags UL and Li to form the unordered list.
10) Finally, we set the Label Control with the collected information. Note, we set the StepType property of WizardStep Control to the constant Complete, which is taken from the Enum WizardSteptype.  Also note, the ActiveStep will give us the currently active wizard step.

Test Run – Navigate via WizardSteps

11) When we run the WebPage with F5, the wizard displays showing the first step.
12) Select bread type as Thin Crust and then click Next.
13) Pick the Large sized pizza and click Next button. Note, so for we clicked the Next button twice. The code snippet at marker 5 in the step chart will react when the ActiveStepIndex is 2. This second click will set it as 1.
14) Select the Pizza toppings as Pepperoni and Extra Cheese and Click next.
15) Now, you see the information message in the Label. Click on the Finish button.
16) The code in the FinishButtonClick runs, displays the user’s choices of ordering the pizza. Also note, the Wizard control now does not display any button as we set StepType as Complete.

Code Reference

11_WizardControl.aspx

11_WizardControl.aspx.cs

• JavaScript Creating Custom Object
• LocalDate – Create Date Object

Categories: ASP 4.0

Tags: ActiveStep, ActiveStepIndex, FinishButtonClick, NextButtonClick, Wizard Control, WizardStepType, WizardTep Control

This site uses Akismet to reduce spam. Learn how your comment data is processed.