Break Up an Extensive Web Form into Simulated Multiple Pages
page 2 of 2
by Steven Swafford
Feedback
Average Rating: 
Views (Total / Last 10 Days): 18987/ 72

Providing for 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

 


View Entire Article

User Comments

Title: wizard   
Name: kanaiya
Date: 2005-01-10 5:24:35 PM
Comment:
In .NET 2005, we can take benefit of Wizard pages to deal with this problem.

Using panels in .net 2003 is a very good option.

Thanks,
Kanaiya
Title: Alternative   
Name: Steve Witter
Date: 2005-01-06 4:17:02 PM
Comment:
There is also the tab and multi view controls from microsoft, which will be included in asp.net 2.0. I highly prefer these to the panel because there can be little to no code and it doesn't have to do a postback unless you need it to.
Title: Addressing client side issues   
Name: Tom Blanchard
Date: 2005-01-06 2:56:01 PM
Comment:
To address Fritz's first issue:

You can get the panel to scroll by adding the following:
Panel3.Style.Add("overflow","scroll");

To address issue numbers 2 and 3:

The client side issue can be solve by the following as a replacement for setting the panel visiblity to false.
Which also solves the problem of spacing issues you won't see the form bounce like it does when setting the visibility properties.

replace:
Panel3.Visible = true;
with:
Panel3.Style.Add("display","inline");
and replace:
Panel3.Visible = false;
with:
Panel3.Style.Add("display","none");
etc....
This will allow you access to your controls from JavaScript.

Hope this information helps someone.
Title: Mr   
Name: Piyush Varma
Date: 2005-01-03 7:37:28 PM
Comment:
This is a simple but very effective UI metaphore. I will use it in my upcoming .Net project.
Title: You can show and hide table elements as well   
Name: Steve Contos
Date: 2005-01-03 9:55:32 AM
Comment:
I have accomplished a simmilar task by using a html table which runs at the server. Then in code I show the appropriate rows with the visibility property.

Ex. In HTML -
TABLE id="tblShow" cellSpacing="1" cellPadding="1"
width="100%" border="0" runat="server"
TR
td
/td
/TR
TR
td
/td
TR
/table

And in code behind -
tblShow.Rows(0).Visible = False
tblShow.Rows(1).Visible = True
Title: Great Article   
Name: Justin
Date: 2005-01-03 9:46:50 AM
Comment:
A panel in this scenario is great. Yes it may not fit everyone's requirements but the Panel object can be very useful under various circumstances and I have personally used it many times.
Title: ASP.NET 2.0 Wizard Control   
Name: Billy Porter
Date: 2005-01-03 8:39:44 AM
Comment:
In ASP.NET 2.0, The Wizard constrol offers a much more flexible way of doing the exact same thing.
Title: Use of panel to break up pages problems   
Name: Fritz Schenk
Date: 2004-11-19 5:12:30 PM
Comment:
(my Url is internal) - Problems with panel:
1. Panel is not a scrollable object. Make it difficult to handle large panels.
2. All the data from all panels need to traverse to client to do client-side validation.
3. Seting of focus to appropriate panel upon validation erros is difficult without a proper field to panel map (actually the DOM will give that to me - but this is pretty much unstrasportable since MS chose not to follow the standards on the DOM).
4. Going from Panel to Panel should be a client side thing not a server-side thing.
Thanks






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-10-06 8:53:25 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search