Adding MultiPage Controls to a Web Forms Page

asp.net.ph

Controls You Can Use on Web Forms ASP.NET IE WebControls MultiPage WebControl

Essentially, to create a working MultiPage control, you need to add the control to the page, specify the set of PageView elements the control will contain, and add some code for navigating thru the different pages.

The below procedures show the minimum steps needed to display a MultiPage control.

At the top of the Web Form, before any document structure markup, add the @ Import directive, which should look like the following:
```
<%@ Import namespace="Microsoft.Web.UI.WebControls" %>
```
NOTE: In this example, the @ Import directive is optional. This directive is only required when writing Web Forms that use server-side script to create or modify WebControls objects.

On the next line, add the @ Register directive.

<%@ Register tagprefix="ie" namespace="Microsoft.Web.UI.WebControls" 
assembly="Microsoft.Web.UI.WebControls" %>

On the <body> section of the document structure, declare the <ie:multipage> element and optionally set the control’s base properties.
NOTE: All WebControls elements must be authored within a <form runat="server"></form> element.

At this point, the Web Form’s markup should have something similar to the following.
```
<body>
   <form runat="server">
      <ie:multipage id="multipage1" runat="server">

         ... individual pageviews markup goes here ...

      </ie:multipage>
   </form>
</body>
```
Add PageView elements as child elements of the MultiPage element.
PageView elements can be authored declaratively at design time or generated dynamically at run time. For this example, we use statically defined PageView elements. At this point, the Web Form’s markup should have something similar to the following.
```
<ie:multipage id="multipage1" runat="server">

   <ie:pageview id="page1">

      ... page1 content goes here ...

   </ie:pageview>

   <ie:pageview id="page2">

      ... page2 content goes here ...

   </ie:pageview>

</ie:multipage>
```
Next, add the interface to enable the user to navigate to the different pages.
You can use any of the ASP.NET button controls for this purpose. In this example, we use <asp:imagebutton> controls, specifically, image buttons within a DataList control.
```
<itemtemplate>
   <asp:imagebutton id="imgThumb" runat="server" 
      style="border: 1px inset" width=75 />
</itemtemplate>
```
Lastly, add code to handle the navigation. This can be done in several ways, depending on the application.
Basically in this example, when any image in the DataList on the thumbnails page is clicked, the handler simply invokes the Activate method of the PageView object, showing the zoom page. Vice-versa, clicking on the image in the zoom page activates the thumbnails page.
```
void showPageZoom ( object src, DataListCommandEventArgs e ) {
   ... some code omitted for clarity ...
   pageZoom.Activate ( );
}

void showPageThumbs ( object src, EventArgs e ) {
   pageThumbs.Activate ( );
}
```

MultiPage Navigation Using PageView.Activate

Run Sample | View Source

The links to the sections below illustrate further ways of implementing navigation within a MultiPage control.

Nesting MultiPage Controls Using MultiPage Controls in a Templated Control

Friday, January 10, 2025

Adding MultiPage Controls to a Web Forms Page

To add a MultiPage control to a Web Forms page

See Also