Wizard control is an asp.net server control used to split the task into many form to collect user data. Mostly wizard control is useful to applications like online test, online quiz and Registration process form.

The main parts of Wizard control are

Main: It contain user interface. In this part, user can add asp.net controls like

label,textboxs,checkbox..

Header: It display header title of the wizard control

Sidebars: It contains steps to navigate from one step to other step.

Properties of Wizard Control:

Width: 400px (according to my example)

Step1: Drag Wizard control from standard controls in Toolbox change width : 400px

<asp:Wizard ID=”Wizard2″ runat=”server” Width=”400px” ActiveStepIndex=”0″ BorderColor=”Black” BorderStyle=”Solid” BorderWidth=”2px”>

<StartNavigationTemplate>

<asp:Button ID=”StartNextButton” runat=”server” CommandName=”MoveNext” ValidationGroup=”register” Text=”Next” />

</StartNavigationTemplate>

<WizardSteps>

<asp:WizardStep runat=”server” title=”Step 1″>

</asp:WizardStep>

asp:WizardStep runat=”server” title=”Step 2″>

</asp:WizardStep>

Step 2: Adding Header to wizard control

Goto Wizard control properties àchoose HeaderStyle (change properties )

Ex: BackColor: #D5E2FF

Height:      30px

Font:

Name: Verdana

Color: Black

<HeaderStyle

BackColor=”#D5E2FF”

Height=”30px”

Font-Names=”Verdana” />

HeaderText Property is to display Header heading in wizard control

HeaderText = Registration Form

<asp:Wizard ID=”Wizard2″ runat=”server” Width=”400px” ActiveStepIndex=”1″

BorderColor=”Black”

BorderStyle=”Solid”

BorderWidth=”2px”

HeaderText=”Registration Form” >

Step 3: changing Sidebars styles

Goto Properties of wizard control -à choose SideBarStyle à

SideBarButtonStyle Properties

<SideBarButtonStyle

Font-Names=”Verdana”

Font-Size=”9pt”

Font-Underline=”False”

ForeColor=”White” />

sideBarStyle Properties

<SideBarStyle

BackColor=”Black”

Width=”100px” />

Step4: Adding Main content i.e user interface to wizard control. Click Header part of below empty row i.e nothing but user interface. See below figure

Goto table Menuà insert table 4 rows and 2 columns

Drag 3 labels and 3 textboxes

Label1 Text Property =FirstName

Label2=LastName

Label3=DateOfBirth

TextBox1 ID =txtFirstName

TextBox2 ID =txtLastName

TextBox3 ID=txtDOB

This process for only Step1

Similary for Step2, First choose Step2 form dropdown in wizard Tasks

Similary for step3,

Run the application now but keep Step=Step1(i.e. AcitiveStepIndex=0)

While you run the application if Step=step2 then starting wizard page shows step2

Wizard control validation

Step1: Drag RequiredFieldValidator to Username,Password and confirmPwd which is present in Step 3 in wizard task

And Drag Compare Validator and validation Summary

ValidationGroup = register

After Dragging required validation controls in wizard Tasks Step3

Sample Design code for only Wizard control WizardStep 3

<asp:WizardStep runat=”server” title=”Step 3″>

<table style=”font-family: Verdana; font-size: 9pt” width=”300px”>

<tr>

<td colspan=”2″>

<asp:CompareValidator ID=”CompareValidator1″ runat=”server”

ControlToCompare=”txtPassword” ControlToValidate=”txtConfPwd”

ErrorMessage=”Password not matched” ValidationGroup=”register”>

</asp:CompareValidator>

<asp:ValidationSummary ID=”ValidationSummary1″ runat=”server”

ShowMessageBox=”True” ShowSummary=”False” ValidationGroup=”register” />

</td>

</tr>

<tr>

<td>UserName</td>

<td>

<asp:TextBox ID=”txtUserName” runat=”server” BorderColor=”Black”

BorderStyle=”Solid” BorderWidth=”1px”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator3″ runat=”server”

ControlToValidate=”txtUserName” ErrorMessage=”Enter UserName”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td>Password</td>

<td>

<asp:TextBox ID=”txtPassword” runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server”

ControlToValidate=”txtPassword” ErrorMessage=”Enter Password”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td>

Confirm PWd</td>

<td>

<asp:TextBox ID=”txtConfPwd” runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator2″ runat=”server”

ControlToValidate=”txtConfPwd” ErrorMessage=”Enter ConfPwd”

ValidationGroup=”register”>*</asp:RequiredFieldValidator>

</td>

</tr>

</table>

</asp:WizardStep>

Remember: You have to give validation group to Finish button in above figure

1) First click Convert to StepNavigation Template in Wizard Tasks (see above figure)

2) After clicking Convert to StepNavigation Template it changes into

Reset StartNavigation Template

Similarly, Click Convert to Step FinishNavigation Template it changes into

Reset StartNavigation Template

3) Then click Edit Templates in Wizard Tasks

4) Choose FinishNavigation Template in display drop down

You can see Finish button and previous Button

Note:  If you not visible Finish Button follow to below procedure

( see in Wizard Tasks that

Reset FinishNavigation Template then only it shows Finish and Previous Button if it is in

convert to FinishNavigation Template it wont shows Finish and Previous Button

Now click in Finish button properties change ValidationGroup=register

Finish Navigation Template Design Code

<FinishNavigationTemplate>

<asp:Button ID=”FinishPreviousButton” runat=”server” CausesValidation=”False” CommandName=”MovePrevious” Text=”Previous” />

<asp:Button ID=”FinishButton” runat=”server” CommandName=”MoveComplete”

Text=”Finish” ValidationGroup=”register” />

</FinishNavigationTemplate>

StepNavigation Template Design code

<StepNavigationTemplate>

<asp:Button ID=”StepPreviousButton” runat=”server” CausesValidation=”False”

CommandName=”MovePrevious” Text=”Previous” />

<asp:Button ID=”StepNextButton” runat=”server” CommandName=”MoveNext”

Text=”Next” />

</StepNavigationTemplate>

</asp:Wizard>

Now Run the Application click Finish Button Validation calls

Adding Asp.net Wizard control information into database

Step 1: In wizard control, contain textbox control and its properties of ID’s given below according to wizard control steps.

Wizard Tasks  step 1 contain

FirstName =txtFirstName

LastName=txtLastName

Wizard Tasks  step 2 contain

City=txtCity

State=txtState

Country=txtCountry

Wizard Tasks step 3 contain

UserName =txtUserName

Password =txtPassword

Step 2: Double click in Wizard control then the below event fires

protected void Wizard2_FinishButtonClick(object sender, WizardNavigationEventArgs e)

{

string ConnectionString = “Data Source=192.168.1.23;Initial Catalog=Purchase;User id=sa;Password=abc;”;

SqlConnection objConn = new SqlConnection(ConnectionString);

string query = “insert into tblregister(FirstName,LastName,City,State,Country,UserName,Password) ”

+ “values(@FirstName,@LastName,@City,@State,@Country,@UserName,@Password)”;

SqlCommand objCmd = new SqlCommand(query, objConn);

objCmd.CommandType = CommandType.Text;

objCmd.Parameters.Add(”@FirstName”, SqlDbType.VarChar).Value = txtFirstName.Text;

objCmd.Parameters.Add(”@LastName”, SqlDbType.VarChar).Value = txtLastName.Text;

objCmd.Parameters.Add(”@City”, SqlDbType.VarChar).Value = txtCity.Text;

objCmd.Parameters.Add(”@State”, SqlDbType.VarChar).Value = txtState.Text;

objCmd.Parameters.Add(”@Country”, SqlDbType.VarChar).Value = txtCountry.Text;

objCmd.Parameters.Add(”@UserName”, SqlDbType.VarChar).Value = txtUserName.Text;

objCmd.Parameters.Add(”@Password”, SqlDbType.VarChar).Value = txtPassword.Text;

objConn.Open();

objCmd.ExecuteNonQuery();

objConn.Close();

}