[Download Sample Code]

1) Start Visual Studio 2005.

2) Click on the Create Website option in the main Start page of Visual Studio 2005.

3) In the Visual Studio installed templates section, select ASP.NET Web Site.  Set these options on the lower part of the screen:

   (a) Location: File System

   (b) Language: Visual C#

   (c) Desired folder name where your project should be saved

In this example, the project name is called FormWizard.

4) Upon clicking OK, a new website with a Default.aspx page is created for you. We will come to this page once I explain how to create a database from this screen.

5) By default, to the right of the IDE you will have the Solution Explorer, which will list all the file names used in the project.

You will have to set up a database connection using Server Explorer; it is located at the left side of the IDE above the ToolBox panel, or it can be accessed using the View | Server Explorer menu.

1) Click on the Server Explorer panel, right-click on Data Connections, and select the Add Connection option.

2) In the window that pops up, select the Microsoft SQL Server Database file option and create a new database file called FormWizard_db.mdf.  Set your login credentials as appropriate for your server; the default is Windows Authentication.

3) At this stage you can select the default settings, and the database will be created for you by Visual Studio.

4) You will notice the database in the Server Explorer once it is created.

5) Click on the database name to expose the nodes underneath.  Right-click on the Tables node and add a new table with these columns:

   id - varchar(10)
   Fname - varchar(10)
   Lname - varchar(10)
   Email - varchar(50)
   Tel - varchar(20)

Choose to Save Table and name this new table Table1.

6) Add a stored procedure called dbo.StoredProcedure1 by right-clicking on the Stored Procedures node on the Server Explorer.  The code for this stored procedure can be found in Listing 1.

Listing 1 - Stored Procedure dbo.StoredProcedure1

CREATE PROCEDURE dbo.StoredProcedure1

  @Fname varchar(10),

  @Lname varchar(10),

  @Email varchar(50),

  @Tel varchar(20)

AS

  INSERT INTO table1 (Fname, Lname, Email, Tel)

  VALUES (@Fname, @Lname, @Email, @Tel)

  RETURN

7) Create the connection string in the web.config file as shown in Listing 2.

Listing 2 - connectionStrings section of web.config

   <connectionStrings>
      <add name="dbConnectionString"
connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=C:\Inetpub\wwwroot\FormWizard\App_Data\FormWizard_db.mdf;Integrated
Security=True;Connect Timeout=30;User Instance=True"
providerName="System.Data.SqlClient"/>
   </connectionStrings>

Note: You should modify the path of the database file accordingly.

1) Drag and drop the "Wizard" control from the toolbox onto the default.aspx web form.

2) Add additional text boxes to the Wizard as shown in the code for the wizard control below in Listing 3. Looking at the code you will find that two textboxes have been added in Step 1, and two in Step 2.  The last wizard step is left blank.

Listing 3 - Default.aspx Code for the Wizard control

<asp:Wizard ID="Wizard1"
runat="server" ActiveStepIndex="2" OnFinishButtonClick =
"Wizard1_FinishButtonClick">
  <WizardSteps>
    <asp:WizardStep ID="WizardStep1"
runat="server" Title="Step 1">
      First Name<asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
      Last Name<asp:TextBox
ID="TextBox2" runat="server"></asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep2"
runat="server" Title="Step 2">
      Email<asp:TextBox ID="TextBox3"
runat="server"></asp:TextBox>
      Tel<asp:TextBox ID="TextBox4"
runat="server"></asp:TextBox>
    </asp:WizardStep>
    <asp:WizardStep ID="WizardStep3"
runat="server" StepType="Finish"
Title="Overview">
    </asp:WizardStep>
  </WizardSteps>
</asp:Wizard>

3) When the user clicks Finish in the last Overview step, we capture that click by setting a value for the OnFinishButtonClick event.  The code in Wizard1_FinishButtonClick will be called to handle the event.  In the corresponding code behind seen in Listing 4, the insertDataIntoDB function is called and it executes the stored procedure, which saves the data into Table1.

Listing 4 - Default.aspx.cs

protected void Page_Load(object sender, EventArgs
e)
  {
 
  }
 
public void insertDataIntoDB(string fname,
string lname, string email, string tel)
  {
    string conn =
System.Configuration.ConfigurationManager.ConnectionStrings["dbConnectionString"].ConnectionString;
    System.Data.SqlClient.SqlConnection
myConnection = new System.Data.SqlClient.SqlConnection(conn);
    string MySQL = "StoredProcedure1";
    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("@Fname", fname));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Lname", lname));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Email", email));
    cmd.Parameters.Add(new
System.Data.SqlClient.SqlParameter("@Tel", tel));
 
    myConnection.Open();
    cmd.ExecuteNonQuery();
    myConnection.Close();
  }
 
protected void Wizard1_FinishButtonClick(object
sender, WizardNavigationEventArgs e)
  {
    insertDataIntoDB(TextBox1.Text.ToString().Trim(),
TextBox2.Text.ToString().Trim(), TextBox3.Text.ToString().Trim(),
TextBox4.Text.ToString().Trim());
  }

4) As a last step to make the form beautiful, right-click the Wizard control in the design mode of the Visual Studio 2005 IDE, choose AutoFormat, and select your favorite design.

5) Run the application.

6) Once you come to the final step and click Finish, the form information will be saved in Table1.

Figure 1

Figure 2

Figure 3

In this article, I've examined the usage of the Wizard control with the help of code samples and screenshots.  Wizard controls are used in places where you have a huge form in your website which you would expect your users to fill out.  This control provides a step-by-step interface to fill out a form in smaller pieces.