快捷導(dǎo)航

ASP.NET中MultiView和View選項卡控件的使用方法

更新時間：2016年04月23日 10:06:31 作者：胡琛

ASP.NET中的MultiView和View控件可以作為承載其他控件的容器，一般我們都很少使用，本文主要介紹使用MultiView和View實(shí)現(xiàn)選項卡效果。

MultiView 控件可用作一個或多個 View 控件的外部容器。而 View 控件可以包含標(biāo)記和控件的任意組合。您可以使用 MultiView 和 View 控件來執(zhí)行各種任務(wù)，例如基于用戶選擇提供替換控件集或者創(chuàng)建多頁表單。

MultiView 控件一次顯示一個 View 控件，并公開該 View 控件內(nèi)的標(biāo)記和控件。通過設(shè)置 MultiView 控件的 ActiveViewIndex 屬性，可以指定當(dāng)前可見的 View 控件。

如果要切換視圖，可以使用控件的ID或者View控件的索引值。在 MultiView 控件中，一次只能將一個 View 控件定義為活動視圖。如果某個 View 控件定義為活動視圖，它所包含的子控件則會呈現(xiàn)到客戶端。可以使用 ActiveViewIndex 屬性或SetActiveView 方法定義活動視圖。如果 ActiveViewIndex 屬性為空，則 MultiView 控件不向客戶端呈現(xiàn)任何內(nèi)容。如果活動視圖設(shè)置為MultiView 控件中不存在的 View，則會在運(yùn)行時引發(fā) ArgumentOutOfRangeException。

廢話說的有點(diǎn)多，直接上例子吧

創(chuàng)建新的 ASP.NET 網(wǎng)站項目

1.在“文件”菜單中，指向“新建”，然后選擇“網(wǎng)站”。

2.在“新建網(wǎng)站”對話框中，從“語言”下拉列表中選擇 Visual C#，并選擇 ASP.NET 網(wǎng)站模板。

3.在“位置”中，選擇 HTTP 并鍵入網(wǎng)站的 URL。默認(rèn)的 URL 為 http://localhost/WebSite。改為http://localhost/MultiViewTest,單擊“確定”。

4. 打開Default.aspx設(shè)計器，切換到代碼區(qū)，Ctrl+A全選，替換為以下代碼：

復(fù)制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns=" <head runat="server">
    <title>無標(biāo)題頁</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">first</asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">second</asp:LinkButton>
    <asp:LinkButton ID="LinkButton3" runat="server" onclick="LinkButton3_Click">third</asp:LinkButton>
    <br />
    <hr />
    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex = 1>
        <asp:View ID="View1" runat="server">
        this is the first page
        </asp:View>
        <asp:View ID="View2" runat="server">
        this is the second page
        </asp:View>
        <asp:View ID="View3" runat="server">
        this is the third page
        </asp:View>
    </asp:MultiView>
    </div>
    </form>
</body>
</html>

對以上代碼的解釋：

MultiView 和 View Web 服務(wù)器控件用作其他控件和標(biāo)記的容器，并提供了一種可方便地顯示信息的替換視圖的方式。

MultiView 控件用作一個或多個 View 控件的外部容器。View 控件又可包含標(biāo)記和控件的任何組合。

MultiView 控件一次顯示一個 View 控件，并公開該 View 控件內(nèi)的標(biāo)記和控件。通過設(shè)置 MultiView 控件的ActiveViewIndex 屬性，可以指定當(dāng)前可見的 View 控件。

簡單的說，MultiView是一個父容器，它包括3個View容器。通過ActiveViewIndex=1屬性指明index為1的View容器顯示，其他兩個隱藏。（index按照view排列的順序從0開始）

5. 打開Default.aspx.cs, 按Ctrl+A全選，刪除后替換為以下代碼：

復(fù)制代碼代碼如下:

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void LinkButton1_Click(object sender, EventArgs e)

    {

        this.MultiView1.ActiveViewIndex = 0;

    }

    protected void LinkButton2_Click(object sender, EventArgs e)

    {

        this.MultiView1.ActiveViewIndex = 1;

    }

    protected void LinkButton3_Click(object sender, EventArgs e)

    {

        this.MultiView1.ActiveViewIndex = 2;

    }

}