NET 2.0 에서 제공되는 TreeView사용법

일단 제가 사용하고 있는 컨트롤 위주로 설명을 할까 해서 이렇게 올립니다.

2.0에서는 개발자가 메뉴부분을 구성하는데 있어서 굉장히 간편한 컨트롤이 제공 됩니다.

그중 하나가 TreeView인데요. 반복적인 코드를 피할려면 마스터 페이지에 넣고 사용하는게 더욱 좋은 컨트롤 입니다.

일단 TreeView는 다른 탐색컨트롤과 마찬가지로 "Web.sitemap"이 필요 합니다.

루트에서 "새 항목 추가"를 누르시면 여러가지 아이템들이 있는데 그중 "사이트 맵"을 선택하시면 파일이름에 "Web.sitemap"라고 자동으로 나오는 것을 볼 수 있습니다.

"사이트 맵"파일을 추가하시고 코드를 보면(태그라고 해야하나요?)

01: <?xml version="1.0" encoding="utf-8" ?>

02:<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

03:<siteMapNode url="" title="" description="">

04:<siteMapNode url="" title="" description="" />

05:<siteMapNode url="" title="" description="" />

06:</siteMapNode>

07:</siteMap>

위와 같은 내용을 볼 수 있으실 겁니다. XML문서로 "사이트 맵"을 위한 문서인데요.

XML은 루트를 가져야 함으로 3번째 라인과 6번째 라인의 큰 메뉴를 가지게 됩니다. 그안에 4, 5번째라인 처럼 하나의 노드를 가지게 되는데요.

이 노드들의 속성들안에 페이지들의 파일명과 이름을 넘겨주면 사용가능한 "사이트 맵"파일이 됩니다.

그럼 예를 들어 설명하겠습니다.

Home ----- 자기소개

-- 게시판

일단 3개의 페이지가 필요 하겠죠? 그럼 Home은 "Default.aspx"로 하고 자기소개는 "Introduce.aspx"로 하고 마지막으로 게시판은 "Board.aspx"로 하겠습니다.

세개의 페이지를 생성 하셨으면.

3번째라인의 노드에 속성을 각각 부여 합니다. 'url'에는 해당 페이지의 주소를 넣는데 루트에 파일을 생성 했으므로 "~/Default.aspx"를 넣습니다.

여기서 '~/'를 넣는건 해당 홈페이지의 루트에 있다는걸 말해줍니다. 만일 루트뒤에 "Profile"이라는 폴더를 추가하고 거기에 "Default.aspx"를 사용 하시려면 "~/Profile/Default.aspx"로 해주면 됩니다.

Home의 페이지를 지정해 줬으면 Home의 이름을 지정해 줘야 겠죠. 'TreeView'에 표시될 이름을 지정하는 것은 'title'에 "Home"이라고 넣어 주면 됩니다.

그리고 제일 마지막에 있는 'description'은 마우스를 해당 메뉴에 올려 놨을때 표시되는 속성입니다.

이런식으로 "Web.sitemap"을 완성 시키면 아래와 같은 내용으로 됩니다.

01:<?xml version="1.0" encoding="utf-8" ?>

02:<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

03:<siteMapNode url="~/Default.aspx" title="Home" description="웹사이트의 첫 페이지 입니다.">

04:<siteMapNode url="~/Introduce.aspx" title="자기소개" description="웹사이트의 주인장 소개 입니다." />

05:<siteMapNode url="~/Board.aspx" title="게시판" description="웹사이트에 질문을 올리는 곳 입니다." />

06:</siteMapNode>

07:</siteMap>

위와 같이 완성이 되었으면 각각의 페이지에 "TreeView"를 올려 놔야겠죠?

올리기전에 필요한 컨틀롤이 있습니다.

디자인 모드에서 왼쪽의 "데이터"부분에 "SiteMapDataSource"를 추가해 주셔야 합니다.

"SiteMapDataSource"는 어느 위치에 있던지 상관이 없으며, "Web.sitemap"을 따로 지정해주지 않아도 기본으로 루트의 "Web.sitemap"를 찾아서 데이터를 가져옵니다.

이 데이터를 바인딩 하는것이 "TreeView"인데 위의 "SiteMapDataSource"를 추가하셨으면 "TreeView"컨트롤을 올립니다.

"TreeView"는 자동으로 "SiteMapDataSource"을 가져오지 않습니다. 그래서 "SiteMapDataSource"의 ID를 지정해주는데.

이름을 바꾸지 않으셨으면 "SiteMapDataSource1"란 ID로 생성이 되었을 것입니다.

이 아이디를 올려놓은 "TreeView"의 속성창을 보면있는 "DataSourceID"에 넣으면 그걸로 끝 입니다.

장황하게 말은 많았지만 아주 간편한 방법이죠.

또한 "TreeView"의 색상이나 스타일도 VS2005의 스마트 태그에 "AutoFormat(자동서식)"을 이용하여 쉽게 바꿀 수 있습니다.

접었다 폈다하는 과거에는 따로 넣어야 했던 기능들도 자동으로 구현이 되구요.

이 컨트롤을 데이터 소스와 함께 마스터 페이지에 올려 놓으면 귀찮게 코딩을 하지 않아도.

트리 형식의 메뉴를 구현 할 수 있습니다.

또한 자신이 현재보고 있는 페이지도 자동으로 표시가 가능하구요~.

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
<providers>
<add name="XmlSiteMapProvider" description="SiteMap provider which reads in .sitemap XML files." type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.3600.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

===== 이부분입니다.==========
siteMapFile="~/Master/Web.sitemap"
========================

securityTrimmingEnabled="true"/>
</providers>
</siteMap>

web.config 환경설정 파일에 위의 코드를 입력하면 됩니다.
속성중에 siteMapFile에다가 원하는 위치를 적어주시면 되겠죠? ^^

출처 : http://blog.naver.com/designguy