1. 소개
여러 페이지로 구성된 모든 웹사이트에는 두 단계로 생성되는 일종의 탐색 사용자 인터페이스가 필요합니다. 먼저 사이트의 논리적 구조를 정의해야 합니다. 그런 다음 사용자가 사이트 구조의 다양한 부분 간에 이동할 수 있도록 사용자 인터페이스 요소를 추가합니다. ASP.NET 2.0 이전에는 개발자가 이 두 가지 문제를 스스로 해결해야 했습니다. 그러나 버전 2.0부터 ASP.NET은 사이트 구조를 정의하는 간단한 방법을 제공하고 특히 사이트 탐색 사용자 인터페이스를 표시하도록 설계된 다양한 웹 컨트롤을 포함합니다.
이전 기사에서는 탐색 웹 컨트롤을 통해 Web.sitemap XML 사이트맵 파일을 생성하는 방법과 다음을 포함하는 사이트 탐색 정보를 표시하는 방법을 분석했습니다.
· 이동 경로를 표시하는 SiteMapPath(홈>전자제품>XBOX)
·TreeView 전체 사이트 맵 계층 구조를 표시하는 데 사용되는 축소 가능한 수직 표시 트리를 표시합니다
. 수평 또는 수직으로 정렬된 메뉴를 표시하는 메뉴
이전 문서에서는 사이트 맵 파일 및 탐색 웹 컨트롤에 대한 기능만 제공했습니다. . 이 섹션에서는 사이트 맵 정보를 프로그래밍 방식으로 제어하는 방법에 대해 살펴보고 SiteMapPath 탐색 웹 컨트롤을 자세히 살펴보겠습니다.
2. 사이트 맵
이 기사의 예에서는 1부에서 만든 사이트 맵을 사용합니다. 사이트맵 XML 파일의 정확한 구문은 1부에서 확인하거나 이 문서 끝부분에서 다운로드할 수 있습니다. 이러한 예에 사용된 사이트 구조의 그래픽 표현은 다음과 같습니다.
3. 프로그래밍 방식으로 제어되는 사이트 맵
사이트 맵은 관련 사이트 맵 노드의 모음입니다. 일반적으로 각 사이트맵 노드에는 제목, URL 및 설명이 포함됩니다. 위에 표시된 이미지는 각 직사각형이 사이트맵 노드를 나타내는 사이트맵의 예입니다. ASP.NET에서는 XML 형식 파일을 사용하는 기본 옵션을 제공하지만 사이트맵을 지정하기 위해 특정 형식이 필요하지 않습니다. (XML 파일에 대한 자세한 내용은 1부를 참조하십시오.)
ASP.NET은 사이트 맵에 대한 읽기 전용 프로그래밍 방식 액세스를 제공하는 SiteMap이라는 클래스를 제공합니다. 이 클래스는 이 문서의 뒷부분에서 분석할 두 개의 컨트롤에 의해 내부적으로 사용됩니다.
SiteMapPath - 방문한 페이지의 위치와 해당 사이트 구조를 기반으로 이동 경로를 생성합니다. 특히 SiteMapPath는 SiteMap.CurrentNode 속성에서 반환된 노드에서 시작하여 계층 구조를 따라 루트까지 이동합니다.
· SiteMapDataSource - 이 컨트롤은 계층적 데이터 소스를 생성하며 사이트 맵의 구조를 매핑합니다. TreeView 또는 메뉴와 같은 다른 웹 컨트롤에 사이트 맵 정보를 표시하기 위해 웹 컨트롤은 사이트 맵을 직접 쿼리하지 않고 대신 사이트 맵 구조 읽기를 담당하는 SiteMapDataSource 컨트롤에 바인딩합니다.
SiteMap 클래스에는 RootNode와 CurrentNode라는 두 가지 속성이 있습니다. 두 속성 모두 SiteMapNode 인스턴스를 반환합니다. SiteMapNode 클래스는 사이트 맵에 정의된 노드를 나타내며 노드를 설명하는 속성(제목, Url 및 설명)과 프로그래밍 방식으로 계층 구조를 제어하는 속성(ParentNode, ChildNodes, NextSibling, PreviousSibling 등)을 포함합니다.
자신의 ASP.NET 페이지에서 SiteMap 클래스를 사용할 수 있습니다. 예를 들어 사이트의 기본 페이지에 세 개의 HyperLink 컨트롤을 추가하고 CurrentNode에 NextSibling, PreviousSibling 또는 ParentNode가 있는지 확인하는 약간의 프로그래밍만 추가하면 모든 페이지에 다음, 이전 및 위로 링크를 표시할 수 있습니다. 특히 기본 페이지에 다음 마크업을 추가합니다.
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">작동</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">다음</asp:HyperLink>]
기본 페이지의 Page_Load 이벤트 핸들러는 다음과 같습니다.
If SiteMap.CurrentNode IsNot Nothing Then
'다음/이전/위 링크 설정 If SiteMap.CurrentNode.PreviousSibling IsNot Nothing Then
lnkPrev.NavigateUrl = SiteMap.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< 이전 (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
또 다른
lnkPrev.NavigateUrl = 문자열.비어 있음
lnkPrev.Text = "< 이전"
종료 조건
SiteMap.CurrentNode.ParentNode가 아무것도 아닌 경우
lnkUp.NavigateUrl = 사이트맵.CurrentNode.ParentNode.Url
lnkUp.Text = "위로 (" & SiteMap.CurrentNode.ParentNode.Title & ")"
또 다른
lnkUp.NavigateUrl = 문자열.비어 있음
lnkUp.Text = "위로"
종료 조건
SiteMap.CurrentNode.NextSibling이 아무것도 아닌 경우
lnkNext.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") 다음 >"
또 다른
lnkNext.NavigateUrl = 문자열.비어 있음
lnkNext.Text = "다음 >"
종료 조건
종료 이렇게 하면
기본 페이지에서 상속되는 모든 페이지에 다음, 위로 및 이전 세 개의 하이퍼링크가 추가됩니다. 아래 스냅샷을 참조하세요.
4. SiteMapPath 컨트롤을 사용하여 이동 경로를 표시합니다.
SiteMapPath 컨트롤은 이동 경로를 표시합니다. 이는 사용자에게 사이트 구조 내 위치를 표시하는 데 사용됩니다. SiteMapPath 컨트롤의 출력은 다음 세 가지 요소에 의해 결정됩니다.
· 사이트 맵에 정의된 사이트 구조
· 방문 중인 페이지
· SiteMapPath 컨트롤의 속성
값 SiteMapPath 컨트롤에 액세스하면 SiteMapPath 컨트롤은 페이지의 URL 매핑을 사이트맵에 정의된 사이트맵 노드의 URL 값으로 변환하려고 시도합니다. 일치하는 항목이 발견되면 컨트롤은 구조를 루트까지 탐색하고 RootNode>ParentNode>...>ParentNode>CurrentNode 출력을 생성합니다. 여기서 CurrentNode는 사이트맵 노드의 제목입니다. 현재 페이지 요청의 URL을 매핑하는 데 사용됩니다. 사이트맵 노드에 사이트맵에 정의된 URL 값이 있는 경우 RootNode 및 ParentNode가 하이퍼링크로 생성됩니다. "History Books" 페이지(Books/History.aspx)의 SiteMapPath 컨트롤은 Home>Books>History를 생성하고 각각 Default.aspx 및 Books/Default.aspx를 다시 가리키는 하이퍼링크 형태로 Home 및 Books도 생성합니다. . Books/Default.aspx에 액세스하면 SiteMapPath가 Home>Books를 생성합니다.
명확히 말하면 SiteMapPath의 출력은 사이트맵 자체와 방문하는 페이지에 따라 달라집니다. SiteMapPath의 출력은 이 컨트롤의 속성을 통해 사용자 지정할 수 있습니다. 표준 웹 컨트롤 형식에는 BackColor, Font, ForeColor 등과 같은 일부 속성이 있으며 다음을 포함하여 SiteMapPath와 관련된 일부 설정이 있습니다.
u PathDirection - RootToCurrent(기본값) 또는 CurrentToRoot의 두 값 중 하나를 사용할 수 있습니다. 값이 RootToCurrent이면 "History Books" 페이지의 이동 경로가 Home>Books>History로 생성되고, 값이 CurrentToRoot이면 출력은 History>Books>Home이 됩니다.
·PathSeparator - 이동 경로에서 각 노드를 구분하는 데 사용되는 문자열을 지정합니다. 기본값은 >입니다.
·RenderCurrentNodeAsLink - 부울 속성 - CurrentNode가 링크로 생성되어야 하는지 여부를 지정합니다.
·ParentLevelsDisplayed - 정수 값 - 이동 경로에 의해 표시되는 트리 구조의 높이를 제한하는 데 사용할 수 있습니다. 기본적으로 이 속성의 값은 -1입니다. 이는 제한이 없음을 의미합니다. 값을 1로 설정하면 "History Books" 페이지에 이동 경로 Books>History가 생성됩니다. SiteMapPath 컨트롤은 "History"에서 "Book"까지 하나의 상위 항목까지만 통과하므로 루트는 포함되지 않습니다.
· ShowToolTips - 사이트맵 노드에 설명 값이 있는 경우 이 속성이 True(기본값)로 설정되어 있으면 설명은 각 이동 경로 노드에 대한 도구 설명 텍스트로 표시됩니다.
SiteMapPath 컨트롤의 다양한 부분에 대해 BackColor, Font, ForeColor 등을 설정하는 데 사용할 수 있는 스타일 속성도 있습니다. NodeStyle 속성을 사용하여 이동 경로의 노드 모양을 사용자 정의할 수 있습니다. RootNodeStyle 및 CurrentNodeStyle을 사용하여 탐색 경로의 첫 번째 노드와 마지막 노드를 추가로 사용자 정의할 수 있습니다. 일반적으로 SiteMapPath 컨트롤의 형식을 지정하는 가장 쉽고 미학적으로 만족스러운 방법은 "자동 형식" 마법사를 사용하는 것입니다. 이 마법사는 컨트롤의 민감한 태그를 통해 활성화할 수 있습니다.
5. 템플릿을 사용하여 생성된 출력 사용자 정의
SiteMapPath에는 4개의 템플릿이 포함되어 있어 생성된 출력을 추가로 사용자 정의할 수 있습니다. 템플릿을 사용하면 정적 HTML 태그, 웹 컨트롤 및 데이터 바인딩 구문을 혼합할 수 있습니다. 이전에 DataList 또는 Repeater 컨트롤을 사용해 본 적이 있다면 이미 템플릿에 익숙할 것입니다. ASP.NET 2.0의 템플릿은 기본적으로 ASP.NET 1.x와 동일합니다. 단, ASP.NET 2.0에는 데이터 바인딩 식을 위한 몇 가지 새롭고 더 간결한 구문이 도입되었습니다. 예를 들어 ASP.NET 1.x에서는 열 값을 가져오려면 <%# DataBinder.Eval(Container.DataItem, PropertyName) %> 구문을 사용해야 합니다. ASP.NET 2.0에서는 이 이전 구문을 계속 사용할 수 있지만 선택적으로 더 짧은 버전인 <%# Eval(PropertyName) %>을 사용할 수도 있습니다.
기본적으로 SiteMapPath는 루트 및 상위 노드를 일반 하이퍼링크로 생성하므로 사용자가 링크를 클릭하면 컨트롤 계층 구조 트리 위로 빠르게 이동할 수 있습니다. 그러나 정보를 사용자에게 다시 보내기 전에 일부 서버 측 처리를 수행하고 싶을 수도 있습니다. 사용자가 어디로 가는지 기록하거나 페이지에 대한 변경 사항을 자동으로 저장하고 싶을 수도 있습니다. 이는 템플릿을 사용하고 노드를 LinkButton으로 생성하여 수행할 수 있습니다.
예를 들어 SiteMapPath의 루트 노드를 LinkButton으로 생성하려는 경우 다음 태그를 사용하여 SiteMapPath 컨트롤에 <RootNodeTemplate>을 추가할 수 있습니다.
<asp:SiteMapPath ID="SiteMapPath1" runat="server" >
<루트노드 템플릿>
<asp:LinkButton ID="LinkButton1" runat="서버"
Text='<%# 평가("제목") %>'
CommandArgument='<%# Eval("url") %>'
OnCommand="LinkButton1_Command">
</asp:링크버튼>
</RootNodeTemplate>
</asp:SiteMapPath>
이 태그는 LinkButton 컨트롤을 SiteMapPath에 추가합니다. 해당 Text 속성은 해당 SiteMapNode의 Title 속성에 할당됩니다. LinkButton을 클릭하면 포스트백이 발생하고 컨트롤의 Command 이벤트가 실행됩니다. 그러면 LinkButton1_Command 이벤트 처리기가 활성화됩니다. SiteMapNode의 Url 속성은 CommandArgument 속성을 통해 이 이벤트 처리기에 전달됩니다. 이 이벤트 처리기에서는 필요한 모든 서버측 처리를 수행한 다음 Response.Redirect(e.CommandArgument)를 통해 요청한 페이지로 사용자를 안내할 수 있습니다.