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("<br/>");
sb.Append(txtStreet.Text);
sb.Append("<br/>");
sb.Append(txtCity.Text);
sb.Append(", ");
sb.Append(txtState.Text);
sb.Append(" ");
sb.Append(txtZipcode.Text);
sb.Append("<br/>");
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:doug.seven@dotnetjunkies.com.