Wizard is a new control introduced in ASP.NET 2.0. In Visual Studio 2005, we can find 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:
<connectionStrings>
<add name="dbConnectionString"
connectionString="Data Source=MCN101; Initial Catalog=WizardDataBaseShow; Uid=sa; pwd="/>
</connectionStrings>
AWizardApplication.aspx code is:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MakeProfile.aspx.cs" Inherits="Default2" %>
<!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>A Wizard Profile</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.cs code is:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
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());
}
public void insertDataIntoDB(string F_Name,string M_Name, string L_Name,string City,string State, string Country,string Email,string Mobile)
{
string conn = System.Configuration.ConfigurationManager.ConnectionStrings ["dbConnectionString"].ConnectionString;
System.Data.SqlClient.SqlConnection myConnection = new System.Data.SqlClient.SqlConnection(conn);
string MySQL = "NewRegistration";
System.Data.SqlClient.SqlCommand cmd = 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();
}
}
When user run the application then the window will look like this:
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 visible.