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.
Open your Visual Studio 2010 and create an Empty website. Give it a suitable name [wizard_demo].
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.
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.
In 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)
- 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)
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.
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 Course Details
Student Personal Details
Hope you like this. Thank you for reading!