程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> ASP.NET中MultiView和View選項卡控件的使用方法

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

編輯:ASP.NET基礎

MultiView 控件可用作一個或多個 View 控件的外部容器。而 View 控件可以包含標記和控件的任意組合。您可以使用 MultiView 和 View 控件來執行各種任務,例如基於用戶選擇提供替換控件集或者創建多頁表單。

MultiView 控件一次顯示一個 View 控件,並公開該 View 控件內的標記和控件。通過設置 MultiView 控件的 ActiveViewIndex 屬性,可以指定當前可見的 View 控件。

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

廢話說的有點多,直接上例子吧

創建新的 ASP.NET 網站項目

1.在“文件”菜單中,指向“新建”,然後選擇“網站”。

2.在“新建網站”對話框中,從“語言”下拉列表中選擇 Visual C#,並選擇 ASP.NET 網站模板。

3.在“位置”中,選擇 HTTP 並鍵入網站的 URL。默認的 URL 為 http://localhost/WebSite。改為http://localhost/MultiViewTest,單擊“確定”。

4. 打開Default.aspx設計器,切換到代碼區,Ctrl+A全選,替換為以下代碼:

復制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_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>無標題頁</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 服務器控件用作其他控件和標記的容器,並提供了一種可方便地顯示信息的替換視圖的方式。

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

MultiView 控件一次顯示一個 View 控件,並公開該 View 控件內的標記和控件。通過設置 MultiView 控件的ActiveViewIndex 屬性,可以指定當前可見的 View 控件。

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

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

復制代碼 代碼如下:
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;
    }
}

6.保存後按Ctrl+F5啟動運行,如果一切順利,您可以看到以下界面:

MultiView效果演示

點擊first,second,third選項卡,可以切換內容。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved