Create Multistep Forms

Build a multistep form using ASP.NET Panel controls and ViewState.

A Day in the Life of a Developer

 

LANGUAGES: C#

TECHNOLOGIES: Panel Controls | ViewState

 

Create Multistep Forms

Build a multistep form using ASP.NET Panel controls and ViewState.

 

By Doug Seven

 

Recently I was asked to develop a multistep submittal process. One of the requirements was that none of the data submitted was to be added to the database until all the steps had been completed. In classic ASP I would have done this by passing around submitted values either in hidden form fields or in the query string. In ASP.NET, however, I was able to build a multistep form using ASP.NET Panel controls and ViewState.

 

The Panel control allows you to group other controls together and affect them as a group. In this case, I was able to use the Panel control to group other controls into steps (see Figure 1). For example, I grouped name and e-mail information in one step, address information in step two, and success information in step three. Grouping the controls enables you to hide and show them as a group, and it even enables and disables validation controls in the groups.

 


Figure 1. Here in the Visual Studio .NET Web Form designer, the controls have been grouped using three panel controls.

 

When the form is loaded, you set the StepTwo and StepThree Panel controls visibility to false, thereby hiding all but the controls in the Step One panel. You will notice in Figure 1 that Step Two contains a validation control. When the panel control containing a validation control is hidden - by setting the visibility to false - the validation control is disabled.

 

As the Web Form moves through the steps (see Figure 2), the controls within the steps are hidden. Even though the controls are hidden, their values are maintained in ViewState. When the Web Form gets to the final step, you can access the controls in the previous steps and retrieve their values as though they had been shown on the form - even though they were hidden.

 

private void Page_Load(object sender, System.EventArgs e)

{

   if ( !Page.IsPostBack )

   {

      //Set the initial state of the controls

      pnlStepOne.Visible = true;

      pnlStepTwo.Visible = false;

      pnlStepThree.Visible = false;

   }

}

 

private void btnStepOne_Click

  (object sender, System.EventArgs e)

{

   //Hide Step One Panel

   pnlStepOne.Visible = false;

   //Show Step Two Panel

   pnlStepTwo.Visible = true;

}

 

private void Button2_Click

  (object sender, System.EventArgs e)

{

   //Hide Step Two Panel

   pnlStepTwo.Visible = false;

   //Show Success Panel

   pnlStepThree.Visible = true;

 

   //Use a StringBuilder to gather all the inputs

   System.Text.StringBuilder sb =

    new System.Text.StringBuilder();

   sb.Append(txtName.Text);

   sb.Append("
");

   sb.Append(txtStreet.Text);

   sb.Append("
");

   sb.Append(txtCity.Text);

   sb.Append(", ");

   sb.Append(txtState.Text);

   sb.Append(" ");

   sb.Append(txtZipcode.Text);

   sb.Append("
");

   sb.Append(txtEmail.Text);

 

   //Show the results

   lblSuccess.Text = sb.ToString();

}

Figure 2. This is the code for navigating the Web Form through the data collection steps.

 

The project referenced in this article is available for download.

 

As a co-founder of DotNetJunkies, a content-based online training resource for .NET developers, Doug Seven has been building applications with the .NET Framework since summer 2000. Seven has co-authored five books related to the .NET Framework: Programming Data-Driven Web Applications with ASP.NET (Sams), ASP.NET: Tips, Tutorials & Code (Sams), Professional ADO.NET (Wrox), Developing Custom Controls for ASP.NET (Sams), and ASP.NET Security (Wrox). Seven's professional .NET consulting clients include Microsoft, the Massachusetts Institute of Technology (MIT), and Tricordia LLC, and the work he has been involved in includes C#, Visual Basic .NET, Web applications, mobile device applications, XML Web Services, Windows Forms development, and console and service applications. E-mail Doug at mailto:[email protected].

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish