極客書

ASP.NET - Multi Views

「多視圖」和「視圖」控制項允許您將頁面內容分成不同的組，一次只顯示一個組。每個視圖控制項管理一組內容，所有視圖控制項都在多視圖控制項中組合在一起。

多視圖控制項負責一次顯示一個視圖控制項。顯示的視圖稱爲活動視圖。

多視圖控制項的語法爲：

<asp:MultView ID= "MultiView1" runat= "server">
</asp:MultiView>

視圖控制項的語法爲：

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

但是，視圖控制項不能單獨存在。如果您嘗試單獨使用它，它將呈現錯誤。它始終與多視圖控制項一起使用，如下所示：

<asp:MultView ID= "MultiView1" runat= "server">
   <asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>

Properties of View and MultiView Controls

視圖和多視圖控制項都派生自控制項類，並繼承其所有屬性、方法和事件。視圖控制項最重要的屬性是Boolean類型的Visible屬性，它設置視圖的可見性。

多視圖控制項具有以下重要屬性：

Properties Description
Views Collection of View controls within the MultiView.
ActiveViewIndex A zero based index that denotes the active view. If no view is active, then the index is -1.

與多視圖控制項的導航關聯的按鈕控制項的CommandName屬性與多視圖控制項的某些相關欄位關聯。

例如，如果CommandName值爲next view的按鈕控制項與多視圖的導航關聯，則在單擊該按鈕時，它會自動導航到下一個視圖。

下表顯示了上述屬性的默認命令名：

Properties Description
NextViewCommandName NextView
PreviousViewCommandName PrevView
SwitchViewByIDCommandName SwitchViewByID
SwitchViewByIndexCommandName SwitchViewByIndex

多視圖控制的重要方法是：

Methods Description
SetActiveview Sets the active view
GetActiveview Retrieves the active view

每次更改視圖時，都會將頁面發回伺服器並引發許多事件。一些重要事件包括：

Events Description
ActiveViewChanged Raised when a view is changed
Activate Raised by the active view
Deactivate Raised by the inactive view

除了上述屬性、方法和事件之外，多視圖控制項還繼承控制項和對象類的成員。

Example

示例頁面有三個視圖。每個視圖都有兩個用於瀏覽視圖的按鈕。

內容文件代碼如下：

<%@ 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>

注意以下事項：

MultiView.ActiveViewIndex決定將顯示哪個視圖。這是頁面上呈現的唯一視圖。當沒有顯示視圖時，ActiveViewIndex的默認值是-1。由於在示例中ActiveViewIndex被定義爲2，因此在執行時，它將顯示第三個視圖。