階層データへのバインド

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

データソースコントロールは、表形式データ (テーブルベースまたはリレーショナルデータ) または階層データ、あるいはその両方で使用できます。SqlDataSource コントロールと ObjectDataSource コントロールは、表形式データで使用できるデータソースコントロールの例です。ASP.NET には階層データに簡単にバインドするための 2 つのデータソースコントロールがあります。1 つはファイルまたは文字列の XML で使用するための XmlDataSource コントロールで、もう 1 つは既定で 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 runat="server">

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 runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList runat="server" 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"
              runat="server"
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              runat="server"
              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 runat="server">

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 runat="server">
    <title>ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <table border="0" cellpadding="3">
        <tr>
          <td valign="top">
            <b>Select Region:</b>
            <asp:DropDownList runat="server" 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"
              runat="server"
              XPath="/People/Person"
              DataFile="~/App_Data/people.xml" />

            <asp:TreeView
              id="PeopleTreeView"
              runat="server"
              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 コントロールにコントロールをバインドすることに加えて、サイトマップファイルに階層コントロールをバインドすることもできます。詳細については、「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 runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">

      <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"   
        runat="server">

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

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

    </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 runat="server">
    <title>Menu DataBinding Example</title>
</head>

  <body>
    <form id="form1" runat="server">

      <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"   
        runat="server">

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

      </asp:menu>

      <asp:SiteMapDataSource id="MenuSource"
        runat="server"/>        

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

この例のデータを作成するには、Web.sitemap という Web アプリケーションのファイルに、次のサンプルサイトマップデータをコピーします。

<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 データへのバインド

その他の形式の階層データ

参照

概念

参照

その他のリソース