MultiView and Wizard: A Powerful Duo

ASP.NET 2.0 introduces two new related controls to create a group of interchangeable panels of child controls. The MultiView control defines a group of views, each represented with an instance of the View class. Only one view is active at a time and rendered to the client. The View control can’t be used as a standalone component and can only be placed inside a MultiView control. Here’s an example.

<asp:MultiView runat="server" id="Tables">
   <asp:View runat="server" id="Employees">
       :
   </asp:View>
   <asp:View runat="server" id="Products">
       :
   </asp:View>
   <asp:View runat="server" id="Customers">
       :
   </asp:View>
</asp:MultiView>

You change the active view through postback events when the user clicks button or links embedded in the current view. To indicate the new view, you can either set the ActiveViewIndex property on the MultiView control or pass the view object to the SetActiveView method. For example, imagine a page that contains a drop-down list control named Views:

<asp:DropDownList Runat="server" ID="Views" AutoPostBack="true">
   <asp:ListItem Value="Employees" /> 
   <asp:ListItem Value="Products" /> 
   <asp:ListItem Value="Customers" /> 
</asp:DropDownList>

The drop-down list posts back whenever the user changes the selected item. During the Page_Load event, you select the view to display:

void Page_Load(object sender, EventArgs e)
{
   // Views is an auto-postback drop-down list   
   Tables.ActiveViewIndex = Views.SelectedIndex;
}

The combination of View and MultiView controls lends itself very well to implementing wizards. In fact, the new ASP.NET Wizard control uses a MultiView control internally.

The Wizard control is a composite control that uses the MultiView control internally to display and hide the panels that form the steps of the wizard. Here’s an example of the wizard:

<asp:wizard runat="server" id="BookWizard"
    style="border:solid 1px" width="300" height="100"
    onfinishbuttonclick="Finished">
<WizardSteps>
    <asp:WizardStep steptype="Start">
         <h3>Thanks for shopping with us.
         Please, proceed with payment!</h3>
    </asp:WizardStep>
    <asp:WizardStep steptype="Step">
         <h3>Enter your credit card number:</h3>
         <asp:textbox runat="server" id="CreditCard" text="" />
    </asp:WizardStep>
   <asp:WizardStep steptype="Finish">
        <h3>You're all set. Click and your credit card
        will be charged. Thank you!</h3>
    </asp:WizardStep>
    <asp:WizardStep steptype="Complete">
        <asp:label runat="server" id="FinalMsg" />    
    </asp:WizardStep>
</WizardSteps>
</asp:wizard>

The control provides navigation buttons and fires server-side events whenever the user clicks to change the page. The navigation can be both linear and nonlinear meaning that you can jump from one page to the next as well as randomly to any listed page. When the Finish button is clicked, you typically collect all the data and proceed with the final step. Because all the controls are part of the page, you can access them codewise using their ID. The following code represents the final step of the wizard that finalizes the whole operation:

void Finished(object sender, EventArgs e)
{
    // Perform the operation
    :
 
    // Give feedback
    string msg = "Credit card <b>[{0}]</b> charged successfully.";
    FinalMsg.Text = String.Format(msg, CreditCard.Text);
}

Wizard and MultiView controls together make implementing multistep operations a snap in ASP.NET 2.0.

Dino Esposito is Wintellect's ADO.NET and XML expert, and a trainer and consultant based in Rome, Italy. Dino is a contributing editor to Windows Developer Network and MSDN Magazine, and the author of several books for Microsoft Press including Building Web Solutions with ASP.NET and ADO.NET and Applied XML Programming for .NET. Contact Dino at [email protected].