ASP vs ASP.NET: Multi-Section Forms

Introduction

Forms are very commonly used on the web, to collect all sorts of information from the surfer. This can range from site logins to online magazine subscriptions to shopping carts like on amazon.com. Some of these forms can be pretty short, but others can be quite long, depending on the information being collected. Take Amazon’s shopping cart, for instance. When you are ready to make a purchase, you have to go through a number of steps to place an order: review your items, choose shipping method, provide shipping address, and choose a payment method. All those together would make a rather long form on the web page, and could be somewhat daunting to the user. But the process is split across several pages, into more manageable chunks. This is much more user-friendly.

Even if it’s not a long form, it can still make sense to split a single form across multiple pages. This can be if there are some different sections of the form collecting different, yet related sets of information. Each page can collect one set of information, then a final page can display all the selections for review (much like Amazon does).

In keeping with my series of ASP vs ASP.NET articles, this one will show how to implement multi-page forms in both ASP and ASP.NET. As mentioned in previous articles, this is not ASP 101; some familiarity of either (or both) of the platforms is assumed.

There are essentially two main ways to set up a multi-page form, as outlined below; the list also indicates general pros and cons of each method.

Multiple files: in this mode, one file is used to display a single section of the form. This has the benefit of being very specific to that one section, and it is easier to make additions or changes for the one section. Conversely, it means that for a long form, there could be numerous files involved. This can make changes a little more awkward if you are modifying the form process as a whole.
Single file: all markup/code for the whole form process is located in a single file. This does not involve multiple actual page files, but simulates the effect by only showing the content for a particular section, and not all sections at once. This avoids the issues with using multiple files as outlined above. It would also involve a (potentially) very long file to contain everything.

Doing it in ASP

Either of the two methods indicated above are viable in Classic ASP. The first method is shown in code below:

page1.asp

<HTML>
  <head>
    <title>Form Page 1</title>
  </head>
  <body>
    <form method="post" action="page2.asp">
      ...(content for current section)...
    </form>
  </body>
</html>

page2.asp

<HTML>
  <head>
    <title>Form Page 2</title>
  </head>
  <body>
    <form method="post" action="page3.asp">
      ...(content for current section)...
    </form>
  </body>
</html>

page3.asp

<HTML>
  <head>
    <title>Form Page 3</title>
  </head>
  <body>
    <form method="post" action="page4.asp">
      ...(content for current section)...
    </form>
  </body>
</html>

Hopefully you get the idea of the pattern forming above.

Following is the code for the second method; it is essentially the three files above combined into one, with additional logic to only show one section at a time.

page.asp

<HTML>
  <head>
    <title>Form</title>
  </head>
  <body>
    <form method="post" action="page.asp">
<%
If Request.Form("PageNumber") = "" Then 'Form has not yet been submitted; display section 1
%>
      <input type="hidden" name="PageNumber" value="1" />
      ...(content for current section)...
<%
ElseIf Request.Form("PageNumber") = "1" Then 'Displaying section 2
%>
      <input type="hidden" name="PageNumber" value="2" />
      ...(content for current section)...
<%
ElseIf Request.Form("PageNumber") = "2" Then 'Displaying section 3
%>
      <input type="hidden" name="PageNumber" value="3" />
      ...(content for current section)...
<%
End If 'End of checking for which section to display
%>
    </form>
  </body>
</html>

The above code first checks whether it is the first section of the form; if so, a hidden element with the number of the current section is added to the form. Following that, the content for the first section is added. The following checks are for subsequent sections of the form; in each, a hidden form field with the number of the current form section is added, followed by content for the current section.

Doing it in ASP.NET

Things are a little different when we get to ASP.NET. Primarily, the first possible method of setting up multi-page forms is not a very viable option. This is because of the way ASP.NET works with forms; in Classic ASP, you can easily choose whether to submit the form to another file, as shown in the first code section above, or submit to the same page, as in the second section. You can also choose whether to use the GET or POST form protocol. ASP.NET, however, for some reason, prefers to only post back to itself…This means that the first multi-page form option is out. We are limited to using a single page. This may be for the better, however, as using multiple files for a form defeats the usefulness of the ASP.NET Viewstate, which is very helpful. As another note, although it is not as critical, ASP.NET defaults to using the POST protocol, although you can explicitly specify to use GET.

ASP.NET 1.x

As stated above, the multi-file option is essentially out with ASP.NET. So that leaves the second method.

On the form, create multiple Panels, and for each section, add the content to a single panel. Then check for form submissions similar to the Classic ASP way, but simply make visible the appropriate panel. The panels would all be hidden by default, and they would be revealed one at a time.

page.aspx - form with the panels and controls

<asp:Panel id="Panel1" runat="server" visible="false">
  <input type="hidden" value="1" name="pageNum" />
  ...(markup/controls for current section)...
<asp:Panel>

<asp:Panel id="Panel2" runat="server" visible="false">
  <input type="hidden" value="2" name="pageNum" />
  ...(markup/controls for current section)...
<asp:Panel>

<asp:Panel id="Panel3" runat="server" visible="false">
  <input type="hidden" value="3" name="pageNum" />
  ...(markup/controls for current section)...
<asp:Panel>

page.aspx.vb - codebehind shows one panel at a time

Imports System.Web.UI.WebControls

'Controls
Protected WithEvents Panel 1 As Panel
Protected WithEvents Panel 2 As Panel
Protected WithEvents Panel 3 As Panel

Public Sub Page_Load(sender as Object, e As EventArgs)
  Dim CurrentPage as Integer

  If IsPostBack Then
    'Form contains prev. page number, so increment to get the current page number
    CurrentPage = Request.Form("pageNum") + 1
  Else
    CurrentPage = 1
  End If

  'Only make the current panel visible
  Select Case PageNumber
    Case 1
      Panel1.Visible = True
    Case 2
      Panel2.Visible = True
    Case 3
      Panel3.Visible = True
  End Select
End Sub

ASP.NET 2.0

ASP.NET 2.0 has an additional twist: there is a built-in server control called the Wizard. It essentially wraps up all the individual sections into one component, and handles the switching back and forth between them, so you don’t need to do it from scratch like in ASP.NET 1.x.

page.aspx - set a Wizard control and fill out the sections with content

<asp:Wizard ID="MultiPageWizard" runat="server">
   <WizardSteps>
      <asp:WizardStep runat="server" Title="Page 1" StepType="Start">
           ...(markup/controls for current section)...
      </asp:WizardStep>
      <asp:WizardStep runat="server" Title="Page 2" StepType="Step">
           ...(markup/controls for current section)...
      </asp:WizardStep>
      ...(more steps as desired)...
      <asp:WizardStep runat="server" Title="Page 3" StepType="Finish">
           ...(markup/controls for current section)...
      </asp:WizardStep>
   </WizardSteps>
</asp:Wizard>

page.aspx.vb

'Nothing needed here!

There’s some useful functionality here, and it’s a good thing to have built-in to ASP.NET 2.0. Just inserting the Wizard control, and adding sections with content, is all that is needed. Very convenient. There is more to using a Wizard (effectively) than shown here, but the code does show how useful it is.

If you are stuck with 1.0 or 1.1, you could use code similar to what I showed above, or you could even stuff that functionality into a web control, and just use the control much like you would use the wizard.

There’s some good extra reading on the Wizard control on 4 Guys from Rolla and MSDN Magazine.

Conclusion

It is obvious that the technique used in creating multi-page forms has evolved from one version of ASP (Classic or .NET) to another. The overall principle is the same, it’s just the exact implementation that varies. Hmm, that makes me wonder if ASP.NET 3.0 will bring any new functionality to simplify this process any further…

The Wizard control in ASP.NET 2.0 does, however, greatly simplify this process by automating the switching of pages for you. So all you need to do is add sections with content to a Wizard control, and the control does the rest.

GrantPalin.com