ASP.NET

MultiView

From time to time, it's useful to gather controls together in several panes and give the user the opportunity to page through the panes. During the lifetime of ASP.NET 1.0, Microsoft released several rich dynamic (though officially unsupported) controls that emitted DHTML instead of regular HTML. A trio of these controls, the TabStrip, the MultiView (an older version), and the PageView, worked together to form essentially a set of tabbed panes.

These controls aren't available in ASP.NET 2.0; however, two controls-the MultiView and the View-go a long way toward providing similar functionality. The MultiView acts as a container for Panel-like controls (View controls). The MultiView includes support for paging through the various Views held within it. The MultiView shows a single View at a time.

The following exercise provides an example that shows how the MultiView and the View controls work together.

Using the MultiView and View controls

  1. Add a new Web form to the ControlPotpourri site. Name it UseMultiview. You'll add a MultiView to this form and then add some Views to it.

  2. Add a MultiView to this Web form.

  3. The main purpose of the MultiView is to manage a set of Views. To add a View to a MultiView, pick it up and drop it inside the MultiView. Add three Views to the Web form like so:

    Graphic
  4. Add some content to each of the Views. You can think of the Views very much like panes. In this example, the first view includes a TextBox and a button. The second view includes a DropDownList, and a PalindromeCheckerCompositeControl from Tutorial 5. The following graphic illustrates how the Views look in the designer.

    Graphic
  5. To cause the MultiView and the first View to show up, set the ActiveViewIndex property to 0 to show the first pane.

  6. Add some controls to navigate between the Views in the MultiView. Add two buttons to the bottom of the form. Call them Previous and Next-they'll be used to page through the Views.

  7. Add event handlers for the buttons by double-clicking on each of them.

  8. Add code to the page through the Views. This code responds to the button clicks by changing the index of the current View.

    protected void ButtonPrev_Click(object sender, EventArgs e)
    {
       if (MultiView1.ActiveViewIndex == 0)
       {
          MultiView1.ActiveViewIndex = 2;
       }
       else
       {
          MultiView1.ActiveViewIndex -= 1;
       }
    }
    protected void ButtonNext_Click(object sender, EventArgs e)
    {
       if (MultiView1.ActiveViewIndex == 2)
       {
          MultiView1.ActiveViewIndex = 0;
       }
       else
       {
          MultiView1.ActiveViewIndex += 1;
       }
    }
    
  9. Compile the project and browse to the Web page. Pressing the navigator buttons will cause post-backs to the server, which will render the individual views. The following graphic shows how the MultiView and View number 3 appear in a browser.

    Graphic

    As you can see, the MultiView and the View classes act as panes that you can swap in and out. They represent a great way to manage the surface area involved in collecting large amounts of data. We'll see another version of this kind of control when we look at the Wizard control in conjunction with the session state.