MultiView和View控件允許將頁面的內(nèi)容分成不同的組,每次只顯示一個(gè)組。每個(gè)View控件管理一組內(nèi)容,所有的View控件一起放在一個(gè)MultiView控件中。
MultiView控件一次負(fù)責(zé)顯示一個(gè)View控件。顯示的視圖稱為活動(dòng)視圖。
MultiView控件的語法是:
<asp:MultView ID= "MultiView1" runat= "server"></asp:MultiView>
View控件的語法是:
<asp:View ID= "View1" runat= "server"></asp:View>
但是,View控件不能獨(dú)立存在。如果嘗試單獨(dú)使用它,則會(huì)導(dǎo)致錯(cuò)誤。它始終與多視圖控件一起使用,如下所示:
<asp:MultView ID= "MultiView1" runat= "server">
<asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>
View和MultiView控件都是從Control類派生的,并繼承了它的所有屬性,方法和事件。 View控件最重要的屬性是Boolean類型的Visible屬性,它設(shè)置視圖的可見性。
MultiView控件具有以下重要屬性:
| 編號 | 屬性 | 描述 |
|---|---|---|
| 1 | Views |
MultiView中的View控件的集合。 |
| 2 | ActiveViewIndex |
表示活動(dòng)視圖的基于0的索引。如果沒有視圖處于活動(dòng)狀態(tài),則索引為-1。 |
與MultiView控件導(dǎo)航關(guān)聯(lián)的按鈕控件的CommandName屬性與MultiView控件的某個(gè)相關(guān)字段相關(guān)聯(lián)。
例如,如果CommandName值為NextView的按鈕控件與多視圖的導(dǎo)航相關(guān)聯(lián),則單擊按鈕時(shí)會(huì)自動(dòng)導(dǎo)航到下一個(gè)視圖。
下表顯示了上述屬性的默認(rèn)命令名稱:
| 編號 | 屬性 | 描述 |
|---|---|---|
| 1 | NextViewCommandName |
NextView |
| 2 | PreviousViewCommandName |
PrevView |
| 3 | SwitchViewByIDCommandName |
SwitchViewByID |
| 4 | SwitchViewByIndexCommandName |
SwitchViewByIndex |
多視圖控制的重要方法是:
| 編號 | 方法 | 描述 |
|---|---|---|
| 1 | SetActiveview |
設(shè)置活動(dòng)視圖 |
| 2 | GetActiveview |
檢索活動(dòng)視圖 |
每次更改視圖時(shí),頁面都會(huì)回發(fā)到服務(wù)器,并引發(fā)許多事件。一些重要事件是:
| 編號 | 方法 | 描述 |
|---|---|---|
| 1 | ActiveViewChanged |
當(dāng)視圖改變時(shí)引發(fā) |
| 2 | Activate |
由活動(dòng)的視圖引發(fā) |
| 3 | Deactivate |
由非活動(dòng)的視圖引發(fā) |
除了上面提到的屬性,方法和事件,multiview控件繼承了控件和對象類的成員。
示例頁面有三個(gè)視圖。每個(gè)視圖都有兩個(gè)按鈕用于導(dǎo)航視圖。首先打開Visual Studio,創(chuàng)建一個(gè)名稱為:MultiViews 的空ASP.NET網(wǎng)站項(xiàng)目,如下所示 -

在這個(gè)項(xiàng)目名稱上點(diǎn)擊右鍵,在彈出的選項(xiàng)中選擇:添加 -> 添加新項(xiàng),選擇Web窗體,創(chuàng)建一個(gè)文件:Default.aspx, 如下所示 -

以下是Default.aspx 文件代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>多視圖示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>多視圖和視圖控件</h2>
<hr />
選擇視圖:<asp:DropDownList ID="DropDownList1" runat="server" Autopostback="true" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">1</asp:ListItem>
<asp:ListItem Value="1">2</asp:ListItem>
<asp:ListItem Value="2">3</asp:ListItem>
</asp:DropDownList>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" onactiveviewchanged="MultiView1_ActiveViewChanged">
<asp:View ID="View1" runat="server">
<h3>這是第一個(gè)視圖</h3>
<br />
<asp:Button CommandArgument="View3" CommandName="SwitchViewByID" ID="btnlast" runat="server" Text ="<<前一個(gè)視圖" />
<asp:Button CommandName="NextView" ID="btnnext1" runat="server" Text = "后一個(gè)視圖>>" />
</asp:View>
<asp:View ID="View2" runat="server">
<h3>這是第二個(gè)視圖</h3>
<asp:Button CommandName="PrevView" ID="btnprevious2" runat="server" Text = "<<前一個(gè)視圖" />
<asp:Button CommandName="NextView" ID="btnnext2" runat="server" Text = "下一個(gè)視圖>>" />
</asp:View>
<asp:View ID="View3" runat="server">
<h3> 這是第三個(gè)視圖</h3>
<br />
<asp:Calendar ID="Calender1" runat="server"></asp:Calendar>
<br />
<asp:Button CommandName="PrevView" ID="btnprevious" runat="server" Text = "<<前一個(gè)視圖" />
<asp:Button CommandArgument="0" CommandName="SwitchViewByIndex" ID="btnfirst" runat="server" Text = "后一個(gè)視圖>>" />
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
以下是Default.aspx.cs 文件代碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["id"] != null)
{
MultiView1.ActiveViewIndex = Convert.ToInt32(Request.QueryString["id"]);
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
//設(shè)置當(dāng)前被顯示的控件為下拉列表被選中的值
MultiView1.ActiveViewIndex = Convert.ToInt32(DropDownList1.SelectedValue);
}
// 默認(rèn)顯示哪個(gè)視圖?
protected void MultiView1_ActiveViewChanged(object sender, EventArgs e)
{
// MultiView1.ActiveViewIndex = 0;
}
}
運(yùn)行上面項(xiàng)目,得到以第一個(gè)界面如下 -

可通過上面的按鈕提示,切換視圖 -

注意以下幾點(diǎn):
MultiView.ActiveViewIndex確定將顯示哪個(gè)視圖。這是在頁面上呈現(xiàn)的唯一視圖。 當(dāng)沒有顯示視圖時(shí),ActiveViewIndex的默認(rèn)值是-1。由于ActiveViewIndex在本例中定義為2,所以在執(zhí)行時(shí)會(huì)顯示第三個(gè)視圖。