Reader Level:
ARTICLE

Wizard Control in ASP.Net

Posted by Senthilkumar Articles | .NET 4.5 March 14, 2012
This article explains the Wizard control in ASP.Net with an example.
  • 1
  • 0
  • 32893
Download Files:
 

Wizard control eliminates the need to design forms to execute a step by step process in the actual business flow. This simplifies the work of developers to design and write the code. 

The control provides a mechanism that allows you to easily build the desired wizard as a collection of steps, add a new step, or reorder the steps. You don't have to write any infrastructure whatsoever for navigation or to persist user data between steps.

The asp:wizard is a control name and wizardsteps is the parent element for the asp:wizardstep element. 

<asp:wizard  id="wizard1" runat="server>
<wizardsteps>
  <asp:WizardStep runat="server" Title="Personal Information" StepType="Auto">
//Place the control here.
</asp:wizardstep>
</wizardsteps>
</asp:wizard>

There can be multiple wizard step which iterates from by form. The control can be placed in the wizard step tag.

The step is the enum type which has the attributes Auto, Complete, Finish, Start and Step,

The first form will have the next button and all the subsequent forms will have the previous and next button.
The last wizard step tag should be defined as the complete step type.

There are events which are used to write the events on the controls in the wizard control.

OnActiveStepChanged
OnCancelButtonClick
OnPreviousButtonClick
OnNextButtonClick
OnFinishButtonClick
OnSideBarButtonClick

For example the Finish button click event can be written in the server side like the following.

protected void OnFinish(object sender, WizardNavigationEventArgs e)
    {
        WizardStepType t = Wizard1.WizardSteps[e.NextStepIndex].StepType;
        if (t == WizardStepType.Finish)
        {
          //code here...
        }
    }

Wizard control properties:

Template Description
FinishNavigationTemplate Specifies the navigation bar shown before the last page of the wizard; by default, navigation bar contains the Previous and Finish buttons
HeaderTemplate Specifies the title bar of the wizard
SideBarTemplate Used to display content in the left side of the wizard control
StartNavigationTemplate Specifies the navigation bar for the first view in the wizard; by default, contains only the Next button
StepNavigationTemplate Specifies the navigation bar for steps other than first, finish, or complete; by default, contains Previous and Next buttons

Wizard Style Properties

CancelButtonStyle Wizard Cancel button
FinishStepButtonStyle Wizard Finish button
FinishStepPreviousButtonStyle Wizard Previous button at the finish step
HeaderStyle Wizard header
NavigationButtonStyle Navigation buttons
NavigationStyle Navigation area
NextStepButtonStyle Wizard Next button
PreviousStepButtonStyle Wizard Previous button
SideBarButtonStyle Buttons on the sidebar
StartStepNextButtonStyle Wizard Next button at the start step
StepStyle Area where steps are displayed

Wizard Control Properties:

Property Description
ActiveStep Returns the current wizard step object; the object is an instance of the WizardStep class
ActiveStepIndex Gets and sets the zero-based index of current wizard step
DisplaySideBar Toggles the visibility of the sidebar; the default value is True
FinishStepButtonText Gets and sets the text for the Finish button
HeaderText Gets and sets the title of the wizard
NextStepButtonText Gets and sets the text for the Next button
PreviousStepButtonText Gets and sets the text for the Previous button



I have designed an example application for the Wizard control.

The wizard ActiveStep property can be set  by the ActiveStepIndex="0" of the wizard control. The first form will have the next navigation control.

Wizard1.jpg

The next form can be navigated through the "Next" button or user can jump into any wizard by clicking side bar navigation control.

Wizard2.jpg

The Last form in the wizard will have the finish button. The user can identify the step by ActiveStepType in the finish button.


Wizard3.jpg


Note: The properties, styles properties and template table have been taken from the MSDN.

COMMENT USING

Trending up