연습: 웹 페이지에 메뉴 표시

Visual Studio 2010

이 연습에서는 웹 페이지에 ASP.NET Menu 컨트롤을 배치하고 구성하는 방법을 보여 줍니다.

웹 사이트의 복잡성과 관계없이 여러 웹 사이트가 갖는 한 가지 공통점은 탐색 메뉴입니다. ASP.NET의 Menu 컨트롤을 사용하여 코드를 작성하지 않고도 복잡한 탐색 메뉴를 쉽게 설정할 수 있습니다.

Menu 컨트롤은 메뉴가 완전히 노출되는 정적 표시와 마우스 포인터를 부모 메뉴 항목으로 가져가면 메뉴의 일부가 표시되는 동적 표시를 비롯한 여러 표시 옵션을 허용합니다. 또한 이 컨트롤은 정적 및 동적 디스플레이 모드 조합도 제공합니다. 이러한 모드에서는 일련의 루트 항목은 정적이지만 자식 메뉴 항목은 동적으로 나타날 수 있습니다.

디자이너에서 페이지에 대한 정적 링크를 포함하도록 ASP.NET Menu 컨트롤을 구성하거나 XmlDataSource 또는 SiteMapDataSource 컨트롤과 같은 계층적 데이터 소스에 자동으로 바인딩할 수 있습니다.

이 연습에서 수행할 작업은 다음과 같습니다.

  • 기본 메뉴를 만든 후 페이지에 링크되도록 정적으로 구성

  • Web.sitemap XML 파일에 바인딩된 보다 복잡한 메뉴 만들기

  • 메뉴 방향 조정

  • 여러 수준의 정적 표시 또는 동적 표시 구성

이 연습을 완료하려면 다음과 같은 요건이 필요합니다.

  • 컴퓨터에 Visual Studio 또는 Visual Web Developer Express가 설치되어 있어야 합니다.

    참고참고

    Visual Studio를 사용하는 경우 이 연습에서는 Visual Studio를 처음 시작할 때 웹 개발 설정 컬렉션을 선택했다고 가정합니다. 자세한 내용은 방법: 웹 개발 환경 설정 선택을 참조하십시오.

이 연습에서는 빈 웹 사이트 프로젝트를 만든 후 페이지를 추가합니다.

이 연습에서는 웹 사이트 프로젝트를 사용합니다. 대신 웹 응용 프로그램 프로젝트를 사용할 수도 있습니다. 이러한 웹 프로젝트 형식 간의 차이점에 대한 자세한 내용은 웹 응용 프로그램 프로젝트와 웹 사이트 프로젝트 비교를 참조하십시오.

파일 시스템 웹 사이트를 만들려면

  1. Visual Studio 또는 Visual Web Developer Express를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    새 웹 사이트 대화 상자가 표시됩니다.

  3. 설치된 템플릿에서 Visual Basic 또는 VisualC#을 클릭한 다음 ASP.NET 빈 웹 사이트를 선택합니다.

  4. 위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

  5. 확인을 클릭합니다.

    Visual Studio에서 Web.config 파일을 포함하는 웹 사이트 프로젝트가 만들어집니다.

  6. 솔루션 탐색기에서 웹 사이트의 루트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  7. Web Form을 선택하고 파일 이름을 Default.aspx로 지정한 다음 추가를 클릭합니다.

ASP.NET 웹 사이트 템플릿 내의 마스터 페이지에는 메뉴가 포함되어 있지만 이 연습에서는 Default.aspx 페이지만을 위한 다른 메뉴를 추가할 수 있습니다. 페이지의 메뉴를 만드는 첫 번째 단계는 Menu 컨트롤을 배치하는 것입니다.

페이지에 Menu 컨트롤을 추가하려면

  1. Default.aspx로 전환하거나 이 페이지를 연 후 디자인 뷰로 전환합니다.

  2. 도구 상자탐색 컨트롤 그룹에서 Menu 컨트롤을 페이지로 끌어옵니다.

이 예제에서는 메뉴 방향을 세로가 아닌 가로로 지정합니다.

Menu 컨트롤을 가로로 배치하려면

  • Menu 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 클릭한 후 Orientation을 Horizontal로 설정합니다.

이 단원에서는 메뉴 항목 편집기를 사용하여 메뉴 항목을 정의합니다.

Menu 컨트롤 항목을 편집하려면

  1. Menu 컨트롤을 마우스 오른쪽 단추로 클릭한 후 메뉴 항목 편집을 클릭합니다.

    메뉴 항목 편집기가 나타납니다.

  2. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

  3. 새 항목에 대한 속성에서 Text를 Home으로 설정하고, NavigateURL을 Default.aspx로 설정합니다.

  4. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

  5. 속성에서 Text를 Products로 설정하고, NavigateURL을 Products.aspx로 설정합니다.

  6. 항목에서 루트 항목 추가 아이콘을 클릭합니다.

  7. 속성에서 Text를 Services로 설정하고, NavigateURL을 Services.aspx로 설정합니다.

  8. 확인을 클릭합니다.

Default.aspx에 대한 소스를 확인하면 메뉴 항목과 링크가 컨트롤에 선언적으로 지정되어 있음을 알 수 있습니다.

대상 페이지를 만들려면

  1. 솔루션 탐색기에서 웹 사이트의 루트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. Web Form을 클릭하고 파일 이름을 Products.aspx로 지정한 후 추가를 클릭합니다.

  3. 앞의 단계를 반복하고 Services.aspx라는 파일을 만듭니다.

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

Menu 컨트롤을 테스트하려면

  1. 솔루션 탐색기에서 Default.aspx를 클릭한 후 Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

  2. 항목 위로 포인터를 가져갑니다. 그러면 해당 페이지 맨 아래에 표시되는 브라우저의 상태 표시줄에 링크된 페이지가 나타납니다.

  3. 링크를 클릭하여 해당 페이지로 이동합니다.

마지막 단원에서는 페이지 내에 선언적으로 구성된 간단한 정적 메뉴를 만들었습니다. 이 단원에서는 Menu 컨트롤 항목을 직접 편집하지 않고 대신 해당 컨트롤을 XML 데이터 소스로 Web.sitemap 파일에 바인딩합니다. 이렇게 하면 Menu 컨트롤의 구조가 페이지를 수정하거나 디자이너를 사용하지 않고 쉽게 업데이트할 수 있는 별도의 XML 파일 내에 유지 관리될 수 있습니다.

이 예제에서는 또 다른 Menu 컨트롤을 사용합니다.

또 다른 Menu 컨트롤을 만들려면

  • 도구 상자탐색 그룹에서 또 다른 Menu 컨트롤을 Default.aspx 페이지로 끌어옵니다.

다음에는 바인딩할 Web.sitemap 파일이 필요합니다.

사이트 맵 파일을 만들려면

  1. 솔루션 탐색기에서 웹 사이트의 루트를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. 새 항목 추가 대화 상자에서 사이트 맵을 클릭합니다.

  3. 추가를 클릭합니다.

  4. 다음 XML 코드를 Web.sitemap 파일에 추가합니다.

    XML은 메뉴의 구조를 나타냅니다. 중첩된 노드는 부모 노드 메뉴 항목의 자식 메뉴 항목이 됩니다.

    <siteMap>
      <siteMapNode title="Home" description="Home" url="default.aspx" >
        <siteMapNode title="Products" description="Our products" 
         url="Products.aspx">
          <siteMapNode title="Hardware" 
           description="Hardware choices"
           url="Hardware.aspx" />
          <siteMapNode title="Software" 
           description="Software choices" 
           url="Software.aspx" />
        </siteMapNode>
        <siteMapNode title="Services" 
         description="Services we offer" 
         url="Services.aspx">
          <siteMapNode title="Training" 
           description="Training classes" 
           url="Training.aspx" />
          <siteMapNode title="Consulting" 
           description="Consulting services" 
           url="Consulting.aspx" />
          <siteMapNode title="Support" 
           description="Support plans" 
           url="Support.aspx" />
        </siteMapNode>
      </siteMapNode>
    </siteMap>
    
  5. 파일을 저장합니다.

이제 Web.sitemap 파일을 가리키는 탐색 데이터 소스를 만든 후 해당 소스에 Menu 컨트롤을 바인딩할 수 있습니다.

사이트 맵에 Menu 컨트롤을 바인딩하려면

  1. Default.aspx 파일을 열고 디자인 뷰로 전환합니다.

  2. Menu 컨트롤의 스마트 태그를 클릭하여 Menu 작업 대화 상자를 표시합니다.

  3. Menu 작업 대화 상자의 데이터 소스 선택 드롭다운 목록에서 새 데이터 소스를 클릭합니다.

    데이터 소스 구성 마법사 대화 상자가 나타납니다.

  4. 사이트 맵을 클릭합니다.

    데이터 소스의 ID 지정에 기본 이름 SiteMapDataSource1이 나타납니다.

  5. 확인을 클릭합니다.

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

사이트 맵 바인딩을 테스트하려면

  1. Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

  2. 두 번째 세로 메뉴의 Home 메뉴 항목으로 포인터를 가져갑니다.

    ProductsServices가 나타납니다.

  3. Products 위로 포인터를 가져갑니다.

    HardwareSoftware가 나타납니다.

    Default.aspx에 대한 소스 코드를 보면 첫 번째 메뉴 항목과 달리 항목이 선언적으로 지정되지 않으며 Menu 컨트롤에 의해 데이터 소스가 참조됩니다.

  4. 브라우저 창을 닫습니다.

Menu 컨트롤은 정적 디스플레이와 동적 디스플레이라는 두 가지 디스플레이 모드를 지원합니다. 정적 디스플레이 모드에서는 Menu 컨트롤이 항상 완전히 확장됩니다. 전체 구조가 표시되고 사용자는 모든 부분을 클릭할 수 있습니다. 동적으로 표시된 메뉴에서는 지정하는 부분만 정적이고 사용자가 부모 노드 위에 마우스 포인터를 가져가면 자식 메뉴 항목이 표시됩니다.

앞 단원에서 만든 세로 메뉴는 맨 위 수준만 정적으로 남아 있으며 완전히 동적으로 표시됩니다. Menu 컨트롤을 사용하면 마우스 포인터를 일시 중지하는 동작과 메뉴가 동적인지 아니면 정적인지에 따라 동작을 지정할 수 있습니다. 이 단원에서는 Menu 컨트롤의 동적 및 정적 수준을 조정합니다.

Menu 컨트롤을 두 수준만큼 정적으로 만들려면

  1. 디자인 뷰의 Default.aspx 페이지에서 두 번째 Menu 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 클릭합니다.

  2. StaticDisplayLevels를 2로 설정합니다.

배치한 페이지 및 메뉴를 테스트해 볼 수 있습니다.

동적 메뉴를 테스트하려면

  • Ctrl+F5를 눌러 Default.aspx 페이지를 실행합니다.

    메뉴의 처음 두 수준이 표시되지만 세 번째 수준은 동적입니다.

Menu 컨트롤을 사용하여 탐색 메뉴를 쉽게 만들 수 있습니다. 동적 또는 정적 표시를 위해 컨트롤을 구성한 후 사이트 맵 XML 파일에 바인딩합니다. 또한 다음의 추가 옵션을 사용해 볼 수도 있습니다.

표시: