Meet the Wizard
Wizard is a brand new control introduced in ASP.NET 2.0. If
you are using Visual Studio 2005, you can see this control under "Standard"
controls in the Toolbox. Using the Wizard control, data can be collected through
linear or non-linear navigation. The most familiar applications that can be
developed using Wizard are online tests, online quizzes, and lengthy
application forms that span several pages. In the following example, we will
deal with only linear Wizard.
We will examine the anatomy of a wizard with the help of a
simple quiz application. Assume it has three questions, and they will appear
one after the other. After the third question, you will get your score. The
initial screen will be as shown in the figure given below.
Figure 1
The Wizard control is made up of the following areas:
1. Main: This contains the user interface for each step
(This area includes navigational buttons).
2. Header: It displays header information about the current
step.
3. Sidebar: It contains navigational steps for quick
navigation.
The navigation is determined by the StepType property. For
example, if StepType is "Start," there will be only the Next button
rendered in main area. The default value is “Auto”.
Listing1: QuizWizard.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public int score=0;
void scorefunction(Object sender, WizardNavigationEventArgs
e)
{
if (RBL1.SelectedValue == "a")
{
score += 1;
}
if (RBL2.SelectedValue == "c")
{
score += 1;
}
if (RBL3.SelectedValue == "c")
{
score += 1;
}
msg.Text = score.ToString();
}</script>
<html
xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Linear Wizard</title>
</head>
<body >
<form id="form1"
runat="server">
<div align=center>
<asp:Wizard ID="Wizard1"
runat="server" BackColor="#FFFBD6"
BorderColor="#FFDFAD" onfinishbuttonclick="scorefunction"
Height="160px" Width="480px" ActiveStepIndex="0"
BorderWidth="0px" Font-Names="Verdana"
Font-Size="0.8em" HeaderText="Linear Wizard Example" SideBarStyle-BorderWidth="0"
DisplaySideBar="true" SideBarStyle-BorderStyle="None"
SideBarButtonStyle-Font-Size="Small"
SideBarButtonStyle-Font-Bold="true"
SideBarStyle-BackColor="AliceBlue"
SideBarStyle-BorderColor="Red">
<WizardSteps>
<asp:WizardStep runat="server"
id=step1 StepType="Start">
1.When did India got independence?
<asp:RadioButtonList ID="RBL1"
runat="server">
<asp:ListItem
Value="a">1947</asp:ListItem>
<asp:ListItem
Value="b">1847</asp:ListItem>
<asp:ListItem
Value="c">1957</asp:ListItem>
<asp:ListItem
Value="d">1937</asp:ListItem>
</asp:RadioButtonList>
</asp:WizardStep>
<asp:WizardStep id=step2
runat="server">
2.When did USA got independence?
<asp:RadioButtonList ID="RBL2"
runat="server" >
<asp:ListItem
Value="a">1666</asp:ListItem>
<asp:ListItem
Value="b">1886</asp:ListItem>
<asp:ListItem
Value="c">1776</asp:ListItem>
<asp:ListItem
Value="d">1786</asp:ListItem>
</asp:RadioButtonList>
</asp:WizardStep>
<asp:WizardStep runat="server"
id=step3 StepType="Finish">
<asp:Label runat="server"
width="408px" height="24px">This is Last
Question</asp:Label>
3.Which of the following countries joined UN
recently?
<asp:RadioButtonList ID="RBL3"
runat="server" >
<asp:ListItem Value="a">Luxembourg</asp:ListItem>
<asp:ListItem Value="b">Germany</asp:ListItem>
<asp:ListItem
Value="c">Swirtzerland</asp:ListItem>
<asp:ListItem Value="d">Poland</asp:ListItem>
</asp:RadioButtonList>
</asp:WizardStep>
<asp:WizardStep runat="server"
id=step4 StepType="Complete">
<center>Your score is : <asp:label
ID=msg runat=server/></center>
</asp:WizardStep>
</WizardSteps>
<NavigationButtonStyle
BackColor="White" BorderStyle="Solid"
BorderColor="#CC9966" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#990000" />
<HeaderStyle BackColor="#FFCC66" BorderColor="#FFFBD6"
BorderStyle="Solid" HorizontalAlign="Center"
BorderWidth="0px" Font-Bold="True"
Font-Size="0.9em" ForeColor="#333333"
Width="480px" />
<SideBarStyle BackColor="blue"
Font-Size="8pt" Width="0px" BorderStyle="None"
BorderWidth="0px" Wrap="True" />
<SideBarButtonStyle ForeColor="White"
/>
</asp:Wizard>
</div>
</form>
</body>
</html>
Take a Walk
The wizard control is divided into 4 steps in the above
example. There is a RadioButtonList in each of first three steps and a label in
the last step. The first step in the example is the appearance of the first
question. There is only the "Next" button in this step. This kind of
step can be called a "start step." The value for the StepType
attribute is "Start."
The second step is the appearance of second question. There
are "Previous" and "Next" buttons in this step. This kind of step can be called a "normal step." The value for the StepType attribute
is "Step," or you need not specify the StepType attribute at all.
In the third step is the appearance of the third question.
There are "Previous" and "Finish" buttons in this step. This
kind of step can be called a "finish step." The value for the StepType
attribute is "Finish."
The fourth step is the appearance of your score. There will
not be any buttons. The value for the StepType attribute is "complete."
Once you finish third question, which is in step 3, the
"scorefunction" will be called. It is because of this fact that step
3 is the "Finishstep" and we are calling the "scorefunction"
function on the "onfinishbuttonclick" event.
The Wizard control maintains its state between steps, so in
the "scorefunction" we compare the selected values of all the three
answers at the same time with actual answers. We increase score by one for
each correct answer. Then we assign the score to the "msg" label. We
can see the “msg” label in the last step.
The Wizard control interface can be customized through the HeaderTemplate,
SideBarTemplate, skins, and style settings, etc. For quick navigation you can
use the sidebar. If you don’t like sidebar, add the attribute
"DisplaySidebar" and set its value to "false."
The data collected in various steps is persisted until the
last Step, so at that point we can collect data and can be stored in a
database.
Summary
No doubt, ASP.NET 2.0 has simplified the work of many
developers, and this article demonstrated the usage of the Wizard control with the
help of an example.
