asp.net wizard control
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>
asp.net wizard control
wizard control steps
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” />
wizard sidebar design
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
wizard tasks steps
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
wizard control Step1
Similary for Step2, First choose Step2 form dropdown in wizard Tasks
wizardStep2
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
wizard control Validation
3) Then click Edit Templates in Wizard Tasks
Wizard control EditTemplate
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
wizard control finishNavigation
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
Wizard control validations
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();
}
