快捷導(dǎo)航

ASP.NET中MultiView和View選項(xiàng)卡控件的使用方法

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

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

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

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

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

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

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

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

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

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

4. 打開Default.aspx設(shè)計(jì)器，切換到代碼區(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>

對(duì)以上代碼的解釋：

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

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

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

簡單的說，MultiView是一個(gè)父容器，它包括3個(gè)View容器。通過ActiveViewIndex=1屬性指明index為1的View容器顯示，其他兩個(gè)隱藏。（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;

    }

}