Introduction
The wizard control is a more glamorous version of the multiview control. It also supports showing one of several views at a time. Basically a wizard interface will be used when we require a user to input a lot of data categorize in various steps. Wizard enables us to take the data from the user a series of multiple steps.
This article shows you a small web application created using ASP.NET 2.0, which takes input from user to order a software product.
(1) Open a new web site project.
(2) Add a wizard control to the project from the toolbox. By default you will notice there are 2 steps in the wizard.
(3) Now we make total four steps to our wizard and rename it as Personal,Company,
Software, complete.
(4) Now change the step type value for each step from wizard step collection editor.
This value determines the type of navigation button that will shown for this step. Choices include Start (shows a Next button), Step (shows Next and Previous button), Finish (Shows a finish and previous button), Complete (shows no button and hide the sidebar, if it enabled).
Personal = Start
Computer = Step
Software = Finish
Complete = Complete
(5) Now let us add some controls for each step.
For the first step we will add the personal profile
Preferred Programming Language
<asp:DropDownList ID="DropDownList2" runat="server" Style="z-index:100; left: 481px;position: absolute; top: 160px" OnSelectedIndexChanged= "DropDownList2_SelectedIndexChanged">
<asp:ListItem>c#</asp:ListItem>
<asp:ListItem>vb</asp:ListItem>
<asp:ListItem>j#</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:DropDownList>
For the second step we will add the company profile
<asp:WizardStep runat="server" Title="Company" StepType="Step">
No. of Employees
<asp:TextBox ID="TextBox1" runat="server" Style="z-index: 100; left: 409px; position: absolute;top: 51px"></asp:TextBox>
No. of Locations
<asp:TextBox ID="TextBox2" runat="server" Style="z-index: 102; left: 411px; position: absolute;top: 140px"></asp:TextBox></asp:WizardStep>
For the third step we will add the software profile
<asp:WizardStep runat="server" Title="Software Profile" StepType="Finish">
SOFTWARE PROFILE
Licenses Required
<asp:CheckBoxList ID="CheckBoxList1" runat="server" Style="z-index: 100; left: 277px;position: absolute; top: 106px">
<asp:ListItem>visual studio</asp:ListItem>
<asp:ListItem>office</asp:ListItem>
<asp:ListItem>2003 server</asp:ListItem>
<asp:ListItem>sql server 2005</asp:ListItem>
<asp:ListItem>biz talk 2004</asp:ListItem>
</asp:CheckBoxList>
</asp:WizardStep>
For the last step we will add the complete profile
<asp:WizardStep runat="server" Title="complete" StepType="Complete">
Thank for your survey.
your products will be deliverd soon.</asp:WizardStep>
Finally when you run it in web browser
Conclusion
We saw how to use the wizard control provided by ASP.NET 2.0. This is just one of the examples, which I have taken here. We can use the wizard control on most of our pages where we need to use tabs. Wizard is easy to use. I hope this article has been useful to you.