繫結至階層式資料

發行項
10/22/2014

更新：2007 年 11 月

資料來源控制項可以使用表格式資料 (表格架構或關聯式資料)、階層式資料或兩者。SqlDataSource 和 ObjectDataSource 控制項是使用表格式資料的資料來源控制項範例。ASP.NET 也包含能夠輕鬆繫結至階層式資料的兩種資料來源控制項：使用檔案或字串中 XML 的 XmlDataSource 控制項，以及使用網站巡覽資料 (預設維護為 XML 資料) 的 SiteMapDataSource 控制項。階層式資料來源控制項會在唯讀案例中用來顯示資料。

這個主題提供將資料繫結控制項繫結至階層式資料來源的詳細資訊。如需 XmlDataSource 和 SiteMapDataSource 控制項的詳細資訊，請參閱 XmlDataSource Web 伺服器控制項概觀和 SiteMapDataSource Web 伺服器控制項概觀。

將階層式控制項繫結至 XML 資料

XML 的結構在本質上是階層式的，並且能夠使用像是 TreeView 或 Menu 的階層式資料繫結控制項，顯示在 ASP.NET Web 網頁中。您可以將階層式控制項的 DataSourceID 屬性，設定為 XmlDataSource 或 SiteMapDataSource 控制項的 ID，以繫結至階層式資料來源控制項。

下列程式碼範例示範繫結至 XmlDataSource 控制項的 TreeView 控制項。XML 資料已經使用 XPath 查詢篩選。

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

Sub SelectRegion(sender As Object, e As EventArgs)
  If RegionDropDownList.SelectedValue = "(Show All)" Then
    PeopleDataSource.XPath = "/People/Person"
  Else
    Dim selectedValue As String = ""

    Select Case RegionDropDownList.SelectedValue
      Case "CA"
        selectedValue = "CA"
      Case "HI"
        selectedValue = "HI"
      Case "WA"
        selectedValue = "WA"
      Case Else
        ' Invalid value.
    End Select

    PeopleDataSource.XPath = "/People/Person[Address/Region='" & selectedValue & "']"
  End If

  PeopleTreeView.DataBind()
End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" >
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList  id="RegionDropDownList" AutoPostBack="True"
                              OnSelectedIndexChanged="SelectRegion">                              
              <asp:ListItem Selected="True">(Show All)</asp:ListItem>
              <asp:ListItem>CA</asp:ListItem>
              <asp:ListItem>HI</asp:ListItem>
              <asp:ListItem>WA</asp:ListItem>
            </asp:DropDownList>
          </td>
          <td valign="top">
            <asp:XmlDataSource
              id="PeopleDataSource"
              
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              
              DataSourceID="PeopleDataSource">
              <DataBindings>
                <asp:TreeNodeBinding DataMember="LastName"    TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="FirstName"   TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Street"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="City"        TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Region"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="ZipCode"     TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Title"       TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Description" TextField="#InnerText" />
              </DataBindings>
            </asp:TreeView>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

void SelectRegion(object sender, EventArgs e)
{
  if (RegionDropDownList.SelectedValue == "(Show All)")
    PeopleDataSource.XPath = "/People/Person";
  else
  {
    string selectedValue = "";

    switch (RegionDropDownList.SelectedValue)
    {
      case "CA":
        selectedValue = "CA";
        break;
      case "HI":
        selectedValue = "HI";
        break;
      case "WA":
        selectedValue = "WA";
        break;
      default:
        // Invalid value.
        break;
    }

    PeopleDataSource.XPath = "/People/Person[Address/Region='" + selectedValue + "']";
  }

  PeopleTreeView.DataBind();
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" >
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList  id="RegionDropDownList" AutoPostBack="True"
                              OnSelectedIndexChanged="SelectRegion">                              
              <asp:ListItem Selected="True">(Show All)</asp:ListItem>
              <asp:ListItem>CA</asp:ListItem>
              <asp:ListItem>HI</asp:ListItem>
              <asp:ListItem>WA</asp:ListItem>
            </asp:DropDownList>
          </td>
          <td valign="top">
            <asp:XmlDataSource
              id="PeopleDataSource"
              
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              
              DataSourceID="PeopleDataSource">
              <DataBindings>
                <asp:TreeNodeBinding DataMember="LastName"    TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="FirstName"   TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Street"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="City"        TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Region"      TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="ZipCode"     TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Title"       TextField="#InnerText" />
                <asp:TreeNodeBinding DataMember="Description" TextField="#InnerText" />
              </DataBindings>
            </asp:TreeView>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

將表格式控制項繫結至 XML 資料

當 XmlDataSource 控制項主要用來將 XML 資料公開至階層式資料繫結控制項 (例如 TreeView 和 Menu 控制項) 時，您也可以將表格式資料繫結控制項 (例如，GridView 或 DataList 控制項) 繫結至 XmlDataSource 控制項。

將表格式資料繫結控制項繫結至 XmlDataSource 控制項時，資料繫結控制項只會呈現 XML 階層架構的第一層。然而，在資料繫結控制項範本中，您也可以使用 XPath 和 XPathSelect 資料繫結方法，以繫結至 XML 階層架構中的特定項目。XPath 資料繫結方法會從階層架構中的任意節點或屬性傳回值。XPathSelect 方法會傳回符合 XPath 運算式的節點清單，其中表格式資料控制項能夠當做資料錄集合使用。

如需詳細資訊與範例，請參閱繫結表格式控制項至 XmlDataSource 控制項。

階層式資料的其他表單

除了將控制項繫結至此主題說明的 XmlDataSource 控制項以外，您也可以將階層式控制項繫結至 SiteMap 檔案。如需詳細資訊，請參閱 ASP.NET 網站導覽。下列程式碼範例示範如何將 Menu 控制項繫結至 SiteMapDataSource 控制項。

<%@ Page Language="VB" %>

<!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" >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head >
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" >

      <h3>Menu DataBinding Example</h3>

      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        >

        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        />        

    </form>
  </body>
</html>

<%@ Page Language="C#" %>

<!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" >

  <!-- For the hover styles of the Menu control to  -->
  <!-- work correctly, you must include this head   -->
  <!-- element.                                     -->
  <head >
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" >

      <h3>Menu DataBinding Example</h3>

      <!-- Bind the Menu control to a SiteMapDataSource control.  -->
      <asp:menu id="NavigationMenu"
        disappearafter="2000"
        staticdisplaylevels="2"
        staticsubmenuindent="10" 
        orientation="Vertical"
        font-names="Arial" 
        target="_blank"
        datasourceid="MenuSource"   
        >

        <staticmenuitemstyle backcolor="LightSteelBlue"
          forecolor="Black"/>
        <statichoverstyle backcolor="LightSkyBlue"/>
        <dynamicmenuitemstyle backcolor="Black"
          forecolor="Silver"/>
        <dynamichoverstyle backcolor="LightSkyBlue"
          forecolor="Black"/>

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        />        

    </form>
  </body>
</html>

若要建立範例的資料，您可以將下列範例網站導覽資料複製到 Web 應用程式中名為 Web.sitemap 的檔案內。

<siteMapNode url="~\Home.aspx"

title="Home"

description="Home">

<siteMapNode url="~\Music.aspx"

title="Music"

description="Music">

<siteMapNode url="~\Classical.aspx"

title="Classical"

description="Classical"/>

<siteMapNode url="~\Rock.aspx"

title="Rock"

description="Rock"/>

<siteMapNode url="~\Jazz.aspx"

title="Jazz"

description="Jazz"/>

</siteMapNode>

<siteMapNode url="~\Movies.aspx"

title="Movies"

description="Movies">

<siteMapNode url="~\Action.aspx"

title="Action"

description="Action"/>

<siteMapNode url="~\Drama.aspx"

title="Drama"

description="Drama"/>

<siteMapNode url="~\Musical.aspx"

title="Musical"

description="Musical"/>

</siteMapNode>

</siteMap>

請參閱

概念

XmlDataSource Web 伺服器控制項概觀

繫結表格式控制項至 XmlDataSource 控制項

SiteMapDataSource Web 伺服器控制項概觀

功能表控制項概觀

參考

TreeView Web 伺服器控制項概觀

共用方式為

繫結至階層式資料

將階層式控制項繫結至 XML 資料

將表格式控制項繫結至 XML 資料

階層式資料的其他表單

請參閱

概念

參考

其他資源