[Download Code]

A common task in web applications is obtaining data from the user. Creating a single large form makes it easy for us to collect, validate and save this data. Yet that same large form may overwhelm the user.

How often have you found a site that perked your interest only to realize that you must complete a form that seems to scroll forever? I know that I have been in this position more times than I care to recall.

The ASP.NET Panel control allows us to construct a single page containing all the form elements required, while presenting the user with what appears to be separate smaller pages. This creates a much better user experience.

An additional benefit of this technique concerns validation. By using Panels to simulate multiple pages, we can keep validation summaries close to the source of any problems. This saves the user from otherwise having to scroll down a long form, looking for the reported error.

I assume in this article that you have basic knowledge of Microsoft Visual Studio .NET and the C# language. To begin, I will discuss the process of creating the web form.

Within your web project add a new web form. Once you have created a web form, drag and drop a Panel control onto the form from your toolbox. Now that you have your Panel ready, resize the Panel to your specifications, and then drag and drop any combination of form controls inside the Panel. In my case I added Label and Textbox controls to create the following:

You may wish to read the particulars of the Panel Class, Label Class, and TextBox Class.

Be sure to add a control that will allow for advancement to the second Panel. I have given my form a Continue button.

Repeat the process to add a second Panel and more form controls. The only difference is that the second Panel will not be visible when the page loads. Why? Simply setting the Panel’s Visible property to False will provide the illusion of multiple pages that I earlier spoke of.

In Visual Studio’s Design View you may set a Panel’s Visible property to False via the Properties Window. In the IDE’s HTML View you may do the same by adding Visible="False" to the Panel’s declarative syntax. By setting the second Panel's Visible property to False, only the first Panel will initially be visible to the user.

Now that you are familiar with the usage of Panels, we will look at displaying one Panel while hiding the other.

Back on Panel #1 we added a Continue button. Within your IDE, double-click this button and you will be taken to the code-behind for the web form. If you pay attention you will see that by double-clicking the button an empty method was created for you. Update the method with the following code:

private void Button1_Click(object sender, System.EventArgs e)
{
    // Add the following for Panel
    // visibility attributes


    //Hide Panel #1
    Panel1.Visible = false;


    // Show Panel #2
    Panel2.Visible = true;
}

The method name Button1_Click is derived from the ID of the button. If I had given the button an ID of btnContinue, the method name would have been btnContinue_Click.

If you prefer to write out the method yourself rather than double-clicking the button, you can get to the code-behind by simply opening the .cs file in your IDE. If you do not see the .cs file then click the Solution Explorer’s Show All Files button.

I have discussed above how to provide the illusion of multiple pages by adding form elements to separate Panel controls, and controlling the visibility of the Panels. It is now time to discuss extended data collection.
 

[Download Code]

By using Panels you can choose whether to display or hide controls for extended data collection. Say for example on Panel #2 we want to know whether the user is married, and if married we want to collect data on the spouse.

In this case, I have dragged and dropped another Panel, referred to as Panel #3, into Panel #2. This newly established panel is where I will place those elements pertinent to the spouse. However I do not want Panel #3 to be visible initially. We now set the new Panel’s Visible property to False, just as we did earlier with Panel #2. When a user indicates that they are married, Panel #3 becomes visible so that they may provide the appropriate data.

The user should initially see the following upon advancing to Panel #2:

The user indicates their marital status by the use of a RadioButton. If you have not yet used this control, please take the time to read the particulars of the RadioButton Class.

There are two key factors associated with using radio buttons in this manner.

1. Ensure you provide a GroupName for the radio buttons. In this case I used the name martialStatus.
2. You must set AutoPostBack to True for both radio buttons.

Using a GroupName for the radio buttons allows the user to select only one of the two options. Setting AutoPostBack to True instructs the page to post back to the server, so that Panel #3 can be either displayed or hidden based on the user’s selection of marital status.

Double-click each radio button to create the associated methods, just as we did earlier with the Continue button’s Click event.

private void RadioButton1_CheckedChanged(object sender, System.EventArgs e)
{
    Panel3.Visible = true;
}


private void RadioButton2_CheckedChanged(object sender, System.EventArgs e)
{
    Panel3.Visible = false;
}

If all went well the user should see the following upon clicking the Married radio button:

This article has demonstrated how we can use Panel controls to create the illusion of multiple pages, and to provide for extended data collection. By breaking up an extensive form in this way, we provide a cleaner user interface and a superior user experience.

Be sure to check out these other great resources that will assist with data validation and database interaction.

ASP.NET & Databases Part 1
Validation in ASP.NET