Wizard Control in asp.net

The Asp.net wizard is an elegant mechanism to perform set of operation to make our application ease for the end user and developer. It is a group of form to collect user information step by step .The navigation in wizard is achieved without writing code. The forms are basically the steps performed by the wizard.

Create an simple wizard application.
1=> Create a new web form.
2=> Drag the wizard control onto your form.

   <asp:Wizard ID="Wizard1" runat="server">
         <WizardSteps>
         <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1"></asp:WizardStep>
         <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2"></asp:WizardStep>
         </WizardSteps>
    </asp:Wizard>

3=> Add text box inside wizardstep1.

<asp:TextBox ID="TxtName" runat="server" placeholder="Name"></asp:TextBox>

4=> Add text box inside wizardstep2 .

<asp:TextBox ID="TxtFname" runat="server" placeholder="Name"></asp:TextBox>

5=> On design view Right click on Wizard => select "show Smart Tag" =>select " Add/remove WizardSteps".
6=> Click Add button(dropdown) wizardstep , set title : finish , stepType : Complete. and add id field in source code as id="WizardStep3".

<asp:WizardStep runat="server" StepType="Complete" Title="finish">    </asp:WizardStep>

7=> Add Label inside the wizardStep finish of wizard control.

<asp:Label ID="Label1" runat="server" Text="Finished"></asp:Label>

8=> Add Label at the bottom of wizard control.

  <asp:Label ID="LblName" runat="server" Text=""></asp:Label>
  <asp:Label ID="LblFName" runat="server" Text=""></asp:Label>

9=> Add the code in cs file

protected void Page_Load(object sender, EventArgs e)
        {
            LblName.Text = TxtName.Text;
            LblFName.Text = TxtFname.Text;
        }

10=> Run the application .
Above application displays data after ever step.



Create an Advance wizard application.
Earlier we have created only 2 steps wizard application.
Now we will have some advanced steps.

1=> Create a new web form.
2=> Drag the wizard control onto your form.
it will open two steps with id WizardStep1 & WizardStep2 , and title Step 1 & Step 2.

<asp:Wizard ID="Wizard1" runat="server">
         <WizardSteps>
           <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1"></asp:WizardStep>
           <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2"></asp:WizardStep>
        </WizardSteps>
 </asp:Wizard>

3=> Add text box inside wizardstep1 .

<asp:TextBox ID="TxtName" runat="server" placeholder="Name"></asp:TextBox>
<asp:TextBox ID="TxtAge" runat="server" placeholder="Age"></asp:TextBox>
<asp:TextBox ID="TxtAddr" runat="server" placeholder="Address"></asp:TextBox>

4=> Add text box inside wizardstep2.

 <asp:TextBox ID="TxtFName" runat="server" placeholder="Father Name"></asp:TextBox>
 <asp:TextBox ID="TxtMName" runat="server" placeholder="Mother Name"></asp:TextBox>

5=> On design view Right click on Wizard => select "Show Smart Tag" =>select " Add/remove WizardSteps".
6=> Click Add button(dropdown) wizardstep , set title : step 3. And add id field in source code as ID="WizardStep3".
7=> Add checkbox inside wizard step3.

 <asp:CheckBox ID="ChkConfirmation" runat="server" Text="I agree to view information" />

8=> Repeat step 5 and add wizardstep , set title:finish and steptype:complete. And add id field in source code as ID="WizardFinish".
9=> Add 6 label controls inside WizardFinish.

<asp:Label ID="LblMsg" runat="server" Text=""></asp:Label>
<asp:Label ID="LblName" runat="server" Text=""></asp:Label>
<asp:Label ID="LblAge" runat="server" Text=""></asp:Label>
<asp:Label ID="LblAdress" runat="server" Text=""></asp:Label>
<asp:Label ID="LblMName" runat="server" Text=""></asp:Label>
<asp:Label ID="LblFname" runat="server" Text=""></asp:Label>

10=> Write this code inside cs file .

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
        {
            LblMsg.Text = "<h2> Thanks for you patience</h2>";
            LblName.Text = TxtName.Text;
            LblAge.Text = TxtAge.Text;
            LblAdress.Text = TxtAddr.Text;
            LblMName.Text = TxtMName.Text;
            LblFname.Text = TxtFName.Text;
        }

11=> Run the application:
Do not forget to make ActiveStepIndex="0" in wizard control.
Above is an example of Application which presents the data in final confirmation step.

Step Type properties in smart tags for navigation:

-> Start : Displays a Next button.
-> Step : Displays Next and Previous buttons.
-> Finish : Displays a Finish button.
-> Complete : Displays no navigation buttons and hides the SideBar if it is displayed.
-> Auto : One of the step types listed above is selected with their order respectively (e.g. the first step will have a Next button).

Keywords:
ActiveStepIndex : The index of step to be executed on page load.

Refrences:
http://msdn.microsoft.com/en-us/library/cc295425.aspx
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/standard/wizard.aspx
http://www.codeproject.com/Articles/15804/ASP-NET-Wizard-Control