Building a series of interconnected forms to break up data collection is a common practice. You can accomplish this by managing the navigation between forms, the data persistence, and the state management in each step. With the Wizard control, you use discrete steps to collect data, which allows users to navigate between steps at their discretion and creates a simpler user experience. As a developer, you do not have to worry about making your data persist across pages because the control maintains state while the user completes the various steps.
The Wizard control uses steps to delineate different sections of user data input. Each step within the control is given a StepType to indicate whether it is the beginning step, intermediate step, or completion step. The wizard can have as many intermediate steps as needed. You can add different controls, such as a TextBox or ListBox control, to collect user input. When you reach the Complete step, all of your data is accessible. The following code example illustrates the Wizard control with two steps.
<asp:Wizard ID="Wizard1" Runat="server">
<asp:WizardStep Runat="server" Title="Step 1">
<asp:WizardStep Runat="server" Title="Step 2">
Within each step, you can add controls and labels, and accept user data. The Wizard control will help manage which step to display, and help maintain the collected data.
The Wizard control features both linear and non-linear navigation. The control's state management allows the user to move forward and backward between steps, and it allows the user to select individual steps at any point, as long as the sidebar is displayed. You can customize the text for navigation in the control's root asp:Wizard element by using the StepNextButtonText, StepPreviousButtonText, and FinishCompleteButtonText properties.
<asp:Wizard ID="Wizard1" Runat="server"
StepNextButtonText=" Next >> "
StepPreviousButtonText=" << Previous "
FinishCompleteButtonText=" Done! ">
Customizing Other Wizard Control Aspects
The Wizard control automatically displays a title and the control's current step. The title is customized with the HeaderText property. You can adjust the header's template by using the HeaderTemplate property.
You can optionally display a cancel button by setting the DisplayCancelButton property to true.
The Wizard control's NavigationButtonStyle property provides an easy way to set all of the buttons to a common style, while providing the flexibility to customize each button individually. The NavigationButtonStyle property applies to all of the buttons rendered. However, you can override this style by setting the individual button's style property.
Wizard Control Events
You can customize the behavior of the Wizard control by using custom code and events.
For example, you can intercept the NextButtonClick event, which is raised when the user clicks the Next button and captures the data of the current step. The WizardNavigationEventArgs parameter passed to this event includes the CurrentStepIndex and NextStepIndex properties, enabling you to customize the behavior of the control based on the current and next steps, or to cancel the navigation when the Next button is clicked.
Similarly, you can customize the behavior of the Previous and Finish buttons by using the PreviousButtonClick and FinishButtonClick events. Or you can perform cleanup when the Cancel button is clicked by using the CancelButtonClick event.
Back to top
Formatação e estilos CSS
Por padrão, o Wizard layout do controle é processado utilizando uma tabela HTML . No entanto, usando tabelas para dispor elementos visuais em uma página não é semanticamente correto e pode não ser compatível com as regras de folha de estilos em cascata (CSS). Para resolver esse problema, o Wizard controle pode processar a marcação que usa CSS para layout em vez de usar tabelas. Isso facilita o controle de formato. O Wizard controle suporta um LayoutTemplateapropriedade que você pode usar para especificar o layout dos elementos visual. For more information, see LayoutTemplate.
O Wizard controle também suporta a capacidade de usar um ListView de controle em vez de um DataList controle dentro de sua áreade barra lateral. For more information, see SideBarTemplate.