Wizard Control In ASP.NET Using C#

In this tutorial, I’ll show you how to make wizard control in ASP.NET using C#, where we will use wizard control to show some students' information. The control can be very useful when we are dealing with step by step registration forms.

INITIAL CHAMBER

Step 1. Open your Visual Studio 2010 and create an Empty website. Give it a suitable name [wizard_demo].

Step 2. In Solution Explorer, you get your empty website. Add a web form, like this –

For Web Form

wizard_demo (your empty website) -> Right click -> Add New Item -> Web Form. Name it as ->wizard_demo.aspx.

DESIGN CHAMBER

Step 3. Open your wizard_demo.aspx, and drag and drop the wizard control from the toolbox. Inside your wizard, add three wizard steps as – Student Details, Student Course Details, Student Personal Details and Student Summary. Design your .aspx file as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" BackColor="#FFFBD6" BorderColor="#FFDFAD" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" Height="210px" OnNextButtonClick="Wizard1_NextButtonClick" Width="496px">
                <HeaderStyle BackColor="#FFCC66" BorderColor="#FFFBD6" BorderStyle="Solid" BorderWidth="2px" Font-Bold="True" Font-Size="0.9em" ForeColor="#333333" HorizontalAlign="Center" />
                <NavigationButtonStyle BackColor="White" BorderColor="#CC9966" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" />
                <SideBarButtonStyle ForeColor="White" />
                <SideBarStyle BackColor="#990000" Font-Size="0.9em" VerticalAlign="Top" />
                <WizardSteps>
                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Student Details">
                        <table style="width: 100%;">
                            <tr>
                                <td><strong>Student Details</strong></td>
                            </tr>
                            <tr>
                                <td>Student FirstName</td>
                                <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Student LastName</td>
                                <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                                <td> </td>
                            </tr>
                        </table>
                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Student Course Details">
                        <table style="width: 100%;">
                            <tr>
                                <td><strong>Student Course Detail</strong></td>
                            </tr>
                            <tr>
                                <td>Student Course</td>
                                <td><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Student Branch</td>
                                <td><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
                            </tr>
                        </table>
                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep3" runat="server" Title="Student Personal Details">
                        <table style="width: 100%;">
                            <tr>
                                <td><strong>Student Personal Detail</strong></td>
                            </tr>
                            <tr>
                                <td>Student EmailId</td>
                                <td><asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Student City</td>
                                <td><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
                            </tr>
                            <tr>
                                <td>Student State</td>
                                <td><asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>
                            </tr>
                        </table>
                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep4" runat="server" Title="Student Summary">
                        <table class="auto-style1">
                            <tr>
                                <td><strong>Student Details</strong></td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td>Student FirstName:</td>
                                <td><asp:Label ID="Label1" runat="server" Text=""></asp:Label></td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td>Student LastName:</td>
                                <td><asp:Label ID="Label2" runat="server" Text=""></asp:Label></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td><strong>Student Course Details</strong></td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td>Student Course:</td>
                                <td><asp:Label ID="Label3" runat="server" Text=""></asp:Label></td>
                            </tr>
                            <tr>
                                <td>Student Branch:</td>
                                <td><asp:Label ID="Label4" runat="server" Text=""></asp:Label></td>
                            </tr>
                            <tr>
                                <td> </td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td><strong>Student Personal Details</strong></td>
                                <td> </td>
                            </tr>
                            <tr>
                                <td>Student EmailId:</td>
                                <td><asp:Label ID="Label5" runat="server" Text=""></asp:Label></td>
                            </tr>
                            <tr>
                                <td>Student City:</td>
                                <td><asp:Label ID="Label6" runat="server" Text=""></asp:Label></td>
                            </tr>
                            <tr>
                                <td>Student State:</td>
                                <td><asp:Label ID="Label7" runat="server" Text=""></asp:Label></td>
                            </tr>
                        </table>
                    </asp:WizardStep>
                </WizardSteps>
            </asp:Wizard>
        </div>
    </form>
</body>
</html>

CODE CHAMBER

Step 4. Here, let’s say after entering every detail, a student wants to view his/her whole information that is entered. For that, we are summarizing everything in the wizard NextButton click.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            refreshdata();
        }
    }
    private void refreshdata()
    {
        Label1.Text = TextBox1.Text;
        Label2.Text = TextBox2.Text;
        Label3.Text = TextBox3.Text;
        Label4.Text = TextBox4.Text;
        Label5.Text = TextBox5.Text;
        Label6.Text = TextBox6.Text;
        Label7.Text = TextBox7.Text;
    }
    protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
    {
        if (e.NextStepIndex == 3)
        {
            refreshdata();
        }
    }
}

NextstepIndex is the step-index where you want to show the details, like Student Details is index = 0, Student Course details is index = 1, and so on. Therefore, the student summary wizard comes in index = 3 that’s why we had taken NextstepIndex as = 3.

OUTPUT

Once the webpage loads, it will show you the wizard in Student Details. Fill the details and press Next.

After this, the wizard loads to the Student Course Details. Press Next and the control goes to the Student Personal Details.

Again, press Next.

At last, it will show you the whole Student Information at a glance. I haven’t added any code to the Finish button. You can add code to save these details in your database.

Student Details

Student Course Details

Course Details

Student Personal Details

Personal Details

Student Summary

Hope you like this. Thank you for reading!

4 Comments

Join the conversation! Your thoughts help the community grow.

Deepan8y ago
Useful information my friend
PAVAN PAUL9y ago
Sir i am in big confusion that how to use wizard control for displaying questions and I need to save the user selected option into the database and collect the correct answer store user database and to show how much questions he has attempted plz sir help me for this problem... Thanks in advance..
Upendra Pratap Shahi9y ago
Nice one Nilesh Jadav sir......... .....
- Nilesh Jadav9y ago
  Thank you Upendra Pratap Shahi, I appreciate for the follow up :)