Using the Wizard Control to Create Forms in ASP.NET

The Wizard control is a tool that makes it easy to break up making web forms into easy steps. This tutorial will walk you through the steps of setting up a wizard control that allows you to quickly create forms.

Step 1

Open Visual Studio 2010 or (Or Visual Web Developer 2010 Express) and create a New Empty Website. Make sure the “Place Code in Separate File Box” is checked. Switch to Design View and in the Toolbox under the standard menu, click and drag an instance of the Wizard Control onto the page. In the Smart Tasks Menu of the wizard control select Add/Remove wizard steps.

In the Collection editor Click Add to add one additional Item to the list, and the rename the title of each item to “Your Name”, “Favorite Food”, and “Ready” respectively. See image below:

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!

Step 2

In the Collection Editor, change the Step Type of Favorite Food to Finish. Change the Step Type of Ready to Complete. Leave the Step Type of Your Name to its default which should be Auto. Click on the Your Name control in the wizard and make sure it is selected. From the Toolbox, click and drag a Label Control and then a TextField Control into the wizard on the page. Make sure you drag the controls into highlighted field in the upper right corner of the wizard, or the controls will not be in the right place.

Change the text property of the label to Your Name (e.g. “Brad Wilson”) and change the ID property of the TextField to “YourName”. Click on the Favorite Food control in the wizard on the page. In the toolbox under the standard menu, click and drag a DropDownList into the wizard. In the smart tasks menu of the DropDownList select Edit Items. When the collection editor opens, click Add three times to add three items to the list, then change the text and value properties of each list to “Pizza”,” Ice Cream”, and “Hot Dogs” respectively. See the image below:

Step 3

Switch to Source View. Inside the last WizardStep labeled “Ready”, drag a Label Control from the toolbox, and rename its ID property to Result. See the code example below:

Code Block

Ask a Question

Download Source

WizardControl.aspx

 <form id="form1" runat="server">
  <div>

      <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="1" Width="500px"
          onfinishbuttonclick="Wizard1_FinishButtonClick">
          <WizardSteps>
              <asp:WizardStep runat="server" title="Your Name">
                  <asp:Label ID="Label1" runat="server" Text="Type Your Name">asp:Label>
                  <asp:TextBox ID="YourName" runat="server">asp:TextBox>
              asp:WizardStep>
              <asp:WizardStep runat="server" StepType="Finish" title="Favorite Food">
                  <asp:DropDownList ID="FavoriteFood" runat="server">
                      <asp:ListItem>Pizzaasp:ListItem>
                      <asp:ListItem>Ice Creamasp:ListItem>
                      <asp:ListItem>Hot Dogsasp:ListItem>
                  asp:DropDownList>
              asp:WizardStep>
              <asp:WizardStep runat="server" StepType="Complete" Title="Ready">
                  <asp:Label ID="Result" runat="server" Text="Label">asp:Label>
              asp:WizardStep>
          WizardSteps>
      asp:Wizard>

  div>
  form>
           

Step 4

Double click the Wizard Control on the page. This will take you to the code behind for that control. Copy and paste the following code into the click event.

Code Block

Ask a Question

Download Source

WizardControl.aspx.cs

        Result.Text = "Your name is " + YourName.Text;
      Result.Text += "
Your favorite food is " +
          FavoriteFood.SelectedValue;
  
           

The entire code behind should now look like this:

Code Block

Ask a Question

Download Source

WizardControl.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WizardControl : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {

  }
  protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
  {
      Result.Text = "Your name is " + YourName.Text;
      Result.Text += "
Your favorite food is " +
          FavoriteFood.SelectedValue;
  }
}
           

Save your work then Run or Debug the application.

Type you name in the text field. Select your favorite food type then press the finish button when you are done. The selections you made should now be displayed.

And your all done. Easy right? Join us next time for additional DB tutorials!

We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.