Basic Usage of MultiView and View Controls in ASP.NET

Introduction

The client application can only interact with one of the View controls at any one time. This should remind the reader of only one browser window being active at any time, or any one form active at a time in VB 6 applications. All the controls in all the views are on the same web page and easy to access. Each time the page postbacks, one view will be displayed and the validators within that view are the only ones active. Hence the View State changes can be easily accounted for regardless of how many postbacks were made.

About this tutorial

The main objective of this tutorial is to introduce these controls by way of some simple web pages containing these controls. The tutorial also discusses the properties and methods of these controls using the information from the Object Browser.

The next paragraph shows the object hierarchy of the MultiView control and its relation to the System.Object. Most of the properties and methods are inherited from System.Web.UI.Controls, though there are some properties and methods intrinsic to these controls.

System.Object 
System.Web.UI.Control 
System.Web.UI.WebControls.MultiView

Creating a web page with MultiView and View controls

Create a web site project from file -->New Website... This opens up the New Web Site window from which you choose the ASP.NET Web Site from Visual Studio installed templates. A web site called PageLife was created for this tutorial. The MultiView and View controls are available in the toolbox as shown.

Adding MultiView and View Controls

To the default page add a MultiView control from the ToolBox. This adds a MultiView control visible in the design view, and a corresponding control tag to the source code in the form as shown.

<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server">
</asp:MultiView>
</div>
</form>

Currently there is no View control in the MultiView Control. Now with the cursor placed inside the MultiView, double click a View Control in the Toolbox. This adds the View1 control to the default page inside the MultiView Control as shown.

Since the MultiView control is a container for the View control, the source view content changes to reflect this addition as shown. The MultiView and View controls provide design time support, which means going from source to design is completely reversible.

<form id="form1" runat="server">
<div> <asp:MultiView ID="MultiView1" runat="server"> 

<asp:View ID="View1" runat="server"> 

<!-- controls that go in View 1 here--> </asp:View> </asp:MultiView> </div>
</form>

Design time properties of View Control

While the ID and runat attributes are added by default, you could access other properties and invoke events of the View control as shown in the next picture.

The run time properties and methods of View1 can be accessed from the code page as shown. It may be noticed that there is no style property for a view. The controls' style, or style applied from skins, may be used.

In the following design view of the web page, you may use one of several ways to make View1 display when the page is browsed.

You may use the Form_Load() event to make View1 display using either of the following statements. The one that is commented out displays the required View as an argument, whereas the other uses the ActiveViewIndex property, which refers to the 0 based index property of collection of the Views in the MultiView container.

 Protected Sub form1_Load(ByVal sender As Object, ByVal e As _ 
System.EventArgs) Handles form1.Load 'MultiView1.SetActiveView(View1)

 MultiView1.ActiveViewIndex = 0
End Sub

It is also possible and sometimes important to script this action in the script together with the source code by adding the following to the source code between the <head/> <script/> sections. In this code the .vb page is devoid of any code.

<script type="text/vbscript" runat="server"> Protected Overloads Sub 

form1_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles form1.Load
MultiView1.SetActiveView(View1)
'MultiView1.ActiveViewIndex = 0
End Sub </script> 

Yet another way of making View1 visible is to declaratively make it display in the attribute tag of the MultiView Control, as shown in a later example.

Container Properties of View and MultiView Controls

Just as you can access the properties of controls in forms in Visual Basic, or controls in the <form/> of a web page, you can access the controls placed in the View control and the Views placed in the MultiView control programmatically. This is done as shown in the next snippet for the design view shown here.

Protected Sub MultiView1_Load(ByVal sender As Object, ByVal e _
As System.EventArgs) Handles MultiView1.Load
'This displays the view
MultiView1.SetActiveView(View1)
Response.Write("Number of View Controls in this MultiView : " & _
MultiView1.Controls.Count & "<br>")
Response.Write("Number of controls in the View control" & _
"whose index is 0 : " & _
MultiView1.Controls(0).Controls.Count & "<br>")
Response.Write("Type of Control in View1 with index 0 : " & _
MultiView1.Controls(0).Controls(0).GetType.ToString & "<br>")
Response.Write("Type of Control in View1 with index 1 : " & _
MultiView1.Controls(0).Controls(1).GetType.ToString & "<br>")
Response.Write("Type of Control in View1 with index 2 : " & _
MultiView1.Controls(0).Controls(2).GetType.ToString & "<br>")
Response.Write("Type of Control in View1 with index 3 : " & _
MultiView1.Controls(0).Controls(3).GetType.ToString & "<br>")
Response.Write("Type of Control in View1 with index 4 : " & _
MultiView1.Controls(0).Controls(4).GetType.ToString & "<br>")
Response.Write("Type of Control in View1 with index 5 : " & _
MultiView1.Controls(0).Controls(5).GetType.ToString & "<br>")
End Sub 

The displayed output of this web page is shown in the next picture. Although there are three controls in View1, there are six controls in the display, with three extra Literal controls. The page has two View controls. The controls and the Views can access their containers using the parent property.

Once you access the control you may control its properties using the code support given by intellisense as shown.

Presenting a user preferred View

One of the advantages of using the MultiView/View pair of controls is the ability to present a view based on user preference without going to another page. The next picture shows a web page with a MultiView Control containing two View controls. Depending on the choice made by the user, one or the other view will be presented to the user. The web page Choices.aspx shown next has two views, one showing an animal, and the other showing a flower.

The radio button group with the GroupName Test offers the user an opportunity to make a choice. The user makes a choice and clicks the What do you want to see? button. The code shown here displays the View based on user choice.

 Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
If RadioButton1.Checked Then
'MultiView1.ActiveViewIndex = 0
MultiView1.SetActiveView(View1)
End If
If RadioButton2.Checked Then
MultiView1.SetActiveView(View2)
'MultiView1.ActiveViewIndex = 1
End If
End Sub

Only after clicking the button is one or the other view displayed, otherwise you will see the controls on the page, but not the controls on the views. The next picture shows the display when View1 is chosen.

Moving from View to View from within the MultiView Control

When there are a number of views it is possible to move from one view to another within the views using the properties, methods and events raised of the View Control or controls in the views. The next design shows a web page with two views.

View1 is displayed because the ActiveViewIndex is set to 0 in the MultiView control. When the "Go to View 2(Button2)" is clicked, the view displayed changes from View1 to View2 following the code shown in the next paragraph. In View 2, when the 'Greet' button is clicked the greeting's text is displayed in the textbox shown in View2.

Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
TextBox1.Text = "Welcome to View2"
End Sub
Protected Sub Button2_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button2.Click
MultiView1.ActiveViewIndex = 1
End Sub

Properties and methods of the MultiView Control

Intellisense support provides support for coding as shown, revealing the available properties and methods of the MultiView Control. However, declarative syntax can also be used. The next picture shows how you may access the properties and methods from the code page. The paragraph that follows the declarative syntax of the MultiView control is copied from Microsoft's documentation.

<asp:MultiView
ActiveViewIndex="integer"
EnableTheming="True|False"
EnableViewState="True|False"
ID="string"
OnActiveViewChanged="ActiveViewChanged event handler"
OnDataBinding="DataBinding event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnUnload="Unload event handler"
runat="server"
SkinID="string"
Visible="True|False"/>

Summary

MultiVew and View controls add functionality to web pages similar to the wizard control discussed in a previous tutorial. Only some of the very basic features are discussed; some of the properties, such as the CommndName property which can automatically switch from one view to the next without writing any code, are not discussed.

While placing controls on the Views some of the functionality needed for placement, such as alignment and spacing of controls from the menu item Format, are not available, but can be set using the property pages for the controls. The functionality provided by these controls may be used for taking surveys, presenting user defined and user based views.

It is possible sometimes that even when the View is added it does not show up in the drop-down in the .vb page. In this case it is necessary to close the application and re-open. Reproducibility of this errant behavior has not been tested.