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, registration process and lengthy application forms that span several pages.
The part of a wizard are
-
Main: This contains the user interface for each step (This area includes Navigational buttons).
-
Header: It displays header information about the current step.
-
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".
Here I am going to show wizard concept by using a simple example of registration process. In registration process there can be more then one pages so here for registration we use wizard concept.
I am storing the data of registration in a table. I stored the database in zip folder. To run this application just attach that database and change the connection string.
Here in this application I stored the connection string in web.config file like as:
<connectionStrings>
<add name="dbConnectionString" connectionString="Data Source=MCN101; Initial Catalog = WizardDataBaseShow; Uid=sa; pwd="/>
</connectionStrings>
AWizardApplication.aspx code is:
<%
@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Wizard Concept</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="4" cellpadding="4" cellspacing="4" width="80%" align="center">
<tr><td align="center"><asp:Label ID="lblRegistration" runat="server" Text="Registration" Font-Bold="true">
</asp:Label>
</td></tr>
<tr><td align="center">
<%--Define the wizard properties--%>
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" BackColor="#FFFBD6" BorderColor="#FFDFAD"
SideBarStyle-BorderWidth="4" DisplaySideBar="true" SideBarStyle-BorderStyle="None"
SideBarButtonStyle-Font-Size="Small" SideBarButtonStyle-Font-Bold="true" HeaderStyle-BackColor="AliceBlue"
SideBarStyle-BackColor="AliceBlue" SideBarStyle-BorderColor="Red" OnFinishButtonClick="Wizard1_FinishButtonClick">
<%--In this WizardSteps we define how many wizard step we are going to use--%>
<WizardSteps>
<asp:WizardStep ID="Wizardstep1" runat="server" Title="Step 1">
<asp:Label ID="lblName" runat="server" Text="First Name" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label1" runat="server" Text="Middle Name" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtMiddleName" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label2" runat="server" Text="Last Name" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
<asp:Label ID="Label3" runat="server" Text="City" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label4" runat="server" Text="State" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtState" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label5" runat="server" Text="Country" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox><br />
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" StepType="Finish" Title="Final Step">
<asp:Label ID="Label6" runat="server" Text=" Email" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Label ID="Label7" runat="server" Text="Mobile" Font-Bold="true" Width="121px"> </asp:Label>
<asp:TextBox ID="txtMobile" runat="server"></asp:TextBox>
</asp:WizardStep>
</WizardSteps>
<NavigationButtonStyle BackColor="White" BorderStyle="Solid" BorderColor="#CC9966" BorderWidth="4px"
Font-Names="Verdana" Font-Size="14pt" ForeColor="#990000" />
<HeaderStyle BackColor="#FFCC66" BorderColor="#FFFBD6" BorderStyle="Solid" HorizontalAlign="Center"
BorderWidth="0px" Font-Bold="True" Font-Size="14pt" ForeColor="#333333" Width="480px" />
<SideBarStyle BackColor="blue" Font-Size="8pt" Width="0px" BorderStyle="None" BorderWidth="0px" Wrap="True" />
<SideBarButtonStyle ForeColor="White" />
</asp:Wizard>
</td></tr>
</table>
</div>
</form>
</body>
</html>
The AWizardApplication.aspx.vb code is:
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object, ByVal e As WizardNavigationEventArgs)
insertDataIntoDB(txtFirstName.Text.ToString.Trim, txtMiddleName.Text.ToString.Trim, txtLastName.Text.ToString.Trim, txtCity.Text.ToString.Trim, txtState.Text.ToString.Trim, txtCountry.Text.ToString.Trim, txtEmail.Text.ToString.Trim, txtMobile.Text.ToString.Trim)
End Sub
Public Sub insertDataIntoDB(ByVal F_Name As String, ByVal M_Name As String, ByVal L_Name As String, ByVal City As String, ByVal State As String, ByVal Country As String, ByVal Email As String, ByVal Mobile As String)
Dim conn As String = System.Configuration.ConfigurationManager.ConnectionStrings("dbConnectionString").ConnectionString
Dim myConnection As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(conn)
Dim MySQL As String = "NewRegistration"
Dim cmd As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand(MySQL, myConnection)
cmd.CommandType = System.Data.CommandType.StoredProcedure
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@F_Name", F_Name))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@M_Name", M_Name))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@L_Name", L_Name))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@City", City))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@State", State))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Country", Country))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Email", Email))
cmd.Parameters.Add(New System.Data.SqlClient.SqlParameter("@Mobile", Mobile))
myConnection.Open()
cmd.ExecuteNonQuery()
myConnection.Close()
End Sub
End Class
When user run the application then the window will become look like as:
Figure 1: This is the first wizard step. So here only next button only visible. The blue area is SideBar from here we can go any wizard page. We can hide this area by setting a property DisplaySideBar="false".
The second page is:
Figure 2: Here both Previous and Next button are visible.
The final wizard step is:
Figure 3: This is the final step, so here finish button is showing, On clicking finish button the all field data of all wizard step will store in database.