계층적 데이터에 바인딩

아티클
10/22/2014

업데이트: 2007년 11월

데이터 소스 컨트롤에서는 표 형식 데이터(표 기반 데이터나 관계형 데이터) 또는 계층적 데이터를 사용하여 작업하거나 둘 다 사용할 수 있습니다. 예를 들어 SqlDataSource 및 ObjectDataSource 컨트롤은 표 형식 데이터를 사용하여 작업하는 데이터 소스 컨트롤입니다. 또한 ASP.NET에는 계층적 데이터에 쉽게 바인딩할 수 있는 데이터 소스 컨트롤 두 개가 포함되어 있습니다. XmlDataSource 컨트롤은 파일 또는 문자열의 XML을 사용하고 SiteMapDataSource 컨트롤은 기본적으로 XML 데이터로 유지되는 사이트 탐색 데이터를 사용합니다. 계층적 데이터 소스 컨트롤은 읽기 전용 시나리오에서 데이터를 표시하는 데 사용됩니다.

이 항목에서는 데이터 바인딩된 컨트롤을 계층적 데이터 소스에 바인딩하는 데 대한 내용을 자세히 설명합니다. XmlDataSource 및 SiteMapDataSource 컨트롤에 대한 자세한 내용은 XmlDataSource 웹 서버 컨트롤 개요 및 SiteMapDataSource 웹 서버 컨트롤 개요를 참조하십시오.

계층적 컨트롤을 XML 데이터에 바인딩

XML은 본질적으로 계층 구조로 되어 있으므로 TreeView 또는 Menu 같은 계층 형식의 데이터 바인딩된 컨트롤을 사용하여 ASP.NET 웹 페이지에 표시할 수 있습니다. 계층적 컨트롤의 DataSourceID 속성을 XmlDataSource 또는 SiteMapDataSource 컨트롤의 ID로 설정하여 계층적 데이터 소스 컨트롤에 바인딩할 수 있습니다.

다음 코드 예제에서는 XmlDataSource 컨트롤에 바인딩된 TreeView 컨트롤을 보여 줍니다. 이 때 XPath 쿼리를 사용하여 XML 데이터가 필터링됩니다.

<%@ 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 컨트롤은 주로 계층 형식의 데이터 바인딩된 컨트롤(예: TreeView 및 Menu 컨트롤)에 XML 데이터를 노출하는 데 사용되지만 표 형식의 데이터 바인딩된 컨트롤(예: 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 >
    <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.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 웹 서버 컨트롤 개요

XmlDataSource 컨트롤에 표 형식 컨트롤 바인딩

SiteMapDataSource 웹 서버 컨트롤 개요

Menu 컨트롤 개요

참조

TreeView 웹 서버 컨트롤 개요

다음을 통해 공유

계층적 데이터에 바인딩

계층적 컨트롤을 XML 데이터에 바인딩

표 형식 컨트롤을 XML 데이터에 바인딩

다른 형식의 계층적 데이터

참고 항목

개념

참조

추가 리소스