TreeView 사용법

.NET Framework 클래스 라이브러리 

TreeView 클래스 

참고: 이 클래스는 .NET Framework 버전 2.0에서 새로 추가되었습니다.

목차와 같은 계층적 데이터를 트리 구조로 표시합니다.

네임스페이스: System.Web.UI.WebControls
어셈블리: System.Web(system.web.dll)

구문

Visual Basic(선언)

<ControlValuePropertyAttribute("SelectedValue")> _
Public Class TreeView
    Inherits HierarchicalDataBoundControl
    Implements IPostBackEventHandler, IPostBackDataHandler, ICallbackEventHandler

Visual Basic(사용법)

Dim instance As TreeView

C#

[ControlValuePropertyAttribute("SelectedValue")] 
public class TreeView : HierarchicalDataBoundControl, IPostBackEventHandler, IPostBackDataHandler, ICallbackEventHandler

C++

[ControlValuePropertyAttribute(L"SelectedValue")] 
public ref class TreeView : public HierarchicalDataBoundControl, IPostBackEventHandler, IPostBackDataHandler, ICallbackEventHandler

J#

/** @attribute ControlValuePropertyAttribute("SelectedValue") */ 
public class TreeView extends HierarchicalDataBoundControl implements IPostBackEventHandler, IPostBackDataHandler, 
    ICallbackEventHandler

JScript

ControlValuePropertyAttribute("SelectedValue") 
public class TreeView extends HierarchicalDataBoundControl implements IPostBackEventHandler, IPostBackDataHandler, 
    ICallbackEventHandler

설명

TreeView 컨트롤은 목차나 파일 디렉터리와 같은 계층적 데이터를 트리 구조로 표시하는 데 사용되며 다음과 같은 기능을 지원합니다.

• 컨트롤의 노드를 XML, 표 형식 또는 관계형 데이터에 바인딩할 수 있는 데이터 바인딩 기능
• SiteMapDataSource 컨트롤과의 통합을 통한 사이트 탐색 기능
• 일반 텍스트 또는 하이퍼링크로 표시될 수 있는 노드 텍스트 기능
• 트리를 만들고, 노드를 채우고, 속성을 설정하는 등의 작업을 동적으로 수행할 수 있는 TreeView 개체 모델에 대한 프로그래밍 방식의 액세스 기능
• 클라이언트측 노드 채우기 기능(브라우저에서 지원되는 경우)
• 각 노드 옆에 확인란을 표시할 수 있는 기능
• 테마, 사용자 정의 이미지 및 스타일을 통해 모양을 사용자 지정할 수 있는 기능

노드

TreeView 컨트롤은 노드로 구성됩니다. 트리의 각 항목은 노드라고 하며 TreeNode 개체로 표시됩니다. 노드 형식은 다음과 같이 정의됩니다.

• 다른 노드를 포함하는 노드를 부모 노드라고 합니다.
• 다른 노드에 포함된 노드를 자식 노드라고 합니다.
• 자식이 없는 노드를 리프 노드라고 합니다.
• 다른 노드에 포함되지 않았으며 다른 모든 노드의 상위 노드인 노드를 루트 노드라고 합니다.

노드는 부모와 자식이 모두 될 수 있지만 루트, 부모 및 리프 노드는 상호 배타적입니다. 노드의 여러 비주얼 및 동작 속성은 노드가 루트, 부모 또는 리프 노드인지에 따라 결정됩니다.

일반적인 트리 구조의 경우 루트 노드가 하나뿐이지만 TreeView 컨트롤을 사용하면 여러 루트 노드를 트리 구조에 추가할 수 있습니다. 이러한 기능은 제품 범주 목록에서와 같이 단일 루트 노드를 표시하지 않고 항목 목록을 표시하려는 경우에 유용합니다.

각 노드에는 Text 속성과 Value 속성이 있습니다. Text 속성 값은 TreeView에 표시되는 반면 Value 속성은 노드와 관련된 다시 게시 이벤트에 전달된 데이터와 같이 노드에 대한 추가 데이터를 저장하는 데 사용됩니다.

노드는 선택 모드와 탐색 모드 중 한 모드에 있을 수 있습니다. 기본적으로 노드는 선택 모드 상태입니다. 노드를 탐색 모드로 만들려면 노드의 NavigateUrl 속성을 빈 문자열("") 이외의 값으로 설정합니다. 노드를 선택 모드로 만들려면 노드의 NavigateUrl 속성을 빈 문자열("")로 설정합니다.

정적 데이터

TreeView 컨트롤의 가장 단순한 데이터 모델은 정적 데이터입니다. 선언 구문으로 정적 데이터를 표시하려면 먼저 TreeView 컨트롤의 여는 태그와 닫는 태그 사이에 열고 닫는 <Nodes> 태그를 중첩시킵니다. 그런 다음 열고 닫는 <Nodes> 태그 사이에 <asp:TreeNode> 요소를 중첩시켜서 트리 구조를 만듭니다. 각 <asp:TreeNode> 요소는 트리 내의 한 노드를 나타내고 TreeNode 개체에 매핑됩니다. 각 노드의 <asp:TreeNode> 요소 특성을 설정하면 해당 노드의 속성을 설정할 수 있습니다. 자식 노드를 만들려면 부모 노드의 열고 닫는 <asp:TreeNode> 태그 사이에 추가 <asp:TreeNode> 요소를 중첩시킵니다.

데이터에 바인딩

TreeView 컨트롤을 데이터에 바인딩할 수도 있습니다. 다음 두 방법 중 하나를 사용하여 TreeView 컨트롤을 적합한 데이터 소스 형식에 바인딩할 수 있습니다.

• TreeView 컨트롤은 XmlDataSource 컨트롤 또는 SiteMapDataSource 컨트롤과 같이 IHierarchicalDataSource 인터페이스를 구현하는 모든 데이터 소스 컨트롤을 사용할 수 있습니다. 데이터 소스 컨트롤에 바인딩하려면 TreeView 컨트롤의 DataSourceID 속성을 데이터 소스 컨트롤의 ID 값으로 설정합니다. TreeView 컨트롤은 지정된 데이터 소스 컨트롤에 자동으로 바인딩됩니다. 이것이 데이터에 바인딩하는 기본 방법입니다.
• 또한 TreeView 컨트롤은 XmlDocument 개체 또는 관계가 있는 DataSet 개체에 바인딩될 수 있습니다. 이러한 데이터 소스 중 하나에 바인딩하려면 TreeView 컨트롤의 DataSource 속성을 데이터 소스로 설정한 다음 DataBind 메서드를 호출합니다.

여러 특성을 가진 XML 요소처럼 각 데이터 항목에 여러 속성이 포함된 데이터 소스에 바인딩하는 경우 기본적으로 노드에는 데이터 항목의 ToString 메서드에서 반환된 값이 표시됩니다. XML 요소의 경우에는 노드에 요소 이름이 표시되어 트리의 내부 구조를 알 수 있지만 다른 면에서는 그다지 유용하지 않습니다. DataBindings 컬렉션을 사용하여 트리 노드 바인딩을 지정하면 특정 데이터 항목 속성에 노드를 바인딩할 수 있습니다. DataBindings 컬렉션에는 데이터 항목과 데이터 항목에 바인딩된 노드 간의 관계를 정의하는 TreeNodeBinding 개체가 들어 있습니다. 바인딩 조건과 노드에 표시할 데이터 항목 속성을 지정할 수 있습니다. 트리 노드 바인딩에 대한 자세한 내용은 TreeNodeBinding을 참조하십시오.

보안 참고
악의가 있는 사용자는 콜백 요청을 만들어서 페이지 개발자가 표시하지 않고 있는 TreeView 컨트롤의 노드에 대한 데이터를 얻을 수 있습니다. 그러므로 데이터 소스에서 데이터 보안을 구현해야 합니다. MaxDataBindDepth 속성을 사용하여 데이터를 숨기지 마십시오.

동적 노드 채우기

데이터 소스가 너무 많은 데이터를 반환하거나 표시할 데이터의 양이 런타임에 얻은 정보에 따라 달라지기 때문에 트리 구조를 정적으로 정의하는 것이 적합하지 않은 경우도 있습니다. 이 때문에 TreeView 컨트롤은 동적 노드 채우기를 지원합니다. 노드의 PopulateOnDemand 속성을 true로 설정하면 노드가 확장될 때 노드가 런타임에서 채워집니다. 노드를 동적으로 채우려면 TreeNodePopulate 이벤트에 대한 노드를 채우는 논리가 포함된 이벤트 처리 메서드를 정의해야 합니다.

Microsoft Internet Explorer 버전 5.0 이상 및 Netscape 6.0 이상에서는 클라이언트측 노드 채우기를 사용할 수도 있습니다. 클라이언트측 노드 채우기를 사용하면 사용자가 노드를 확장할 때 서버로 라운드트립을 하지 않고도 TreeView 컨트롤에서 클라이언트 스크립트를 사용하여 노드를 채울 수 있습니다. 클라이언트측 노드 채우기에 대한 자세한 내용은 PopulateNodesFromClient를 참조하십시오.

사용자 인터페이스 사용자 지정

TreeView 컨트롤의 모양은 여러 가지 방법으로 사용자 지정할 수 있습니다. 먼저 각 노드 형식에 대해 다양한 스타일(예: 글꼴 크기 및 색)을 지정할 수 있습니다. 다음 표에서는 사용 가능한 노드 스타일을 보여 줍니다.

 

노드 스타일 속성	설명
HoverNodeStyle	마우스 포인터를 노드 위에 가져가면 표시되는 노드 스타일 설정
LeafNodeStyle	리프 노드의 스타일 설정
NodeStyle	노드의 기본 스타일 설정
ParentNodeStyle	부모 노드의 스타일 설정
RootNodeStyle	루트 노드의 스타일 설정
SelectedNodeStyle	선택한 노드의 스타일 설정

또한 LevelStyles 컬렉션을 사용하여 트리 내 특정 수준의 노드 스타일을 제어할 수 있습니다. 컬렉션의 첫 번째 스타일은 트리의 첫 번째 수준에 위치한 노드의 스타일에 해당합니다. 컬렉션의 두 번째 스타일은 트리의 두 번째 수준에 위치한 노드의 스타일에 해당하며, 이후 스타일도 동일한 방식으로 적용됩니다. 이 방법은 자식 노드의 유무와 상관없이 특정 수준의 노드 모양이 동일해야 하는 목차 스타일 탐색 메뉴를 만들 때 가장 많이 사용됩니다.

참고
LevelStyles 컬렉션을 사용하여 특정 수준에 대한 스타일이 정의되면 정의된 스타일이 해당 수준에 위치한 노드의 모든 루트, 부모 또는 리프 노드 스타일 설정을 재정의합니다.

또한 TreeView 컨트롤에 표시된 이미지를 사용자 지정하여 컨트롤의 모양을 바꿀 수도 있습니다. 다음 표에 나와 있는 속성을 설정하여 컨트롤의 다양한 부분에 대해 고유한 사용자 지정 이미지 집합을 지정할 수 있습니다.

 

이미지 속성	설명
CollapseImageUrl	축소할 수 있는 노드 표시기에 대해 표시되는 이미지의 URL입니다. 이 이미지는 보통 빼기 기호(-)입니다.
ExpandImageUrl	확장할 수 있는 노드 표시기에 대해 표시되는 이미지의 URL입니다. 이 이미지는 보통 더하기 기호(-)입니다.
LineImagesFolder	부모 노드와 자식 노드를 연결하는 데 사용되는 선 이미지가 포함된 폴더의 URL입니다. 또한 ShowLines 속성을 true로 설정해야 이 속성이 적용됩니다.
NoExpandImageUrl	확장할 수 없는 노드 표시기에 대해 표시되는 이미지의 URL입니다.

참고
모든 이미지 속성을 사용자 지정할 필요는 없습니다. 이미지 속성을 명시적으로 설정하지 않으면 기본 제공 이미지가 사용됩니다.

또한 TreeView 컨트롤을 사용하면 노드 옆에 확인란을 표시할 수 있습니다. ShowCheckBoxes 속성이 TreeNodeTypes.None 이외의 값으로 설정된 경우 지정된 노드 형식 옆에 확인란이 표시됩니다.

참고
ShowCheckBoxes 속성은 TreeNodeTypes 열거형 멤버 값의 비트 조합으로 설정될 수 있습니다.

페이지가 서버에 게시될 때마다 CheckedNodes 컬렉션은 선택한 노드로 자동으로 채워집니다. 확인란이 표시된 경우 서버에 대한 게시 사이에 확인란의 상태가 바뀔 때마다 TreeNodeCheckChanged 이벤트를 사용하여 사용자 지정 루틴을 실행할 수 있습니다.

이벤트

TreeView 컨트롤은 프로그래밍할 수 있는 여러 이벤트를 제공합니다. 이를 통해 이벤트가 발생할 때마다 사용자 지정 루틴을 실행할 수 있습니다. 다음 표에서는 TreeView 컨트롤에서 지원되는 이벤트를 보여 줍니다.

 

이벤트	설명
TreeNodeCheckChanged	서버에 대한 게시 사이에 TreeView 컨트롤의 확인란 상태가 변경될 때 발생합니다.
SelectedNodeChanged	TreeView 컨트롤에서 노드를 선택할 때 발생합니다.
TreeNodeExpanded	TreeView 컨트롤에서 노드를 확장할 때 발생합니다.
TreeNodeCollapsed	TreeView 컨트롤에서 노드를 축소할 때 발생합니다.
TreeNodePopulate	PopulateOnDemand 속성이 true로 설정된 노드를 TreeView 컨트롤에서 확장할 때 발생합니다.
TreeNodeDataBound	TreeView 컨트롤에서 데이터 항목을 노드에 바인딩하면 발생합니다.

액세스 가능성

이 컨트롤에 대해 기본적으로 렌더링되는 태그는 WCAG(Web Content Accessibility Guidelines) 1.0 우선 순위 1 지침과 같은 내게 필요한 옵션 표준을 따르지 않을 수도 있습니다. 이 컨트롤의 내게 필요한 옵션 지원에 대한 자세한 내용은 ASP.NET 컨트롤 및 내게 필요한 옵션을 참조하십시오.

스크롤 기능

TreeView 컨트롤에는 기본 제공 스크롤 기능이 없습니다. 스크롤 기능을 추가하려면 Panel 컨트롤에 TreeView 컨트롤을 포함하고 Panel 컨트롤에 스크롤 막대를 추가합니다. 자세한 내용은 Panel 웹 서버 컨트롤 개요를 참조하십시오.

예제

이 단원에는 일곱 개의 코드 예제가 있습니다.

• 첫 번째 코드 예제에서는 두 번째 코드 예제에서 사용할 프레임을 설정하는 방법을 보여 줍니다.
• 두 번째 코드 예제에서는 선언 구문을 사용하여 TreeView 컨트롤에 정적 데이터를 표시하는 방법을 보여 줍니다.
• 세 번째 코드 예제에서는 TreeView 컨트롤을 XML 데이터 소스에 바인딩하는 방법을 보여 줍니다.
• 네 번째 코드 예제에서는 세 번째 코드 예제에 사용되는 샘플 XML 데이터를 제공합니다.
• 다섯 번째 코드 예제에서는 TreeView 컨트롤을 SiteMapDataSource 컨트롤에 바인딩하여 사이트 탐색에 사용하는 방법을 보여 줍니다.
• 여섯 번째 코드 예제에서는 다서 번째 코드 예제에 사용되는 샘플 사이트 맵 데이터를 제공합니.
• 일곱 번째 코드 예제에서는 클라이언트로부터 TreeView 컨트롤의 노드를 채우는 방법을 보여 줍니다.

다음 코드 예제에서는 이후 코드 예제에서 사용할 프레임을 설정하는 방법을 보여 줍니다.

Visual Basic

코드 복사

<html>
         
    <frameset cols="30%, 75%">
   
        <frame name="Menu" src="TreeViewFramevb.aspx"/>
        <frame name="Content" src="Home.aspx"/> 
           
    </frameset>      
   
</html>

C#

코드 복사

<html>
         
    <frameset cols="30%, 75%">
   
        <frame name="Menu" src="TreeViewFramecs.aspx"/>
        <frame name="Content" src="Home.aspx"/> 
           
    </frameset>      
   
</html>

다음 코드 예제에서는 선언 구문을 사용하여 TreeView 컨트롤에 정적 데이터를 표시하는 방법을 보여 줍니다. 이 예제는 이전 예제의 프레임 집합 내에서 목차를 표시하는 데 사용됩니다.

Visual Basic

코드 복사

<%@ Page Language="VB" %>

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView Declarative Syntax Example</h3>
      
      <asp:TreeView id="SampleTreeView" 
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Value="Home" 
            NavigateUrl="Home.aspx" 
            Text="Home"
            Target="Content" 
            Expanded="True">
             
            <asp:TreeNode Value="Page 1" 
              NavigateUrl="Page1.aspx" 
              Text="Page1"
              Target="Content">
               
              <asp:TreeNode Value="Section 1" 
                NavigateUrl="Section1.aspx" 
                Text="Section 1"
                Target="Content"/>
                 
            </asp:TreeNode>              
            
            <asp:TreeNode Value="Page 2" 
              NavigateUrl="Page2.aspx"
              Text="Page 2"
              Target="Content">
               
            </asp:TreeNode> 
            
          </asp:TreeNode>
        
        </Nodes>
        
      </asp:TreeView>

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

C#

코드 복사

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

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView Declarative Syntax Example</h3>
      
      <asp:TreeView id="SampleTreeView" 
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Value="Home" 
            NavigateUrl="Home.aspx" 
            Text="Home"
            Target="Content" 
            Expanded="True">
             
            <asp:TreeNode Value="Page 1" 
              NavigateUrl="Page1.aspx" 
              Text="Page1"
              Target="Content">
               
              <asp:TreeNode Value="Section 1" 
                NavigateUrl="Section1.aspx" 
                Text="Section 1"
                Target="Content"/>
                 
            </asp:TreeNode>              
            
            <asp:TreeNode Value="Page 2" 
              NavigateUrl="Page2.aspx"
              Text="Page 2"
              Target="Content">
               
            </asp:TreeNode> 
            
          </asp:TreeNode>
        
        </Nodes>
        
      </asp:TreeView>

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

다음 코드 예제에서는 TreeView 컨트롤을 XML 데이터 소스에 바인딩하는 방법을 보여 줍니다. 이 예제가 제대로 작동하려면 이 코드 예제 뒤에 제공된 샘플 XML 데이터를 Book.xml이라는 파일에 복사해야 합니다.

Visual Basic

코드 복사

<%@ Page Language="VB" %>

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView XML Data Binding Example</h3>
    
      <asp:TreeView id="BookTreeView" 
        DataSourceID=BookXmlDataSource
        runat="server">
         
        <DataBindings>
          <asp:TreeNodeBinding DataMember="Book" TextField="Title"/>
          <asp:TreeNodeBinding DataMember="Chapter" TextField="Heading"/>
          <asp:TreeNodeBinding DataMember="Section" TextField="Heading"/>
        </DataBindings>
         
      </asp:TreeView>

      <asp:XmlDataSource id="BookXmlDataSource"  
        DataFile="Book.xml"
        runat="server">
      </asp:XmlDataSource>
    
    </form>
  </body>
</html>

C#

코드 복사

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

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView XML Data Binding Example</h3>
    
      <asp:TreeView id="BookTreeView" 
        DataSourceID=BookXmlDataSource
        runat="server">
         
        <DataBindings>
          <asp:TreeNodeBinding DataMember="Book" TextField="Title"/>
          <asp:TreeNodeBinding DataMember="Chapter" TextField="Heading"/>
          <asp:TreeNodeBinding DataMember="Section" TextField="Heading"/>
        </DataBindings>
         
      </asp:TreeView>

      <asp:XmlDataSource id="BookXmlDataSource"  
        DataFile="Book.xml"
        runat="server">
      </asp:XmlDataSource>
    
    </form>
  </body>
</html>

다음 코드 예제에서는 이전 예제에 사용되는 샘플 XML 데이터를 제공합니다.

<Book Title="Book Title">
    <Chapter Heading="Chapter 1">
        <Section Heading="Section 1">
        </Section>
        <Section Heading="Section 2">
        </Section>
    </Chapter>
    <Chapter Heading="Chapter 2">
        <Section Heading="Section 1">
        </Section>
    </Chapter>
</Book>

다음 코드 예제에서는 사이트 탐색을 위해 TreeView 컨트롤을 사용하여 이 컨트롤을 SiteMapDataSource 컨트롤에 바인딩하는 방법을 보여 줍니다. 이 예제가 제대로 작동하려면 이 코드 예제 뒤에 제공된 샘플 사이트 맵 데이터를 Web.sitemap이라는 파일에 복사해야 합니다.

Visual Basic

코드 복사

<%@ Page Language="VB" %>

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView AutoGenerateBindings Example</h3>
    
      <!-- Set the AutoGenerateBindings property -->
      <!-- to false declaratively to allow for   -->
      <!-- the user-defined Bindings collection. -->
      <asp:TreeView id="SiteTreeView" 
        DataSourceID="SiteMapSource"
        AutoGenerateDataBindings="False"
        runat="server">
        
        <DataBindings>
        
          <asp:TreeNodeBinding TextField="title" NavigateUrlField="url"/>
        
        </DataBindings>
            
      </asp:TreeView>
      
      <asp:SiteMapDataSource ID="SiteMapSource" runat="server"/>
         
    </form>
  </body>
</html>

C#

코드 복사

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

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView AutoGenerateBindings Example</h3>
    
      <!-- Set the AutoGenerateBindings property -->
      <!-- to false declaratively to allow for   -->
      <!-- the user-defined Bindings collection. -->
      <asp:TreeView id="SiteTreeView" 
        DataSourceID="SiteMapSource"
        AutoGenerateDataBindings="False"
        runat="server">
        
        <DataBindings>
        
          <asp:TreeNodeBinding TextField="title" NavigateUrlField="url"/>
        
        </DataBindings>
            
      </asp:TreeView>
      
      <asp:SiteMapDataSource ID="SiteMapSource" runat="server"/>
         
    </form>
  </body>
</html>

다음 코드 예제에서는 이전 코드 예제에 사용되는 샘플 사이트 맵 데이터를 제공합니다.

<siteMap>
    <siteMapNode title="Home" description="Home" url="default.aspx">
        <siteMapNode title="Products" description="Products" url="Products.aspx">
            <siteMapNode title="Computers" url="Computers.aspx"/>
            <siteMapNode title="Accessories" url="Accessories.aspx"/>     
        </siteMapNode>
    </siteMapNode>
</siteMap>

다음 코드 예제에서는 클라이언트로부터 TreeView 컨트롤의 노드를 채우는 방법을 보여 줍니다. 클라이언트측 노드 채우기를 사용하면 노드가 클라이언트에서 동적으로 채워지며, 서버에 다시 게시하지 않아도 됩니다.

Visual Basic

코드 복사

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

  Sub PopulateNode(ByVal sender As Object, ByVal e As TreeNodeEventArgs)

    ' Call the appropriate method to populate a node at a particular level.
    Select Case e.Node.Depth

      Case 0
        ' Populate the first-level nodes.
        PopulateCategories(e.Node)

      Case 1
        ' Populate the second-level nodes.
        PopulateProducts(e.Node)

      Case Else
        ' Do nothing.

    End Select

  End Sub

  Sub PopulateCategories(ByVal node As TreeNode)

    ' Query for the product categories. These are the values
    ' for the second-level nodes.
    Dim ResultSet As DataSet = RunQuery("Select CategoryID, CategoryName From Categories")

    ' Create the second-level nodes.
    If ResultSet.Tables.Count > 0 Then

      ' Iterate through and create a new node for each row in the query results.
      ' Notice that the query results are stored in the table of the DataSet.
      Dim row As DataRow

      For Each row In ResultSet.Tables(0).Rows

        ' Create the new node. Notice that the CategoryId is stored in the Value property 
        ' of the node. This will make querying for items in a specific category easier when
        ' the third-level nodes are created. 
        Dim newNode As TreeNode = New TreeNode()
        Newnode.Text = row("CategoryName").ToString() 
        Newnode.Value = row("CategoryID").ToString()

        ' Set the PopulateOnDemand property to true so that the child nodes can be 
        ' dynamically populated.
        newNode.PopulateOnDemand = True

        ' Set additional properties for the node.
        newNode.SelectAction = TreeNodeSelectAction.Expand

        ' Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(newNode)

      Next

    End If

  End Sub

  Sub PopulateProducts(ByVal node As TreeNode)

    ' Query for the products of the current category. These are the values
    ' for the third-level nodes.
    Dim ResultSet As DataSet = RunQuery("Select ProductName From Products Where CategoryID=" & node.Value)

    ' Create the third-level nodes.
    If ResultSet.Tables.Count > 0 Then

      ' Iterate through and create a new node for each row in the query results.
      ' Notice that the query results are stored in the table of the DataSet.
      Dim row As DataRow

      For Each row In ResultSet.Tables(0).Rows

        ' Create the new node.
        Dim NewNode As TreeNode = New TreeNode(row("ProductName").ToString())

        ' Set the PopulateOnDemand property to false, because these are leaf nodes and
        ' do not need to be populated.
        NewNode.PopulateOnDemand = False

        ' Set additional properties for the node.
        NewNode.SelectAction = TreeNodeSelectAction.None

        ' Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(NewNode)

      Next

    End If

  End Sub

  Function RunQuery(ByVal QueryString As String) As DataSet

    ' Declare the connection string. This example uses Microsoft SQL Server 
    ' and connects to the Northwind sample database.
    Dim ConnectionString As String = "server=localhost;database=NorthWind;Integrated Security=SSPI"

    Dim DBConnection As SqlConnection = New SqlConnection(ConnectionString)
    Dim DBAdapter As SqlDataAdapter
    Dim ResultsDataSet As DataSet = New DataSet

    Try

      ' Run the query and create a DataSet.
      DBAdapter = New SqlDataAdapter(QueryString, DBConnection)
      DBAdapter.Fill(ResultsDataSet)

      ' Close the database connection.
      DBConnection.Close()

    Catch ex As Exception

      ' Close the database connection if it is still open.
      If DBConnection.State = ConnectionState.Open Then

        DBConnection.Close()

      End If

      Message.Text = "Unable to connect to the database."

    End Try

    Return ResultsDataSet

  End Function

</script>

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView PopulateNodesFromClient Example</h3>
    
      <asp:TreeView id="LinksTreeView"
        Font-Name= "Arial"
        ForeColor="Blue"
        EnableClientScript="true"
        PopulateNodesFromClient="true"  
        OnTreeNodePopulate="PopulateNode"
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Text="Inventory" 
            SelectAction="Expand"  
            PopulateOnDemand="true"/>
        
        </Nodes>
        
      </asp:TreeView>
      
      <br><br>
      
      <asp:Label id="Message" runat="server"/>

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

C#

코드 복사

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

  void PopulateNode(Object sender, TreeNodeEventArgs e)
  {

    // Call the appropriate method to populate a node at a particular level.
    switch(e.Node.Depth)
    {
      case 0:
        // Populate the first-level nodes.
        PopulateCategories(e.Node);
        break;
      case 1:
        // Populate the second-level nodes.
        PopulateProducts(e.Node);
        break;
      default:
        // Do nothing.
        break;
    }
    
  }

  void PopulateCategories(TreeNode node)
  {
    
    // Query for the product categories. These are the values
    // for the second-level nodes.
    DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");

    // Create the second-level nodes.
    if(ResultSet.Tables.Count > 0)
    {
    
      // Iterate through and create a new node for each row in the query results.
      // Notice that the query results are stored in the table of the DataSet.
      foreach (DataRow row in ResultSet.Tables[0].Rows)
      {
        
        // Create the new node. Notice that the CategoryId is stored in the Value property 
        // of the node. This will make querying for items in a specific category easier when
        // the third-level nodes are created. 
        TreeNode newNode = new TreeNode();
        newNode.Text = row["CategoryName"].ToString(); 
        newNode.Value = row["CategoryID"].ToString();        

        // Set the PopulateOnDemand property to true so that the child nodes can be 
        // dynamically populated.
        newNode.PopulateOnDemand = true;
        
        // Set additional properties for the node.
        newNode.SelectAction = TreeNodeSelectAction.Expand;
        
        // Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(newNode);
        
      }
      
    }
    
  }

  void PopulateProducts(TreeNode node)
  {

    // Query for the products of the current category. These are the values
    // for the third-level nodes.
    DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);

    // Create the third-level nodes.
    if(ResultSet.Tables.Count > 0)
    {
    
      // Iterate through and create a new node for each row in the query results.
      // Notice that the query results are stored in the table of the DataSet.
      foreach (DataRow row in ResultSet.Tables[0].Rows)
      {
      
        // Create the new node.
        TreeNode NewNode = new TreeNode(row["ProductName"].ToString());
        
        // Set the PopulateOnDemand property to false, because these are leaf nodes and
        // do not need to be populated.
        NewNode.PopulateOnDemand = false;
        
        // Set additional properties for the node.
        NewNode.SelectAction = TreeNodeSelectAction.None;
        
        // Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(NewNode);
        
      }
      
    }

  }

  DataSet RunQuery(String QueryString)
  {

    // Declare the connection string. This example uses Microsoft SQL Server 
    // and connects to the Northwind sample database.
    String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI"; 

    SqlConnection DBConnection = new SqlConnection(ConnectionString);
    SqlDataAdapter DBAdapter;
    DataSet ResultsDataSet = new DataSet();

    try
    {

      // Run the query and create a DataSet.
      DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
      DBAdapter.Fill(ResultsDataSet);

      // Close the database connection.
      DBConnection.Close();

    }
    catch(Exception ex)
    {

      // Close the database connection if it is still open.
      if(DBConnection.State == ConnectionState.Open)
      {
        DBConnection.Close();
      }
      
      Message.Text = "Unable to connect to the database.";

    }

    return ResultsDataSet;

  }

</script>

<html>
  <body>
    <form runat="server">
    
      <h3>TreeView PopulateNodesFromClient Example</h3>
    
      <asp:TreeView id="LinksTreeView"
        Font-Name= "Arial"
        ForeColor="Blue"
        EnableClientScript="true"
        PopulateNodesFromClient="true"  
        OnTreeNodePopulate="PopulateNode"
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Text="Inventory" 
            SelectAction="Expand"  
            PopulateOnDemand="true"/>
        
        </Nodes>
        
      </asp:TreeView>
      
      <br><br>
      
      <asp:Label id="Message" runat="server"/>

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

.NET Framework 보안

• AspNetHostingPermission  호스팅된 환경에서 TreeView 컨트롤을 실행하는 데 필요한 권한입니다. 연관된 열거형 값: AspNetHostingPermissionLevel.Minimal

상속 계층 구조

System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
       System.Web.UI.WebControls.BaseDataBoundControl
         System.Web.UI.WebControls.HierarchicalDataBoundControl
          System.Web.UI.WebControls.TreeView

스레드로부터의 안전성

이 형식의 모든 public static(Visual Basic의 경우 Shared) 멤버는 스레드로부터 안전합니다. 인터페이스 멤버는 스레드로부터 안전하지 않습니다.

플랫폼

Windows 98, Windows 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

.NET Framework에서 모든 플래폼의 모든 버전을 지원하지는 않습니다. 지원되는 버전의 목록은 시스템 요구 사항을 참조하십시오.

버전 정보

.NET Framework

2.0에서 지원

참고 항목

참조

TreeView 멤버
System.Web.UI.WebControls 네임스페이스
DataBoundControl.DataSourceID 속성
DataBindings
EnableClientScript
IHierarchicalDataSource
Nodes
ShowCheckBoxes
TreeNode 클래스
TreeNodeBinding 클래스
TreeNodeStyle 클래스
TreeNodeCollection 클래스
SiteMapDataSource 클래스
TreeNodeCheckChanged
SelectedNodeChanged
TreeNodeExpanded
TreeNodeCollapsed
TreeNodePopulate
TreeNodeDataBound

기타 리소스

ASP.NET 사이트 맵

http://blog.paran.com/nyxnox21/12511566