[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.
- Ensure you provide a GroupName for the radio buttons. In this case I used the name martialStatus.
- 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