ASP.NET - MultiView 和 View Web 伺服器控件概述（一）

      MultiView 和 View Web 伺服器控件用作其他控件和标記的容器，并提供了一種可友善地顯示資訊的替換視圖的方式。

一、方案

可以使用 MultiView 和 View 控件執行如下任務：

·根據使用者選擇或其他條件提供備選控件集。例如，您可能允許使用者從一個源 (feed) 清單中選擇，其中每個源都在獨立的 View 控件中配置。然後可以顯示包含使用者選擇的源的 View 控件。可以使用 MultiView 和 View 控件作為建立多個 Panel 控件的一種替代方法。

·建立多頁窗體。MultiView 和 View 控件可以提供與 Wizard 控件相似的行為。Wizard 控件尤其适合于建立使用者分步驟填寫的窗體。Wizard 控件還支援更多内置 UI 元素（如頁眉和頁腳）、“上一頁”和“下一頁”按鈕以及模闆。如果要建立根據條件（而不是按順序）更改的顯示，或者不需要 Wizard 控件支援的額外功能，則可以使用 MultiView 控件來代替 Wizard。

二、背景

MultiView 控件用作一個或多個 View 控件的外部容器。View 控件又可包含标記和控件的任何組合。

MultiView 控件一次顯示一個 View 控件，并公開該 View 控件内的标記和控件。通過設定 MultiView 控件的 ActiveViewIndex 屬性，可以指定目前可見的 View 控件。

1、呈現 View 控件内容

未選擇某個 View 控件時，該控件不會呈現到頁面中。但是，每次呈現頁面時都會建立所有 View 控件中的所有 Web 伺服器控件的執行個體，并且将這些執行個體的值存儲為頁面的視圖狀态的一部分。

無論是 MultiView 控件還是各個 View 控件，除目前 View 控件的内容外，都不會在頁面中顯示任何标記。例如，這些控件不會以與 Panel 控件相同的方式來呈現 div 元素。這些控件也不支援可以作為一個整體應用于目前 View 控件的外觀屬性。但是可以将一個主題配置設定給 MultiView 或 View 控件，控件将該主題應用于目前 View 控件的所有子控件。

2、引用控件

每個 View 控件都支援 Controls 屬性，該屬性包含該 View 控件中的控件集合。也可以在代碼中單獨引用 View 控件中的控件。

3、在視圖間導航

通過将 MultiView 控件的 ActiveViewIndex 屬性設定為要顯示的 View 控件的索引值，可以在視圖間移動。MultiView 控件還支援可以添加到每個 View 控件的導航按鈕。

若要建立導航按鈕，可以向每個 View 控件添加一個按鈕控件（Button、LinkButton 或 ImageButton）。然後可以将每個按鈕的 CommandName 和 CommandArgument 屬性設定為保留值以使 MultiView 控件移動到另一個視圖。下表列出了保留的 CommandName 值和相應的 CommandArgument 值。

CommandName 值	CommandArgument 值
NextView	（沒有值）
PrevView	（沒有值）
SwitchViewByID	要切換到的 View 控件的 ID。
SwitchViewByIndex	要切換到的 View 控件的索引号。

      下面的代碼示例顯示一個包含三個 View 控件的 MultiView 控件。每個 View 控件包含一個移動到特定 View 控件的 Button 控件。

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

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

    View 1<br />

    <br />

    <asp:Button ID="Button1" runat="server"

      CommandArgument="View2"

      CommandName="SwitchViewByID"

      Text="Go to View2" />

  </asp:View>

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

    View 2<br />

    <br />

    <asp:Button ID="Button2" runat="server"

      CommandArgument="View3"

      CommandName="SwitchViewByID"

      Text="Go to View 3" />

  </asp:View>

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

    View 3<br />

    <br />

    <asp:Button ID="Button3" runat="server"

      CommandArgument="View1"

      CommandName="SwitchViewByID"

      Text="Go to View 1" />

  </asp:View>

</asp:MultiView>

三、如何：向 Web 窗體頁添加 MultiView Web 伺服器控件

      MultiView 和 View Web 伺服器控件用作其他控件和标記的容器，并提供了一種顯示控件和标記備選集的方式。MultiView 和 View 控件最初主要設計用于移動裝置的浏覽器中，但現在任何 ASP.NET 頁面都支援它們。

1、從工具箱的“标準”頁籤中，将 MultiView 控件拖動到頁面上。

2、從工具箱的“标準”頁籤中，将 View 控件拖動到 MultiView 控件上。

3、鍵入任何您想要添加到 View 控件中的靜态文本。若要向 View 控件添加控件，請将它們從“工具箱”中拖動到 View 控件上，以建立您想要的布局。

4、對要建立的每一個 View 控件重複步驟 2 和 3。

5、将 MultiView 控件的 ActiveViewIndex 屬性設定為要顯示的 View 控件的索引值。如果不想顯示任何 View 控件，則将此屬性設定為 -1。

6、通過添加代碼來以程式設計方式設定 ActiveViewIndex 屬性，進而設定要顯示的 View 控件。

下面的示例示範如何使用 MultiView 控件。該頁包含兩個 View 控件。使用者單擊一個 RadioButton 控件，在該按鈕的 CheckedChanged 事件處理程式中，代碼通過設定 ActiveViewIndex 屬性來顯示合适的 View 控件。當使用者單擊“搜尋”按鈕時，代碼将從适當的 View 控件中擷取 TextBox 控件的值。

安全說明： 該示例具有一個文本框，用于接受使用者輸入，這是一個潛在的安全威脅。

<%@ Page Language="C#" %>

<script runat="server">

    public enum SearchType

    {

        NotSet = -1,

        Products = 0,

        Category = 1

    }

    protected void Button1_Click(Object sender, System.EventArgs e)

    {

        if(MultiView1.ActiveViewIndex > -1)

        {

            String searchTerm = "";

            SearchType mSearchType =

                 (SearchType) MultiView1.ActiveViewIndex;

            switch(mSearchType)

            {

            case SearchType.Products:

                DoSearch(textProductName.Text, mSearchType);

                break;

            case SearchType.Category:

                DoSearch(textCategory.Text, mSearchType);

                break;

            case SearchType.NotSet:

                break;

            }

        }

    }

    protected void DoSearch(String searchTerm, SearchType type)

    {

        // Code here to perform a search.

    }

    protected void radioButton_CheckedChanged(Object sender,

        System.EventArgs e)

    {

        if(radioProduct.Checked)

        {

            MultiView1.ActiveViewIndex = (int) SearchType.Products;

        }

        else if(radioCategory.Checked)

        {

            MultiView1.ActiveViewIndex = (int) SearchType.Category;

        }

    }

</script>

<html>

<head id="Head1" runat="server"></head>

<body>

    <form id="form1" runat="server">

    <div>

        Search by product or by category?

        <br />

        <asp:RadioButton ID="radioProduct"

            runat="server"

            autopostback="true"

            GroupName="SearchType"

            Text="Product"

            OnCheckedChanged="radioButton_CheckedChanged" />

        <asp:RadioButton ID="radioCategory"

            runat="server"

            autopostback="true"

            GroupName="SearchType"

            Text="Category"

            OnCheckedChanged="radioButton_CheckedChanged" />

        <br />

        <br />

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

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

                Enter product name:

                <asp:TextBox ID="textProductName" runat="server">

                </asp:TextBox>

            </asp:View>

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

                Enter category:

                <asp:TextBox ID="textCategory" runat="server">

                </asp:TextBox>

            </asp:View>

        </asp:MultiView>&nbsp;<br />

        <br />

        <asp:Button ID="btnSearch"

           OnClick="Button1_Click"

           runat="server" Text="Search" />

     </div>

    </form>

</body>

</html>