Using the panel control to simulate multipage documents

Introduction:

The <asp:panel> control is one of the most interesting controls in the Dot Net framework. Unlike the datagrid and datalist controls which produce HTML tables, the panel control produces a <div>. On the surface, this doesn't seem terribly useful. What makes the panel so powerful is its Visible property. The Visible property accepts one of two values, either true or false. If Visible is set to True, then the panel and consequently any content within the panel will be displayed. If the Visible property is set to false, then the panel does not appear and neither does the content it contains. By placing portions of a long single page document into different panels and then toggling the visibility of the panels, it is possible to simulate a multipage document using just the single page.

Create a new page:

The first step is to create a new ASP.NET/VB.NET page using your chosen program. Make sure that the page is saved with an .aspx extension. At the top of the page, above any HTML elements, add the following line <%@ Page Language="VB" %>. This code is the page language directive. Next, a server-side form need to added to the the page if it is not already present. This form is one with the runat attribute set to "server". Your page should be similiar to the following:

 

Adding the panels:

The page will give the appearance of a 3 page document so three panels will therefore have to be added the page. Each panel's ID attribute will need to have unique values since the subroutines will be referencing the IDs. Add the following code to the ASP.NET page:

Make sure that the panels are betwen the <form> tags. Your page should now look like this:

Different content can be placed into the 3 panels. The content can be anything including images, text, or both.

Writing the subroutines:

The visibility of the panels will be controlled using subroutines written in VB.NET. These subroutines are executed by the server in response to specific events. The first panel represents Page 1 and should be visible when the page loads. The remaining 2 panels will become visible when a user navigates to those "pages" using links. The subroutines that control the visibility of the last 2 panels will be triggered by the <asp:linkbutton> control. This control generates a HTML link when rendered except that it can trigger a subroutine with its onclick event handler. Add the following code to the page. Place the code just below the closing <title> tag.

This code provides the neccessary logic to control the visibility of the panels. The <script> tags with the runat attritbute set to "server" tell the Dot Net framework that the subroutines need to be exceuted by the server and not the client. The first subroutine fires when the page loads and displays Panel 1 but hides Panels 2 and 3. The remaining subroutines will be triggered when the user clicks one of the links generated the <asp:linkbutton> control. The Page1Visible subroutine is fired from the Page 1 link. The Page2Visible and Page3Visible subroutines will be triggered once the user clicks on the Page 2 and Page 3 links.

Adding the navigation links:

The final step is to add the <asp:linkbutton> controls. Add the following code to your page. Make sure that the code is placed within the <form> tags. Otherwise when you attempt to preview the page an error will occur.

Your page should now look like the following: