您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 複合控件與母版頁實戰 (一)：TreeView、MultiView、Wizard 與 MasterPage 核心應用

編輯：關於ASP.NET

本篇核心知識點

TreeView 控件：階層資料呈現
MultiView / View 控件：多視圖切換
JavaScript 分頁籤實作
Wizard 控件：精靈式表單流程
MasterPage 母版頁：版面統一與內容置換

TreeView 控件詳解

適用於無限級分類、目錄樹、組織架構等階層資料。支援資料繫結 (`DataSource`/`DataSourceID`) 與程式碼動態建立節點 (`Nodes.Add`)。

常用屬性

屬性	說明
CheckedNodes	取得勾選節點集合
CollapseImageUrl / ExpandImageUrl / NoExpandImageUrl	節點展開/摺疊/無子節點圖示
DataSource / DataSourceID	資料繫結來源
EnableClientScript	是否啟用客戶端展開/摺疊 (無 Postback)
ExpandDepth	初始展開層級
PathSeparator	節點值路徑分隔符 (預設 `/`)
SelectedNode / SelectedValue	目前選取節點/值
ShowCheckBoxes	節點前顯示核取方塊

動態載入 XML 資料範例

XML 檔 (area.xml)：

<?xml version="1.0" encoding="utf-8"?>
<Area>
  <Province iAreaID="1" cAreaName="北京市"/>
  <Province iAreaID="5" cAreaName="湖北省">
    <City iAreaID="51" cAreaName="武漢市"/>
    <City iAreaID="52" cAreaName="黃岡市"/>
  </Province>
</Area>

後台程式碼：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("area.xml"));
        TreeView1.DataSource = ds;
        TreeView1.DataBind();
    }
}

或手動建立節點 (彈性更高)：

XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("area.xml"));
foreach (XmlNode prov in doc.SelectNodes("Area/Province"))
{
    TreeNode pNode = new TreeNode(prov.Attributes["cAreaName"].Value, prov.Attributes["iAreaID"].Value);
    foreach (XmlNode city in prov.SelectNodes("City"))
    {
        pNode.ChildNodes.Add(new TreeNode(city.Attributes["cAreaName"].Value, city.Attributes["iAreaID"].Value));
    }
    TreeView1.Nodes.Add(pNode);
}

MultiView / View 控件

`MultiView` 為容器，內含多個 `View`，同一時間只顯示 `ActiveViewIndex` 指定的 View。適合精靈流程、分步驟表單、條件式顯示不同介面。搭配 `Wizard` 控件可自動產生導航按鈕 (下一步、上一步、完成)。

Wizard 控件

內建步驟導航、驗證、完成事件的複合控件。步驟定義於 ``：

<asp:Wizard ID="Wizard1" runat="server" OnFinishButtonClick="Wizard1_FinishButtonClick">
  <WizardSteps>
    <asp:WizardStep Title="步驟 1: 基本資料"> ... </asp:WizardStep>
    <asp:WizardStep Title="步驟 2: 詳細設定"> ... </asp:WizardStep>
    <asp:CompleteWizardStep Title="完成"> ... </asp:CompleteWizardStep>
  </WizardSteps>
</asp:Wizard>

MasterPage 母版頁

定義網站共同版面 (Header、Footer、選單、樣式)，內容頁透過 `ContentPlaceHolder` 置換差異區塊。

母版頁

<%@ Master Language="C#" %>
<html><head><title><asp:ContentPlaceHolder ID="head" runat="server" /></title></head>
<body>
  <div id="header">共同標題</div>
  <div id="menu"><asp:ContentPlaceHolder ID="MenuPlaceHolder" runat="server" /></div>
  <div id="content"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
  <div id="footer">版權所有</div>
</body></html>

內容頁

<%@ Page MasterPageFile="~/Site.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  <meta name="description" content="頁面描述" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  頁面專屬內容...
</asp:Content>