Create Multistep Forms

A Day in the Life of aDeveloper

LANGUAGES: C#

TECHNOLOGIES: Panel Controls | ViewState

Create Multistep Forms

Build a multistep form using ASP.NET Panel controls andViewState.

By Doug Seven

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

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

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

When the form is loaded, you set the StepTwo and StepThreePanel controls visibility to false, thereby hiding all but the controls in theStep One panel. You will notice in Figure 1 that Step Two contains a validationcontrol. When the panel control containing a validation control is hidden - bysetting 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 finalstep, you can access the controls in the previous steps and retrieve theirvalues as though they had been shown on the form - even though they werehidden.

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

{

   if ( !Page.IsPostBack )

   {

      //Set the initialstate 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 StringBuilderto gather all the inputs

   System.Text.StringBuilder sb =

    newSystem.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 thedata collection steps.

The project referenced inthis article is available for download.

As a co-founder of DotNetJunkies, a content-based onlinetraining resource for .NET developers, DougSeven has been building applications with the .NET Framework since summer2000. 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'sprofessional .NET consulting clients include Microsoft, the MassachusettsInstitute of Technology (MIT), and Tricordia LLC, and the work he has beeninvolved in includes C#, Visual Basic .NET, Web applications, mobile deviceapplications, XML Web Services, Windows Forms development, and console andservice applications. E-mail Doug at mailto:[email protected].