Additional New Controls

Customizing the side navigation

From the example in Figure 12-8, you can see that the steps are defined as Step 1, Step 2, and Step 3. The links are created based upon the Title property’s value that you give to each of the <asp:WizardStep> elements in the Wizard control:

<asp:WizardStep Runat=”server” Title=”Step 1”> This is the first step.</asp:WizardStep>

By default, when creating Wizard Steps in Design view, each Wizard Step created is titled Step X (with X being the number in the sequence). You can easily change the value of the Title attributes of each of the Wizard Steps to define the steps as you see fit. Figure 12-9 shows the side navigation of the Wizard control with renamed titles.

Figure 12-9

Examining the AllowReturn attribute

Some other interesting points of customization for the side navigation piece of the Wizard control include the AllowReturn attribute. By setting this attribute on one of the Wizard Steps to False, you can remove the capability for the end users to go back to the step after they have viewed it. This ensures that the end user cannot backward navigate to any of the viewed steps that contained this attribute, but he would be able to return to any steps that do not contain this attribute or which have this attribute set to True:

<asp:WizardStep Runat=”server” Title=”Step 1” AllowReturn=”False”> This is the first step.</asp:WizardStep>

Working with the StepType attribute

Another interesting attribute in the <asp:WizardStep> element is the StepType attribute. The StepType attribute defines the structure of the buttons used on the steps. For instance, by default, the Wizard control places only a Next button on the first step. It understands that because this is the first step, you probably don’t need the Previous button here. It also knows to use a Next and Previous button on the middle step, but it uses a Previous and a Finish button on the last step. It draws the buttons in this fashion because, by default, the StepType attribute is set to Auto, meaning that the Wizard control determines the placement

357

Chapter 12

of buttons. You can, however, take control of the StepType attribute in the <asp:WizardStep> element to make your own determination about which buttons are used for which steps.

Besides a StepType value of Auto, the other options include Start, Step, Finish, and Complete. A value of Start for the Wizard Step means that the step defined has only a Next button and nothing else. This simply allows the user to proceed to the next step in the series. A value of Step means that the Wizard Step has a Next and a Previous button. A value of Finish means that the step includes a Previous and a Finish button. The last one, Complete, is an interesting step that you can add to give some final message to the end user who is working through the steps of your Wizard control. In the Wizard control shown in Listing 12-8, for example, when the end user gets to the last step and clicks the Finish button, nothing happens and the user just stays on the last page. You can address this by adding a final step to the collection of Wizard Steps to give a final message as shown in Listing 12-9.

Listing 12-9: Having a Complete step in the Wizard Step collection

<WizardSteps>

<asp:WizardStep Runat=”server” Title=”Step 1”> This is the first step.</asp:WizardStep> <asp:WizardStep Runat=”server” Title=”Step 2”> This is the second step.</asp:WizardStep> <asp:WizardStep Runat=”server” Title=”Step 3”> This is the third and final step.</asp:WizardStep>

<asp:WizardStep Runat=”server” Title=”Final Step” StepType=”Complete”>

Thanks for working through the steps.</asp:WizardStep> </WizardSteps>

When you run this Wizard control in a page, you still only see the first three steps in the side navigation. Because the last step has a StepType set to Complete, it does not appear in the side navigation list, and when the end user clicks the Finish button in Step 3, the last step — Final Step — is shown and no buttons are shown with it.

Adding a header to the Wizard control

The Wizard control enables you to place a header at the top of the control with the use of the HeaderText attribute in the main <asp:Wizard> element. This is illustrated in Listing 12-10.

Listing 12-10: Working with the HeaderText attribute

<asp:Wizard ID=”Wizard1” Runat=”server” SideBarEnabled=”true” ActiveStepIndex=”0” HeaderText=” Step by Step with the Wizard control ” HeaderStyle-BackColor=”DarkGray” HeaderStyle-Font-Bold=”true” HeaderStyle-Font-Size=”20”>

...

</asp:Wizard>

This code creates a header that appears on each of the steps in the Wizard. The result of this snippet is shown in Figure 12-10.

358

Additional New Controls

Figure 12-10

Working with the Wizard’s navigation system

As I stated earlier, the Wizard control allows for a very high degree of customization — especially in the area of style. You can customize every single aspect of the process, as well as how every element appears to the end user.

Pay particular attention to the options that are available for customization of the navigation buttons. By default, the Wizard Steps use buttons for Next, Previous, and Finish that are used throughout the entire series of steps. From the main <asp:Wizard> element, you can change everything about these buttons and how they work.

First, if you look through the long list of attributes available for this element, notice that one available button isn’t shown by default. The Cancel button can be added by setting the value of the DisplayCancelButton attribute to True. As shown in Figure 12-11, this gives you a Cancel button within the navigation created for each and every step (including the final step in the series).

Figure 12-11

359

Chapter 12

After you decide which buttons to use within the Wizard navigation, you can choose the style of these buttons. By default, regular buttons appear, but you can change the button style with the CancelButtonType,

FinishStepButtonType, FinishStepPreviousButtonType, NextStepButtonType, PreviousStepButtonType, and StartStepNextButtonType attributes. All these attributes change the style of the buttons used for the navigation system of the Wizard control. If you use any of these button types and want all the buttons consistently styled, you must change each attribute to the same value. The possible values of these button-specific elements include Button, Image, and Link. Button is the default and means that the navigation system uses buttons. A value of Image enables you to use image buttons, and Link turns a selected item in the navigation system into a hyperlink.

In addition to these button-specific attributes of the <asp:Wizard> element, you can also specify a URL to which the user is directed when the he clicks either the Cancel or Finish buttons. To redirect the user with one of these buttons, you use the CancelDestinationPageUrl or the FinishDestinationPageUrl attributes and set the appropriate URL as the destination.

Finally, you are not required to use the default text included with the buttons in the navigation system. You can change the text of each of the buttons with the use of the CancelButtonText,

FinishStepButtonText, FinishStepPreviousButtonText, NextStepButtonText,

PreviousStepButtonText, and the StartStepNextButtonText attributes.

Utilizing Wizard control events

One of the most convenient capabilities of the Wizard control is that it enables you to divide large forms into logical pieces. The end user can then work step by step through each section of the form. The developer, dealing with the inputted values of the form, has a few options because of the various events that are available in the Wizard control.

The Wizard control exposes events for each of the possible steps that an end user might take when working with the control. The following table describes each of the available events.

360