Break Up an Extensive Web Form into Simulated Multiple Pages
page 1 of 2
Published: 18 Nov 2004
Unedited - Community Contributed
Abstract
We often need to collect extensive information from the user. Learn how the ASP.NET Panel control allows us to keep all form logic on a single page, while providing the user with the illusion of separate smaller pages.
by Steven Swafford
Feedback
Average Rating: 
Views (Total / Last 10 Days): 33499/ 88

Creating the Illusion of Multiple Pages

[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:

Panel #1

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.

Solution

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.
 


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-2017 ASPAlliance.com  |  Page Processed at 2017-03-23 2:23:20 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search