Creative Commons License

Microsoft .NET

닷넷!시작하기
닷넷! Ver 2.0~
닷넷!스킬업
웹개발
윈폼개발
실용모듈개발
Tip & Tech
하루 한 문법

Microsoft .NET 개발자들을 위한 공간입니다. 기초강의에서 부터 고급 기술 정보 및 팁등을 다루도록 하겠습니다.

.

웹개발

이제 웹 기반 응용개발 지식은 거의 필수적으로 요구되는 시대입니다. 구체적인 웹 사이트 개발은 아니더라도 거시적인 웹 기반 서비스에 대한 지식 배양을 위해 할 것이 참 많네요 ^^

[ASP.NET] SiteMap 을 이용한 웹 Navigation 제작

작성자 : 박종명
최초 작성일 : 2008-06-25 (수요일)
최종 수정일 : 2008-06-25 (수요일)
조회 수 : 5239

* SiteMap 을 이용한 웹 Navigation 제작

 

웹 사이트에는 많은 페이지들이 존재하며 각 페이지 들은 서로간 수평,수직의 구조를 가지고 있다.

, Dept 개념으로 상위 페이지에 해당하는 하위 페이지들이라는 개념이다.

예를 들어 네이버의 다음과 같은 구조를 말한다.

 

 

위와 같이 신문이라는 페이지는 뉴스,미디어라는 상위 페이지에 소속되어 있다.

 

웹 사이트에서는 사용자의 편리성을 돕기 위해 위와 같은 경로에 대한 Navigation Bar 를 제공하기도 한다.


닷넷 2.0 에서는 이와 같은 처리를 프레임워크 차원에서 지원해 준다.

비단, Navigation 뿐만 아니라 ‘Menu’ 컨트롤이나 ‘TreeView’ 와 같은 탐색 구조적 컨트롤에 미리 정의한 XML 기반의 SiteMap 파일을 연결함으로써 자동으로 메뉴구성이 가능토록 해준다.

 

개발자는 사이트의 컨텐츠의 구조만 정의하면 나머지는 프레임워크가 다 알아서 해준다.

데모를 통해서 살펴보자.

 

 

SiteMap 파일을 정의해서 Navigation Bar 와 연동하기

 

일단 사이트 맵 파일부터 만들어야 한다. VS 에서 새 항목 추가 -> 사이트 맵을 선택하면 Web.sitemap 파일이 생성된다. Web.sitemap 파일에 다음과 같이 정의하자.

 

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

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

      <siteMapNode url="~/Default.aspx" title=""  description="홈 입니다">

        <siteMapNode url="~/Parent.aspx" title="부모페이지"  description="부모페이지 입니다">

          <siteMapNode url="~/ChildPage.aspx" title="자식페이지"  description="자식페이지 입니다" />

        </siteMapNode>       

      </siteMapNode>     

</siteMap>

 

그리고 Default.aspx 페이지에 ‘SiteMapPath’ 컨트롤을 올린다.

SiteMapPath 컨트롤이 바로 Navigation Bar 역할을 하는 놈이다.

 

<asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>

 

이와 같이 정의되는 SiteMapPath 컨트롤은 응용프로그램의 web.sitemap 를 인식해 Navigation Bar

자동으로 생성해 준다.

 

아래 그림은 실행 결과 이다.

 

siteMapNode 엘리먼트의 title 속성으로 표시되며 description 속성은 마우스오버 시 나타나는 팝업 메시지로 표시된다.

 

SiteMap 파일을 정의해서 TreeView 와 연동하기

역시 앞의 Web.stemap 을 이용한다.

Default.aspx TreeView 를 하나 올리면 데이터 소스를 선택하도록 하는 스마트 작업장이 뜬다.

여기서 SiteMapDataSource 를 새로 만들다. 이렇게 하면 TreeView DataSourceID 로 방금 만든 SiteMapDataSource ID 와 매핑된다.

 

아래 그림은 실행 결과 이다.

 

자동으로 Treeview 컨트롤에 사이트맵 에서 정의한 구조가 적용되었다.

 

 

≡ 자식 SiteMap 파일을 이용하기

 

Web.sitemap 파일에 siteMapNode 를 다른 sitemap 파일로 설정할 수 있다. 앞에서 정의한 Web.sitemap 파일을 다음과 같이 수정하자.

 

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

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

      <siteMapNode url="~/Default.aspx" title=""  description="홈 입니다">

        <siteMapNode url="~/Parent.aspx" title="부모페이지"  description="부모페이지 입니다">

          <siteMapNode url="~/ChildPage.aspx" title="자식페이지"  description="자식페이지 입니다" />

        </siteMapNode>

<siteMapNode siteMapFile="~/Etc.sitemap" />      

      </siteMapNode>     

</siteMap>

 

siteMapFile 속성으로 Etc.sitemap 파일을 설정하고 있다.

 

Etc.sitemap 파일도 web.sitemap 파일과 동일한 스키마를 가지는 xml 파일이다.

이렇게 별도의 sitemap 파일을 만들어서 Web.sitemap siteMapNode 로 지정할 수 있다.

  

만일 sitemap 파일을 사용하려면 반드시 web.sitemap 파일이 존재 해야 한다.

즉 이 파일의 이름을 임의로 변경하면 다음과 같은 예외 메시지를 보게 될 것이다.

“XmlSiteMapProvider에 필요한 web.sitemap 파일이 없습니다.”

 

 

* 첨부파일에 이 내용에 대한 샘플 소스가 포함되어 있습니다

이름
비밀번호
홈페이지
OT <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요