Walking with a Wizard
page 1 of 1
Published: 22 Feb 2006
Unedited - Community Contributed
Abstract
In this article, Rajesh demonstrates the working of the Wizard control included with .NET Framework 2.0 with the help of a simple Quiz application.
by Rajesh Toleti
Feedback
Average Rating: 
Views (Total / Last 10 Days): 14352/ 21

 

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.



User Comments

Title: Hate Wizards   
Name: Gavin
Date: 2010-01-26 8:50:11 PM
Comment:
I hate these wizards but this page just saved me hours of pain.

Thanks for the easy read
Title: GOO   
Name: Giri
Date: 2007-04-09 4:33:08 AM
Comment:
Good, it is fine .
Title: Wizard   
Name: Pavan
Date: 2006-02-23 2:16:27 AM
Comment:
Very good article on ASP.NET. Its gives a clear understanding with clear cut example.
Title: Take a Walk   
Name: Ramana,KV
Date: 2006-02-22 4:57:02 AM
Comment:
Excellent article on latest control introduced in ASP.NET 2.0.
This control simplified the developer's effort and
this aricle "Take a Walk" , simplified further to make it "Cake Walk"
Title: Life becomes easier...   
Name: Mahesh
Date: 2006-02-22 4:52:48 AM
Comment:
Coool. Like see a link where I can see a live example.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-04-27 7:08:07 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search