여러 페이지를 이동할때 현재 페이지가 전체사이트에서 어느위치에 해당하는지를 나타내고 그 기준에서 다른 페이지로의 이동을 쉽게 구현한 것이 사이트네비게이션입니다.

ASP.NET에서도 사이트네비게이션 구현을 위한 방안이 마련되어 있는데 방법은 다소 복잡해 보이지만 일단 한번 적용하고 나면 관리가 쉬어진다는 장점이 있습니다. 이를테면 사이트의 전체구조중 특정 페이지의 이름이 바뀌는 경우라면 수동으로 사이트네비게이션을 구현했을때 해당 페이지가 표시되는 모든 부분을 찾아 일일이 수정해야 하지만 ASP.NET에서는 sitemap파일 하나를 수정하는 것으로 마무리할 수 있습니다.

ASP.NET에서 사이트네비게이션 구현을 위해서는 우선 sitemap파일을 만들어야 합니다. 이 파일은 XML형태로 된 파일로서 사이트의 페이지와 해당 페이지를 설명하는 구조로 되어 있습니다.

sitemap파일 생성을 위해 project에서 마우스 오른쪽 클릭해 Add -> New Item 을 선택하고 Site Map아이템 항목을 선택한 뒤 'Add'버튼을 눌러줍니다.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="" title=""  description="" />
        <siteMapNode url="" title=""  description="" />
    </siteMapNode>
</siteMap>

생성된 site map파일의 기본 구조는 위와 같습니다. siteMapNode에 페이지가 1:1로 지정되는 형식이며 url은 페이지의 주소를 title은 사이트네비게이션에 표시될 제목을, description은 해당 페이지의 설명에 해당합니다. description은 사이트네비게이션에 표시되지는 않지만 제목부분에 마우스를 올렸을때 툴팁형태로 해당 내용이 표시됩니다.

우선 사이트에 전체적으로 3개의 페이지가 아래와 같이 존재하는 것으로 시작해 보겠습니다.

처음 Default페이지가 있고 Computer 하위에 cpu와 memory페이지가 존재합니다. 이 구조를 위에서 만든 site map파일이 옮기면 다음과 같이 할 수 있을 것입니다.

<?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="/Computer/cpu.aspx" title="시피유"  description="시피유에 대한 설명입니다." />
        <siteMapNode url="/Computer/memory.aspx" title="메모리"  description="메모리에 대한 설명입니다." />
    </siteMapNode>
</siteMap>

대부분의 경우 사이트에서 같은 위치에 Default이외의 시작페이지가 다수 존재하는 경우 site map파일에서 필요한 만큼의 siteMapNode요소를 siteMap요소 하위에 배치하고 하위페이지는 다시 하위siteMapNode를 생성하는 식으로 구조를 정의합니다. 그런데 이 구조는 논리적인 것으로 사이트의 실제 구조를 site map파일과 반드시 동일하게 맞춰줄 필요는 없습니다.

무슨 말인가 하면 site map파일에서는 cpu와 memory 2개의 페이지가 Computer하위에 있다는 의미로 다시 말해 Default페이지 위치에서 특정 디렉토리 하위에 있다는 의미로 Default페이지가 있는 siteMapNode요소 하위에 cpu와 memory에 대한 siteMapNode를 정의하였지만 실제 사이트의 구조는 이와 다를 수 있다는 것입니다.

예제에서는 Computer하위에 cpu와 memory 2개의 페이지가 존재하는데 이들 페이지가 Computer에 있지 않고 Default페이지와 같은 위치에 있다 하더라도 전혀 문제가 되지 않습니다. site map파일은 사이트의 구조를 논리적으로 정의한 것일 뿐이므로 단지 siteMapNode의 url만 정확하도록 관리하면 됩니다.

완성된 sitemap XML 파일을 실제 페이지에 표시하기 위해 사용하는 컨트롤이 SiteMapPath입니다. 해당 컨트롤을 사용하는 방법은 간단한데 그저 컨트롤을 페이지에 끌어다 놓기만 하면 됩니다.

<form id="form1" runat="server">
    <div>

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

위 예제는 Computer/cpu.aspx의 내용으로서 해당 페이지를 열어보면 다음과 같이 출력됨을 알 수 있습니다.

SiteMapPath 컨트롤은 또한 사용자에게 네이게이션을 표시하기 위한 몇가지 유용한 설정을 포함하고 있으며 아래 내용을 참고해 주시기 바랍니다.

(1) PathSeparator

네비게이션에 표시되는 각 항목을 분리해서 보여주는 문자를 지정합니다. 기본문자 > 에서 | 문자로 변경하고자 한다면 다음과 같이 설정합니다.

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

또는 자식 PathSeparatorTemplate 요소를 사용할 수도 있습니다.

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

PathSeparatorTemplate을 사용하면 단순한 문자를 벗어나 이미지나 심지어 특정 html태그까지도 분리문자로 활용할 수 있습니다. 사실한 분리문자로 표현하는 대상에 거의 제한이 없는 셈입니다.

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
    <PathSeparatorTemplate>
        <table border="1">
            <tr>
                <td>|</td>
            </tr>
        </table>
    </PathSeparatorTemplate>
</asp:SiteMapPath>

참고로 분리문자에 특별한 스타일을 입혀야 하는 경우에는 PathSeparatorStyle 요소를 사용할 수 있습니다.

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
    <PathSeparatorTemplate>|</PathSeparatorTemplate>
    <PathSeparatorStyle ForeColor="Red" />
</asp:SiteMapPath>

위 예제는 분리문자를 붉은색으로 표시할 것입니다.

이 외에도 다른 페이지로 이동하는 링크의 스타일에는 CurrentNodeStyle을 사용할 수 있으며 현재 링크자체에 대한 템플릿은 CurrentNodeTemplate으로 정의합니다. 특별히 최상위 루트에 관한 것이라면 RootNodeStyle과 RootNodeTemplate이 있으며 이 모든 스타일과 템플릿을 한곳에서 정의하려면 NodeStyle과 NodeTempate을 사용하면 됩니다.

(2) PathDirection

이 속성의 기본값은 RootToCurrent 이며 네비게이션을 최상위 페이지에서 하위페이지 순으로 표시합니다(기본값). 만약 이 속성을 CurrentToRoot로 바꾼다면 네비게이션 표시순서가 반대로 표시될 것입니다.

(3) ParentLevelsDisplayed

네비게이션에 표시될 페이지단계가 너무 많을 경우 상위 레벨에 해당하는 단계는 건너뛸 수 있습니다. 예를 들어 이 값을 2로 설정할 경우 최상위 위치를 포함해 하위 2번째까지의 단계를 생략하고 그 이후의 단계들만 네비게이션으로 표시할 것입니다.

(4) ShowToolTips

이 속성을 false로 설정하면 sitemmap에 설정한 description내용이 툴팁으로 표시되지 않습니다.

모든 사이트맵 구조를 반드시 하나의 sitemap파일에 정의할 필요는 없습니다. sitemap파일은 여러개 생성될 수 있으며 web.sitemap에 해당 파일에 대한 정보만 적절히 제공하면 됩니다.

예를 들어 기본적인 web.sitemap파일 이외에 아래와 같은 내용의 사이트맵 파일이 a.sitemap라는 이름으로 하나더 존재한다고 가정해 보겠습니다.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="animal.aspx" title="동물"  description="동물안내페이지">
        <siteMapNode url="cat.aspx" title="고양이"  description="고양이안내" />
        <siteMapNode url="dog.aspx" title="강아지"  description="강아지안내" />
    </siteMapNode>
</siteMap>

이 a.sitemap파일을 web.sitemap에서 siteMapNode로 다음과 같이 마지막부분에 추가합니다.

<siteMapNode url="/Car/sedan.aspx?" title="자동차" description="자동차에 대한 설명입니다.">
  <siteMapNode url="/Car/sedan.aspx" title="승용차"  description="승용차에 대한 설명입니다." />
  <siteMapNode url="/Car/truck.aspx" title="트럭"  description="트럭에 대한 설명입니다." />
</siteMapNode>
<siteMapNode siteMapFile="a.sitemap"></siteMapNode>

그러면 다음과 같이 사이맵이 추가될 것입니다.

사이트 맵을 중첩하는 또 다른 방법으로 사이트맵 공급자를 이용하는 것입니다. 새로운 사이트맵 공급자를 web.config에 다음과 같이 추가합니다.

<siteMap>
  <providers>
    <add siteMapFile="a.sitemap" name="AspNetXmlSiteMapProvider2" type="System.Web.XmlSiteMapProvider, 

System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
  </providers>
</siteMap>

공급자를 추가하는 것이므로 공급자 이름을 AspNetXmlSiteMapProvider2 등으로 기존 이름과는 다른 이름을 지정하고 siteMapFile을 새롭게 만든 a.sitemap파일로 설정합니다.

그리고 web.sitemap에서 siteMapNode를 추가하면 되는데 대신 siteMapFile속성이 아닌 provider속성으로 위에서 추가한 공급자이름을 지정하면 됩니다.

<siteMapNode provider="AspNetXmlSiteMapProvider2"></siteMapNode>

SiteMap 클래스는 sitemap 데이터자체를 메모리에 저장하고 프로그래밍 방식으로 제어할 수 있도록 해줍니다. 특히 이 클래스에서 중요한건 CurrentNode속성인데 사이트맵에 관련된 대부분의 작업을 처리할 수 있습니다.

string smap = SiteMap.CurrentNode.HasChildNodes + "<br />" + //하위 노드를 가지고 있는가?
            SiteMap.CurrentNode.ParentNode.ToString() + "<br />" + //부모 노드
            SiteMap.CurrentNode.RootNode.ToString() + "<br />" + //최상위 노드
            SiteMap.CurrentNode.NextSibling.ToString() + "<br />" + //다음페이지(계층구조상으로)
            SiteMap.CurrentNode.PreviousSibling.ToString() + "<br />" + //이전페이지(계층구조상으로)
            SiteMap.CurrentNode.Title + "<br />" + //맵 제목
            SiteMap.CurrentNode.Url.ToString() + "<br />"; //맵 URL

Response.Write(smap);

ASP.NET에는 국제적인 서비스를 하는 사이트의 경우 지역화를 통해 웹사이트 방문자의 브라우저 언어에 따라 해당 언어로 표시할 수 있는 기능이 있으며 이 기능은 사이트맵에도 동일하게 적용됩니다.

사이트맵에 대한 지역화를 구현하려면 우선 sitemap파일을 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" enableLocalization="true">
    <siteMapNode url="Default.aspx" title="시작페이지"  description="시작페이지입니다.">
      <siteMapNode url="/Computer/cpu.aspx" resourceKey="cpu">
        <siteMapNode url="/Computer/cpu.aspx?lang=en" resourceKey="cpu" />
        <siteMapNode url="/Computer/memory.aspx" title="메모리"  description="메모리에 대한 설명입니다." />
      </siteMapNode>
      <siteMapNode url="/Car/sedan.aspx?" title="자동차" description="자동차에 대한 설명입니다.">
        <siteMapNode url="/Car/sedan.aspx" title="승용차"  description="승용차에 대한 설명입니다." />
        <siteMapNode url="/Car/truck.aspx" title="트럭"  description="트럭에 대한 설명입니다." />
      </siteMapNode>
    </siteMapNode>
</siteMap>

siteMap 루트 노드에 enableLocalization속성을 true로 설정하여 지역화기능을 켜고 지역화를 구현할 해당 페이지에 resourceKey값을 설정합니다. 예제에서는 cpu.aspx만 지역화를 설정했는데 두개모두 cpu로 키값을 정했습니다.(두번째 cpu.aspx에는 lang=en이라는 파라메터를 설정했는데 이는 동일한 주소가 sitemap에 들어갈 수 없으므로 임시로 작성한 것입니다. 아무 의미없으니 무시하십시오. 필요에 따라서는 그냥 ?만 붙여줘도 됩니다.)

그러다음 프로젝트에 App_GlobalResources 라는 이름의 폴더를 생성하고 하위에 다음과 같은 이름의 resx 리소스파일을 2개 생성합니다.

Web.sitemap.resx

Web.sitemap.en.resx

짐작하겠지만 sitemap.resx파일은 디폴트 리소스파일이고 sitemap.en.resx는 영어권을 위한 리소스파일입니다. 위 2개의 리소스파일을 생성하고 cpu. 으로 시작하는 이름과 값을 입력합니다.

cpu. 으로 이름값이 시작하는 이유는 앞서 sitemap파일에 리소스키값(resourceKey)을 cpu로 했기 때문입니다.

이제 마지막으로 web.config의 culture와 uiCulture속성을 수정하여 웹 프로그램이 자동으로 사용자의 웹브라우저에 대한 언어를 자동으로 탐지하도록 해야합니다.

<globalization culture="auto" uiCulture="auto"/>

위 설정은 web.config의 system.web하위에 추가되어야 하는데 다만 web.config직업 수정을 할 수 없는 경우나 특정 페이지에만 적용해야 하는 경우에는 해당 페이지의 @Page지시문에 똑같은 속성으로 culture와 uiCulture 속성을 추가하면 됩니다. 하지만 이 경우 언어탐지가 필요한 모든 페이지에 일일이 해당 속성을 설정해야 하는 번거로움이 존재합니다.

여기까지 마치면 웹브라우저가 cpu페이지를 호출할때 해당 설정된 언어로 sitemap을 보여줄 것입니다.

▶ 브라우저가 영어권으로 설정된 경우의 결과 페이지

sitemap을 구성한 후 menu나 TreeView컨트롤에 매핑하여 사이트맵에대한 메뉴를 구성하면 사용자가 원하는 메뉴를 클릭하여 필요한 페이지로 이동할 것입니다. 그런데 어떤 페이지의 경우 관리자만이 볼 수 있는 영역에 해당한다면 일반 사용자에게는 해당 페이지를 보이지 않게 해야 하는데 이런 경우 보안 트리밍을 설정하면 원하는 기능을 구현할 수 있습니다.

예를 들어 위 예제에서 memory.aspx페이지가 관리자만이 볼 수 있는 페이지고 다른 일반 사용자에게는 보여줄 필요가 없는 경우, 이 페이지에 대한 보안트리밍을 다음과 같은 방법으로 설정하십시오.

우선 원하는 페이지의 siteMapNode에 roles속성을 부여하여 접근을 허가하고자 하는 역활을 설정합니다.

<siteMapNode url="/Computer/memory.aspx" title="메모리" roles="Admin" description="메모리에 대한 설명입니다." />

예제에서는 관리자라는 의미로 Admin이라는 역활을 부여했습니다. Admin이라는 명칭에 집중할 필요 없습니다. 이것은 원하면 어떤단어는 원하는대로 쓸 수 있습니다. 그리고 프로젝트의 web.config에서 <system.web>하위에 다음 내용을 추가하여 역활 관리 시스템을 사용할 수 있도록 합니다.

<authentication mode="Forms"/>
<roleManager enabled="true">

roleManager를 enabled="true"로 설정하면 ASP.NET전체 시스템에 대해 역활구성을 가능하게 합니다.

마지막으로 사이트 네비게이션의 공급자 설정을 다음과 같이 변경합니다.

<siteMap>
  <providers>
    <clear />
    <add siteMapFile="web.sitemap" name="AspNetXmlSiteMapProvider" 

type="System.Web.XmlSiteMapProvider, System.Web, Version=4.0.0.0, Culture=neutral, 

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

위 내용도 역시 web.config의 <system.web>하위에 추가하면 됩니다. 참고로 <providers>하위에 <clear />은 기존 공급자 시스템을 제거하고 새로운 공급자를 선언하겠다는 의미인데 자세한 내용은 아래 글을 참고해 주십시오.

2016/02/03 - [Programming/ASP.NET] - [ASP.NET] 공급자 모델 - 2

해당 공급자에서 securityTrimmingEnabled 속성을 true로 하여 보안트리밍이 활성화 된것을 확인할 수 있습니다. 만약 공급자의 내용 전체를 새로 작성하기가 까다롭다면 상위의 web.config나 machine.config에서 같은 공급자의 선언을 그대로 복사해와 securityTrimmingEnabled속성만 추가해주면 됩니다.

예제에서는 memory.aspx페이지에 관리자 권한으로 접근을 제한할 것이므로 memory.aspx페이지가 존재하는 폴더에 web.config파일을 다음과 같은 내용으로 생성하도록 합니다.

<?xml version="1.0"?>
<configuration>
  <location path="memory.aspx">
    <system.web>
      <authorization>
        <allow roles="Admin"/>
        <deny users="*"/>
      </authorization>
    </system.web>
  </location>
</configuration>

위와 같은 내용으로 web.config를 설정해 두는 이유는 허가받지 않은 일반 사용자가 memory.aspx에 접근할자동으로 접근을 거부하게끔 하기 위함입니다. 물론 같은 내용을 프로젝트의 메인 web.config에 설정하는 것도 가능하지만 예제에서는 일단 뚜렷한 구분을 위해 web.config를 분리하여 작성하였습니다.

이제 페이지를 실행시켜 보면 해당 메뉴가 보이지 않음을 확인할 수 있습니다. 현재는 해당 웹프로그램에 로그인하지 않은 익명사용자이기에 관리자권한이 부여되지 않았기 때문입니다.

그럼 이제 새로운 관리자 역활을 생성하고 임의의 사용자를 해당 관리자 역활에 추가하여 로그인을 시도해 보고록 하겠습니다. 로그인 후 memory.aspx에 관한 네비게이션 메뉴가 보여지는지를 확인하면 됩니다.

우선 Default.aspx에 버튼컨트롤을 하나 배치하고 클릭이벤트에 다음과 같은 코드를 작성합니다.

<asp:button runat="server" text="Button"  OnClick="Unnamed_Click" />

protected void Unnamed_Click(object sender, EventArgs e)
{
    Roles.CreateRole("admin");
    Roles.AddUserToRole("cliel", "admin");
    FormsAuthentication.RedirectFromLoginPage("cliel", false);
}

버튼의 클릭이벤트 안에 작성된 첫번째 줄은 admin이라는 새로운 역활을 생성하는 것입니다. 그리고 두번째줄에서 cliel사용자를 방금 생성한 admin역활에 추가하고 세번째줄에서 cliel사용자에 대한 로그인을 처리합니다.

프로그램을 실행하여 버튼을 클릭한 후 다시 네비게이션 메뉴를 확인합니다.

정상적으로 메모리메뉴(memory.aspx)가 보임을 알 수 있습니다.

참고로 사용자의 역활시스템은 기본적으로 내부의 Microsoft SQL Server Express 데이터베이스인 MDF에 저장됩니다. 이 파일은 프로젝트의 App_Data폴더(App_Data폴더에도 적당한 사용자 권한이 부여되어 있어야 합니다.)에 저장되며 프로그램이 구동되는 서버나 컴퓨터에 Microsoft SQL Server Express가 설치되어 있어야 합니다. 만약 이 저장소를 바꾸고자 한다면 공급자를 수정해야 합니다.