ASP.NET multiple views
May 13, 2021 ASP.NET
Table of contents
Multi-view
MultiView and View controls allow you to divide the contents of a page into different groups, displaying only one group at a time. Each view control manages the contents of a group, and all view controls are included in the MultiView control.
Multi-view controls are responsible for displaying only one view at a time. A view display is called an active view.
The syntax of the MultiView control is:
<asp:MultView ID= "MultiView1" runat= "server">
</asp:MultiView>The syntax controlled by View is:
<asp:View ID= "View1" runat= "server">
</asp:View>However, the control cannot exist on its own. I f you try to use it alone, you get an error. It is always used with a multi-view controller:
<asp:MultView ID= "MultiView1" runat= "server">
<asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>The properties of the View and MultiView controls
Both views and multi-view controls come from the Control class. a nd inherits all its properties, methods, and events. The most important property of a view control is the visual Boolean property, which sets the visibility of a view.
Multi-view controls have the following important features:
| Property | Describe |
|---|---|
| Views | View controls that include multiple views. |
| ActiveViewIndex | Zero-start index, which represents the active view. If no view is active, the index value is -1. |
The button control CommandName property related to the navigation of the MultiView control is associated with some related fields of the MultiView control.
For example, if a button-controlled CommandName value is associated with multi-view navigation, it automatically navigates to the next view when you click the button.
The following table shows the default command name for the above properties:
| Elements | Describe |
|---|---|
| NextViewCommandName | The next view |
| PreviousViewCommandName | The last view |
| SwitchViewByIDCommandName | SwitchViewByID |
| SwitchViewByIndexCommandName | SwitchViewByIndex |
An important approach to multi-view control is to:
| Method | Describe |
|---|---|
| SetActiveview | Set up an active view |
| GetActiveview | Retrieve the active view |
As each view changes, the page is passed back to the server and some events are raised. Some important events are:
| Event | Describe |
|---|---|
| ActiveViewChanged | Triggered when a view changes |
| Activate | Triggered by an active view |
| Deactivate | Triggered by an inactive view |
In addition to the properties, methods, and events mentioned above, the multi-view control inherits the members of the control and object classes.
Example
The sample page has three views. The navigation view for each view has two buttons.
The code for the content file is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="multiviewdemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>
Untitled Page
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>MultiView and View Controls</h2>
<asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<hr />
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="2" onactiveviewchanged="MultiView1_ActiveViewChanged" >
<asp:View ID="View1" runat="server">
<h3>This is view 1</h3>
<br />
<asp:Button CommandName="NextView" ID="btnnext1" runat="server" Text = "Go To Next" />
<asp:Button CommandArgument="View3" CommandName="SwitchViewByID" ID="btnlast" runat="server" Text ="Go To Last" />
</asp:View>
<asp:View ID="View2" runat="server">
<h3>This is view 2</h3>
<asp:Button CommandName="NextView" ID="btnnext2" runat="server" Text = "Go To Next" />
<asp:Button CommandName="PrevView" ID="btnprevious2" runat="server" Text = "Go To Previous View" />
</asp:View>
<asp:View ID="View3" runat="server">
<h3> This is view 3</h3>
<br />
<asp:Calendar ID="Calender1" runat="server"></asp:Calendar>
<br />
<asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnfirst" runat="server" Text = "Go To Next" />
<asp:Button CommandName="PrevView" ID="btnprevious" runat="server" Text = "Go To Previous View" />
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>Note the following:
MultiView.ActiveViewIndex determines which views will be displayed. T his is the only view rendered on the page. T he default value for ActiveViewIndex when no view is displayed is -1. Because ActiveViewIndex in the example is defined as 2, it is executed with a third view.
