다음을 통해 공유

중첩 마스터 페이지(VB)

  • 아티클

로 스콧 미첼

하나의 마스터 페이지를 다른 마스터 페이지 내에 중첩하는 방법을 보여 주는 방법

소개

지난 9개의 자습서를 통해 마스터 페이지를 사용하여 사이트 전체 레이아웃을 구현하는 방법을 알아보았습니다. 간단히 말해서, 마스터 페이지를 사용하면 페이지 개발자가 콘텐츠 페이지별로 사용자 지정할 수 있는 특정 지역과 함께 마스터 페이지에서 공통 태그를 정의할 수 있습니다. 마스터 페이지의 ContentPlaceHolder 컨트롤은 사용자 지정 가능한 지역을 나타냅니다. ContentPlaceHolder 컨트롤에 대한 사용자 지정 태그는 콘텐츠 컨트롤을 통해 콘텐츠 페이지에 정의됩니다.

지금까지 살펴보았던 마스터 페이지 기술은 전체 사이트에서 단일 레이아웃을 사용하는 경우 매우 좋습니다. 그러나 많은 대형 웹 사이트에는 다양한 섹션에서 사용자 지정되는 사이트 레이아웃이 있습니다. 예를 들어 병원 직원이 환자 정보, 활동 및 청구를 관리하는 데 사용하는 의료 응용 프로그램을 고려합니다. 이 애플리케이션에는 다음 세 가지 유형의 웹 페이지가 있을 수 있습니다.

  • 직원 구성원이 가용성을 업데이트하거나, 일정을 보거나, 휴가 시간을 요청할 수 있는 교직원 구성원별 페이지입니다.
  • 직원이 특정 환자에 대한 정보를 보거나 편집하는 환자별 페이지입니다.
  • 회계사가 현재 청구 상태 및 재무 보고서를 검토하는 청구 관련 페이지입니다.

모든 페이지는 위쪽의 메뉴와 아래쪽에 자주 사용되는 일련의 링크와 같은 일반적인 레이아웃을 공유할 수 있습니다. 그러나 직원, 환자 및 청구 관련 페이지는 이 일반 레이아웃을 사용자 지정해야 할 수 있습니다. 예를 들어 모든 직원별 페이지에는 현재 로그온한 사용자의 가용성 및 일별 일정을 보여 주는 일정 및 작업 목록이 포함되어야 합니다. 아마도 모든 환자 관련 페이지는 정보가 편집되는 환자의 이름, 주소 및 보험 정보를 표시해야 합니다.

중첩된 마스터 페이지를 사용하여 이러한 사용자 지정 레이아웃을 만들 수 있습니다. 위의 시나리오를 구현하기 위해 먼저 ContentPlaceHolders가 사용자 지정 가능한 지역을 정의하는 사이트 전체 레이아웃, 메뉴 및 바닥글 콘텐츠를 정의하는 마스터 페이지를 만듭니다. 그런 다음 웹 페이지의 각 유형에 대해 하나씩 세 개의 중첩된 마스터 페이지를 만듭니다. 중첩된 각 마스터 페이지는 마스터 페이지를 사용하는 콘텐츠 페이지 유형 간에 콘텐츠를 정의합니다. 즉, 환자별 콘텐츠 페이지의 중첩된 마스터 페이지에는 편집 중인 환자에 대한 정보를 표시하기 위한 태그 및 프로그래밍 논리가 포함됩니다. 환자별 새 페이지를 만들 때 이 중첩된 마스터 페이지에 바인딩합니다.

이 자습서는 중첩된 마스터 페이지의 이점을 강조 표시하여 시작합니다. 그런 다음 중첩된 마스터 페이지를 만들고 사용하는 방법을 보여줍니다.

참고 항목

.NET Framework 버전 2.0부터 중첩된 마스터 페이지가 가능했습니다. 그러나 Visual Studio 2005에는 중첩된 마스터 페이지에 대한 디자인 타임 지원이 포함되지 않았습니다. 좋은 소식은 Visual Studio 2008이 중첩된 마스터 페이지에 대한 풍부한 디자인 타임 환경을 제공한다는 것입니다. 중첩된 마스터 페이지를 사용하지만 여전히 Visual Studio 2005를 사용 중인 경우 SCOTT Guthrie의 블로그 항목인 VS 2005 디자인 타임의 중첩 마스터 페이지 팁에 대해 알아보세요.

중첩 마스터 페이지의 이점

많은 웹 사이트에는 특정 유형의 페이지와 관련된 더 많은 사용자 지정 디자인뿐만 아니라 가장 중요한 사이트 디자인이 있습니다. 예를 들어 데모 웹 애플리케이션에서 기본적인 관리 섹션(폴더의 페이지)을 ~/Admin 만들었습니다. 현재 폴더의 ~/Admin 웹 페이지는 관리 섹션(즉, Site.master Alternate.master사용자의 선택에 따라)에 없는 페이지와 동일한 마스터 페이지를 사용합니다.

참고 항목

지금은 사이트에 마스터 페이지 Site.master가 하나만 있는 것처럼 가장합니다. 이 자습서의 뒷부분에 있는 "관리 섹션에 중첩된 마스터 페이지 사용"으로 시작하는 두 개 이상의 마스터 페이지가 있는 중첩 마스터 페이지를 사용하는 방법에 대해 살펴보겠습니다.

사이트의 다른 페이지에 존재하지 않는 추가 정보 또는 링크를 포함하도록 관리 페이지의 레이아웃을 사용자 지정하라는 요청을 받았다고 상상해 보십시오. 이 요구 사항을 구현하는 네 가지 기술이 있습니다.

  1. 관리 관련 정보 및 링크를 폴더의 모든 콘텐츠 페이지에 ~/Admin 수동으로 추가합니다.
  2. Site.master 관리 섹션별 정보 및 링크를 포함하도록 마스터 페이지를 업데이트한 다음 마스터 페이지에 코드를 추가하여 관리 페이지 중 하나가 방문 중인지 여부에 따라 이러한 섹션을 표시하거나 숨깁니다.
  3. 관리 섹션에 대한 새 마스터 페이지를 만들고, 태그 Site.master를 복사하고, 관리 섹션별 정보 및 링크를 추가한 다음, 폴더의 콘텐츠 페이지를 ~/Admin 업데이트하여 이 새 마스터 페이지를 사용합니다.
  4. 폴더의 콘텐츠 ~/Admin 페이지를 바인딩 Site.master 하고 이 새 중첩 마스터 페이지를 사용하도록 하는 중첩된 마스터 페이지를 만듭니다. 이 중첩 마스터 페이지에는 관리 페이지와 관련된 추가 정보 및 링크만 포함되며 이미 정의된 Site.master태그를 반복할 필요가 없습니다.

첫 번째 옵션은 가장 맛있지 않습니다. 마스터 페이지를 사용하는 요점은 공통 태그를 수동으로 복사하여 새 ASP.NET 페이지에 붙여넣을 필요가 없도록 이동하는 것입니다. 두 번째 옵션은 허용 가능하지만, 경우에 따라 표시되는 태그를 사용하여 마스터 페이지를 대량으로 일괄 처리하고 개발자가 마스터 페이지를 편집하여 이 태그를 처리하고 특정 태그가 표시되는 시점과 숨겨진 시점을 기억해야 하므로 애플리케이션의 유지 관리가 덜 됩니다. 이 방법은 이 단일 마스터 페이지에서 수용하는 데 필요한 점점 더 많은 유형의 웹 페이지의 사용자 지정으로 인해 더 적은 테넌트와 같습니다.

세 번째 옵션은 두 번째 옵션과 함께 표시된 복잡도 및 복잡성 문제를 제거합니다. 그러나 옵션 3의 주요 단점은 공통 레이아웃 Site.master 을 복사하여 새 관리 섹션별 마스터 페이지로 붙여넣을 필요가 있다는 것입니다. 나중에 사이트 전체 레이아웃을 변경하기로 결정한 경우 두 곳에서 변경해야 합니다.

네 번째 옵션인 중첩된 마스터 페이지는 두 번째 및 세 번째 옵션 중 가장 좋은 옵션을 제공합니다. 사이트 전체 레이아웃 정보는 한 파일(최상위 마스터 페이지)에서 유지 관리되지만 특정 지역과 관련된 콘텐츠는 다른 파일로 구분됩니다.

이 자습서는 간단한 중첩 마스터 페이지를 만들고 사용하는 것으로 시작합니다. 새로운 최상위 마스터 페이지, 중첩된 마스터 페이지 2개, 콘텐츠 페이지 2개를 만듭니다. "관리 섹션에 중첩된 마스터 페이지 사용"부터 중첩된 마스터 페이지의 사용을 포함하도록 기존 마스터 페이지 아키텍처를 업데이트하는 방법을 살펴봅니다. 특히 중첩된 마스터 페이지를 만들고 이를 사용하여 폴더의 콘텐츠 페이지에 ~/Admin 대한 추가 사용자 지정 콘텐츠를 포함합니다.

1단계: 간단한 최상위 마스터 페이지 만들기

기존 마스터 페이지 중 하나를 기반으로 중첩된 마스터를 만든 다음, 최상위 마스터 페이지 대신 이 새 중첩 마스터 페이지를 사용하도록 기존 콘텐츠 페이지를 업데이트하면 기존 콘텐츠 페이지에 이미 최상위 마스터 페이지에 정의된 특정 ContentPlaceHolder 컨트롤이 필요하기 때문에 복잡합니다. 따라서 중첩된 마스터 페이지에는 이름이 같은 동일한 ContentPlaceHolder 컨트롤도 포함되어야 합니다. 또한 특정 데모 애플리케이션에는 사용자의 기본 설정에 따라 콘텐츠 페이지에 동적으로 할당되는 두 개의 마스터 페이지(Site.master 및 Alternate.master)가 있으므로 이러한 복잡성이 더해집니다. 이 자습서의 뒷부분에서 중첩된 마스터 페이지를 사용하도록 기존 애플리케이션을 업데이트하는 방법을 살펴보겠습니다. 하지만 먼저 간단한 중첩 마스터 페이지 예제를 살펴보겠습니다.

명명 NestedMasterPages 된 새 폴더를 만든 다음 새 마스터 페이지 파일을 해당 Simple.master폴더에 추가합니다. (이 폴더와 파일이 추가된 후 솔루션 탐색기 스크린샷은 그림 1을 참조하세요.) AlternateStyles.css 솔루션 탐색기 스타일시트 파일을 디자이너로 끌어옵니다. 그러면 요소의 스타일시트 파일에 <head> 요소가 추가 <link> 되며, 그 후에는 마스터 페이지의 <head> 요소 태그가 다음과 같이 표시됩니다.

<head runat="server"> 
 <title>Untitled Page</title> 
 <asp:ContentPlaceHolder id="head" runat="server"> 
 </asp:ContentPlaceHolder>
 <link href="../AlternateStyles.css" rel="stylesheet" type="text/css" /> 
</head>

다음으로 웹 양식 Simple.master에 다음 태그를 추가합니다.

<div id="topContent"> 
 <asp:HyperLink ID="lnkHome" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx" 
 Text="Nested Master Pages Tutorial (Simple)" /> 
</div> 
<div id="mainContent"> 
 <asp:ContentPlaceHolder id="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
</div>

이 태그는 페이지 맨 위에 "중첩 마스터 페이지(단순)"라는 제목의 링크를 네이비 배경의 큰 흰색 글꼴로 표시합니다. 그 MainContent 아래에 ContentPlaceHolder가 있습니다. 그림 1은 Simple.master Visual Studio 디자이너에 로드될 때의 마스터 페이지를 보여 줍니다.

Visual Studio 디자이너에 로드될 때 간단한 점 마스터 마스터 페이지입니다.

그림 01: 중첩 마스터 페이지는 관리 섹션의 페이지와 관련된 콘텐츠를 정의합니다(전체 크기 이미지를 보려면 클릭).

2단계: 간단한 중첩 마스터 페이지 만들기

Simple.master 에는 두 개의 ContentPlaceHolder 컨트롤, 즉 요소의 MainContent ContentPlaceHolder와 함께 head 웹 양식 내에서 추가한 ContentPlaceHolder가 <head> 포함됩니다. 콘텐츠 페이지를 만들고 콘텐츠 페이지에 바인딩 Simple.master 하는 경우 두 ContentPlaceHolders를 참조하는 두 개의 콘텐츠 컨트롤이 있습니다. 마찬가지로 중첩된 마스터 페이지를 만들어 바인딩 Simple.master 하면 중첩된 마스터 페이지에는 두 개의 콘텐츠 컨트롤이 있습니다.

이름이 지정된 SimpleNested.master폴더에 새 중첩 마스터 페이지를 NestedMasterPages 추가해 보겠습니다. 폴더를 마우스 오른쪽 단추로 NestedMasterPages 클릭하고 새 항목 추가를 선택합니다. 그러면 그림 2에 표시된 새 항목 추가 대화 상자가 나타납니다. 마스터 페이지 템플릿 유형을 선택하고 새 마스터 페이지의 이름을 입력합니다. 새 마스터 페이지가 중첩된 마스터 페이지여야 함을 나타내려면 "마스터 페이지 선택" 확인란을 선택합니다.

다음으로 추가 단추를 클릭합니다. 콘텐츠 페이지를 마스터 페이지에 바인딩할 때 표시되는 것과 동일한 마스터 페이지 선택 대화 상자가 표시됩니다(그림 3 참조). 폴더에서 Simple.master NestedMasterPages 마스터 페이지를 선택하고 확인을 클릭합니다.

참고 항목

웹 사이트 프로젝트 모델 대신 웹 애플리케이션 프로젝트 모델을 사용하여 ASP.NET 웹 사이트를 만든 경우 그림 2에 표시된 새 항목 추가 대화 상자에 "마스터 페이지 선택" 확인란이 표시되지 않습니다. 웹 애플리케이션 프로젝트 모델을 사용할 때 중첩된 마스터 페이지를 만들려면 마스터 페이지 템플릿 대신 중첩 마스터 페이지 템플릿을 선택해야 합니다. 중첩 마스터 페이지 템플릿을 선택하고 추가를 클릭하면 그림 3에 표시된 마스터 페이지 선택 대화 상자가 나타납니다.

중첩 마스터 페이지를 추가하려면

그림 02: 중첩 마스터 페이지를 추가하려면 "마스터 페이지 선택" 확인란을 선택합니다(전체 크기 이미지를 보려면 클릭).

중첩된 마스터 페이지를 Simple.master 마스터 페이지에 바인딩

그림 03: 중첩된 마스터 페이지를 마스터 페이지에 Simple.master 바인딩(전체 크기 이미지를 보려면 클릭)

아래에 표시된 중첩된 마스터 페이지의 선언적 태그에는 최상위 마스터 페이지의 두 ContentPlaceHolder 컨트롤을 참조하는 두 개의 콘텐츠 컨트롤이 포함되어 있습니다.

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNested.master.vb" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 </asp:Content>

<%@ Master %> 지시문을 제외하고 중첩된 마스터 페이지의 초기 선언적 태그는 콘텐츠 페이지를 동일한 최상위 마스터 페이지에 바인딩할 때 처음에 생성된 태그와 동일합니다. 콘텐츠 페이지의 <%@ Page %> 지시문과 마찬가지로 여기에 있는 <%@ Master %> 지시문에는 중첩된 마스터 페이지의 부모 마스터 페이지를 지정하는 특성이 포함됩니다 MasterPageFile . 중첩된 마스터 페이지와 동일한 최상위 마스터 페이지에 바인딩된 콘텐츠 페이지의 주요 차이점은 중첩된 마스터 페이지에 ContentPlaceHolder 컨트롤이 포함될 수 있다는 점입니다. 중첩된 마스터 페이지의 ContentPlaceHolder 컨트롤은 콘텐츠 페이지에서 태그를 사용자 지정할 수 있는 지역을 정의합니다.

ContentPlaceHolder 컨트롤에 해당하는 콘텐츠 컨트롤에 "Hello, SimpleNested!"라는 텍스트가 표시되도록 MainContent 이 중첩 마스터 페이지를 업데이트합니다.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
</asp:Content>

이 추가를 수행한 후 중첩된 마스터 페이지를 저장한 다음 새 콘텐츠 페이지를 NestedMasterPages 명명된 Default.aspx폴더에 추가하고 마스터 페이지에 바인딩합니다 SimpleNested.master . 이 페이지를 추가하면 콘텐츠 컨트롤이 없다는 사실에 놀랄 수 있습니다(그림 4 참조). 콘텐츠 페이지는 부모 마스터 페이지의 ContentPlaceHolders에만 액세스할 수 있습니다. SimpleNested.master 는 ContentPlaceHolder 컨트롤을 포함하지 않습니다. 따라서 이 마스터 페이지에 바인딩된 콘텐츠 페이지에는 콘텐츠 컨트롤을 포함할 수 없습니다.

새 콘텐츠 페이지에 콘텐츠 컨트롤이 없음

그림 04: 새 콘텐츠 페이지에 콘텐츠 컨트롤이 없음(전체 크기 이미지를 보려면 클릭)

ContentPlaceHolder 컨트롤을 포함하도록 중첩된 마스터 페이지(SimpleNested.master)를 업데이트해야 합니다. 일반적으로 중첩된 마스터 페이지에는 부모 마스터 페이지에서 정의한 각 ContentPlaceHolder에 대한 ContentPlaceHolder가 포함되어 자식 마스터 페이지 또는 콘텐츠 페이지가 최상위 마스터 페이지의 ContentPlaceHolder 컨트롤에서 작동하도록 허용합니다.

두 콘텐츠 컨트롤에 SimpleNested.master ContentPlaceHolder를 포함하도록 마스터 페이지를 업데이트합니다. ContentPlaceHolder 컨트롤이 참조하는 ContentPlaceHolder 컨트롤과 동일한 이름을 ContentPlaceHolder 컨트롤에 지정합니다. 즉, ContentPlaceHolder를 참조하는 콘텐츠 컨트롤에 이름이 지정된 MainContent ContentPlaceHolder Simple.master컨트롤을 추가합니다MainContent.SimpleNested.master ContentPlaceHolder를 참조하는 콘텐츠 컨트롤에서 head 동일한 작업을 수행합니다.

참고 항목

중첩된 마스터 페이지의 ContentPlaceHolder 컨트롤 이름을 최상위 마스터 페이지의 ContentPlaceHolders와 동일하게 명명하는 것이 좋지만 이 명명 대칭은 필요하지 않습니다. 중첩된 마스터 페이지의 ContentPlaceHolder 컨트롤에 원하는 이름을 지정할 수 있습니다. 그러나 최상위 마스터 페이지와 중첩된 마스터 페이지가 같은 이름을 사용하는 경우 페이지의 어떤 지역에 해당하는 ContentPlaceHolders가 무엇인지 더 쉽게 기억할 수 있습니다.

이러한 추가를 수행한 SimpleNested.master 후 마스터 페이지의 선언적 태그는 다음과 유사하게 표시됩니다.

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNested.master.vb" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

Default.aspx 방금 만든 콘텐츠 페이지를 삭제한 다음 다시 추가하여 마스터 페이지에 바인딩합니다SimpleNested.master. 이번에는 Visual Studio에서 이제 정의된 SimpleNested.master ContentPlaceHolders를 참조하는 두 개의 콘텐츠 컨트롤Default.aspx을 추가합니다(그림 6 참조). 참조한 콘텐츠 컨트롤에 "Hello, from Default.aspx!" 텍스트를 추가합니다 MainContent.

그림 5는 여기에 Simple.master관련된 세 가지 엔터티( 및 SimpleNested.masterDefault.aspx 서로 어떻게 관련되어 있는지)를 보여줍니다. 다이어그램에서 볼 수 있듯이 중첩된 마스터 페이지는 부모의 ContentPlaceHolder에 대한 콘텐츠 컨트롤을 구현합니다. 이러한 지역에 콘텐츠 페이지에 액세스할 수 있어야 하는 경우 중첩된 마스터 페이지는 콘텐츠 컨트롤에 자체 ContentPlaceHolders를 추가해야 합니다.

최상위 및 중첩 마스터 페이지는 콘텐츠 페이지의 레이아웃을 결정합니다.

그림 05: 최상위 및 중첩 마스터 페이지는 콘텐츠 페이지의 레이아웃을 지정합니다(전체 크기 이미지를 보려면 클릭).

이 동작은 콘텐츠 페이지 또는 마스터 페이지가 부모 마스터 페이지만 인식되는 방법을 보여 줍니다. 이 동작은 Visual Studio 디자이너에서도 표시됩니다. 그림 6은 디자이너를 Default.aspx보여 줍니다. 디자이너는 콘텐츠 페이지에서 편집할 수 있는 지역과 편집할 수 없는 부분을 명확하게 보여 주지만 중첩된 마스터 페이지의 편집할 수 없는 영역과 최상위 마스터 페이지의 지역을 명확하게 구분하지는 않습니다.

이제 콘텐츠 페이지에 중첩 마스터 페이지의 ContentPlaceHolders에 대한 콘텐츠 컨트롤이 포함됩니다.

그림 06: 콘텐츠 페이지에 이제 중첩 마스터 페이지의 ContentPlaceHolders에 대한 콘텐츠 컨트롤이 포함됩니다(전체 크기 이미지를 보려면 클릭).

3단계: 두 번째 단순 중첩 마스터 페이지 추가

중첩된 마스터 페이지가 여러 개 있는 경우 중첩된 마스터 페이지의 이점은 더 분명합니다. 이 이점을 설명하기 위해 폴더에 NestedMasterPages 다른 중첩된 마스터 페이지를 만듭니다. 이 새 중첩 마스터 페이지의 이름을 지정하고 마스터 페이지에 SimpleNestedAlternate.master 바인딩합니다 Simple.master . 2단계에서 수행한 것처럼 중첩된 마스터 페이지의 두 콘텐츠 컨트롤에 ContentPlaceHolder 컨트롤을 추가합니다. 또한 최상위 마스터 페이지의 MainContent ContentPlaceHolder에 해당하는 콘텐츠 컨트롤에 "Hello, SimpleNestedAlternate!" 텍스트를 추가합니다. 이러한 변경을 수행한 후 새 중첩된 마스터 페이지의 선언적 태그는 다음과 유사하게 표시됩니다.

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNestedAlternate.master.vb" Inherits="NestedMasterPages_SimpleNestedAlternate" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <asp:ContentPlaceHolder ID="head" runat="server">
 </asp:ContentPlaceHolder> </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <p>Hello, from SimpleNestedAlternate!</p> 
 <asp:ContentPlaceHolder ID="MainContent" runat="server">
 </asp:ContentPlaceHolder> 
 </asp:Content>

폴더에 이름이 지정된 Alternate.aspx 콘텐츠 페이지를 만들고 중첩된 마스터 페이지에 바인딩합니다SimpleNestedAlternate.master.NestedMasterPages 에 해당하는 콘텐츠 컨트롤에 "Hello, Alternate!" 텍스트를 추가합니다 MainContent. 그림 7은 Visual Studio 디자이너를 통해 볼 때를 보여 Alternate.aspx 줍니다.

Alternate.aspx SimpleNestedAlternate.master 마스터 페이지에 바인딩됨

그림 07: Alternate.aspx 마스터 페이지에 바인딩됨 SimpleNestedAlternate.master (전체 크기 이미지를 보려면 클릭)

그림 7의 디자이너를 그림 6의 디자이너와 비교합니다. 두 콘텐츠 페이지는 최상위 마스터 페이지(즉, "중첩 마스터 페이지 자습서(Simple.master단순)" 제목에 정의된 것과 동일한 레이아웃을 공유합니다. 그러나 그림 6의 "Hello, SimpleNested!"와 그림 7의 "Hello, SimpleNestedAlternate!"라는 텍스트가 부모 마스터 페이지에 정의되어 있습니다. 여기서는 이러한 차이점이 간단하지만 더 의미 있는 차이점을 포함하도록 이 예제를 확장할 수 있습니다. 예를 들어 SimpleNested.master 페이지에는 해당 콘텐츠 페이지와 관련된 옵션이 있는 메뉴가 포함될 수 있지만, SimpleNestedAlternate.master 해당 페이지에 바인딩되는 콘텐츠 페이지와 관련된 정보가 있을 수 있습니다.

이제 가장 중요한 사이트 레이아웃을 변경해야 한다고 상상해 보십시오. 예를 들어 모든 콘텐츠 페이지에 공통 링크 목록을 추가하려고 하는 경우를 생각해 보십시오. 이를 위해 최상위 마스터 페이지를 Simple.master업데이트합니다. 모든 변경 내용은 중첩된 마스터 페이지 및 확장에 따라 콘텐츠 페이지에 즉시 반영됩니다.

가장 중요한 사이트 레이아웃을 변경할 수 있는 용이성을 보여 주려면 마스터 페이지를 열고 Simple.master 요소 간에 다음 태그를 topContent mainContent <div> 추가합니다.

<div id="navContent"> 
 <asp:HyperLink ID="lnkDefault" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx" 
 Text="Nested Master Page Example 1" /> 
 | 
 <asp:HyperLink ID="lnkAlternate" runat="server" 
 NavigateUrl="~/NestedMasterPages/Alternate.aspx" 
 Text="Nested Master Page Example 2" /> 
</div>

이렇게 하면 바인딩되는 모든 페이지의 맨 위에 두 개의 링크가 추가됩니다. Simple.masterSimpleNested.master또는 SimpleNestedAlternate.master이러한 변경 내용은 모든 중첩된 마스터 페이지와 해당 콘텐츠 페이지에 즉시 적용됩니다. 그림 8은 브라우저를 통해 볼 때를 보여 Alternate.aspx 줍니다. 페이지 맨 위에 링크가 추가되었습니다(그림 7과 비교).

최상위 마스터 페이지로 변경된 내용은 중첩된 마스터 페이지 및 해당 콘텐츠 페이지에 즉시 반영됩니다.

그림 08: 최상위 마스터 페이지로 변경된 페이지가 중첩된 마스터 페이지 및 해당 콘텐츠 페이지에 즉시 반영됩니다(전체 크기 이미지를 보려면 클릭).

관리 섹션에 중첩 마스터 페이지 사용

이 시점에서 중첩된 마스터 페이지의 장점을 살펴보고 ASP.NET 애플리케이션에서 만들고 사용하는 방법을 살펴보았습니다. 그러나 1단계, 2, 3단계의 예제에는 새 최상위 마스터 페이지, 새 중첩된 마스터 페이지 및 새 콘텐츠 페이지 만들기가 포함되었습니다. 기존 최상위 마스터 페이지 및 콘텐츠 페이지가 있는 웹 사이트에 새 중첩 마스터 페이지를 추가하는 것은 어떨까요?

중첩된 마스터 페이지를 기존 웹 사이트에 통합하고 기존 콘텐츠 페이지와 연결하려면 처음부터 시작하는 것보다 더 많은 노력이 필요합니다. 4단계, 5, 6, 7단계에서는 데모 애플리케이션을 보강하여 관리자에 대한 지침을 포함하고 폴더의 ASP.NET 페이지에서 사용하는 명명 AdminNested.master 된 새 중첩 마스터 페이지를 ~/Admin 포함하도록 이러한 문제를 살펴봅니다.

중첩된 마스터 페이지를 데모 애플리케이션에 통합하면 다음과 같은 장애물이 발생합니다.

  • 폴더의 ~/Admin 기존 콘텐츠 페이지에는 마스터 페이지의 특정 기대치가 있습니다. 우선 특정 ContentPlaceHolder 컨트롤이 있을 것으로 예상합니다. 또한 ~/Admin/AddProduct.aspx 페이지와 ~/Admin/Products.aspx 페이지는 마스터 페이지의 공용 RefreshRecentProductsGrid 메서드를 호출하거나, 속성을 GridMessageText 설정하거나, 이벤트에 대한 PricesDoubled 이벤트 처리기를 갖습니다. 따라서 중첩된 마스터 페이지는 동일한 ContentPlaceHolders 및 공용 멤버를 제공해야 합니다.
  • 이전 자습서에서는 세션 변수를 기반으로 개체의 MasterPageFile 속성을 동적으로 설정 Page 하도록 클래스를 향상시켰 BasePage 습니다. 중첩된 마스터 페이지를 사용하는 경우 동적 마스터 페이지를 지원하는 방법

이 두 가지 과제는 중첩된 마스터 페이지를 빌드하고 기존 콘텐츠 페이지에서 사용할 때 나타납니다. 이러한 문제가 발생하면 조사하고 극복하겠습니다.

4단계: 중첩 마스터 페이지 만들기

첫 번째 작업은 관리 섹션의 페이지에서 사용할 중첩 마스터 페이지를 만드는 것입니다. 2단계에서 보았듯이 중첩된 새 마스터 페이지를 추가할 때 중첩된 마스터 페이지의 부모 마스터 페이지를 지정해야 합니다. 그러나 두 개의 최상위 마스터 페이지 Site.master 가 있습니다 Alternate.master. 이전 자습서에서 만들고 Alternate.master 런타임에 개체의 속성을 Session 변수의 MasterPageFile 값 MyMasterPage 에 Site.master Alternate.master 따라 설정하는 Page 코드를 BasePage 클래스에 작성했습니다.

적절한 최상위 마스터 페이지를 사용할 수 있도록 중첩된 마스터 페이지를 구성하려면 어떻게 해야 할까요? 두 가지 옵션이 있습니다.

  • 두 개의 중첩된 마스터 페이지를 AdminNestedSite.master AdminNestedAlternate.master만들고 최상위 마스터 페이지 Site.master 및 Alternate.master각각에 바인딩합니다. 그런 BasePage다음 개체를 Page 적절한 중 MasterPageFile 첩된 마스터 페이지로 설정합니다.
  • 단일 중첩 마스터 페이지를 만들고 콘텐츠 페이지에서 이 특정 마스터 페이지를 사용하도록 합니다. 그런 다음 런타임에 런타임에 중첩된 마스터 페이지의 MasterPageFile 속성을 적절한 최상위 마스터 페이지로 설정해야 합니다. (지금까지 알아낸 것처럼 마스터 페이지에도 속성이 있습니다 MasterPageFile .)

두 번째 옵션을 사용하겠습니다. 라는 폴더에 ~/Admin 중첩된 마스터 페이지 파일을 하나 만듭니다 AdminNested.master. 둘 다 Site.master Alternate.master 동일한 ContentPlaceHolder 컨트롤 집합을 가지고 있기 때문에 일관성을 위해 바인딩 Site.master 하는 것이 좋습니다.

~/Admin 폴더에 중첩 마스터 페이지를 추가합니다.

그림 09: 폴더에 중첩 마스터 페이지를 ~/Admin 추가합니다. (전체 크기 이미지를 보려면 클릭)

중첩된 마스터 페이지는 4개의 ContentPlaceHolder 컨트롤이 있는 마스터 페이지에 바인딩되므로 Visual Studio는 새 중첩된 마스터 페이지 파일의 초기 태그에 4개의 콘텐츠 컨트롤을 추가합니다. 2단계와 3단계에서 수행한 것처럼 각 콘텐츠 컨트롤에 ContentPlaceHolder 컨트롤을 추가하여 최상위 마스터 페이지의 ContentPlaceHolder 컨트롤과 동일한 이름을 지정합니다. ContentPlaceHolder에 해당하는 콘텐츠 컨트롤에 MainContent 다음 태그를 추가합니다.

<div class="instructions"> 
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
</div>

다음으로, CSS 파일 및 AlternateStyles.css CSS 파일에서 CSS 클래스를 Styles.css 정의 instructions 합니다. 다음 CSS 규칙을 사용하면 클래스로 스타일이 지정된 instructions HTML 요소가 연한 노란색 배경색과 검은색 단색 테두리로 표시됩니다.

.instructions 
{
 padding: 6px; 
 border: dashed 1px black; 
 background-color: #ffb; 
 margin-bottom: 10px; 
}

이 태그는 중첩된 마스터 페이지에 추가되었으므로 이 중첩된 마스터 페이지(즉, 관리 섹션의 페이지)를 사용하는 페이지에만 표시됩니다.

중첩된 마스터 페이지에 이러한 추가를 수행한 후 선언적 태그는 다음과 유사하게 표시됩니다.

<%@ Master Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="AdminNested.master.vb" Inherits="Admin_AdminNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <div class="instructions">
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
 </div>
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server"> 
 <asp:ContentPlaceHolder ID="QuickLoginUI" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server"> 
 <asp:ContentPlaceHolder ID="LeftColumnContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

각 콘텐츠 컨트롤에는 ContentPlaceHolder 컨트롤이 있으며 ContentPlaceHolder 컨트롤의 ID 속성에는 최상위 마스터 페이지의 해당 ContentPlaceHolder 컨트롤과 동일한 값이 할당됩니다. 또한 관리 섹션별 태그는 ContentPlaceHolder에 MainContent 표시됩니다.

그림 10에서는 Visual Studio 디자이너를 AdminNested.master 통해 볼 때 중첩된 마스터 페이지를 보여 줍니다. 콘텐츠 컨트롤의 맨 위에 MainContent 있는 노란색 상자에서 지침을 볼 수 있습니다.

중첩 마스터 페이지는 관리자에 대한 지침을 포함하도록 최상위 마스터 페이지를 확장합니다.

그림 10: 중첩된 마스터 페이지는 관리자에 대한 지침을 포함하도록 최상위 마스터 페이지를 확장합니다. (전체 크기 이미지를 보려면 클릭)

5단계: 새 중첩 마스터 페이지를 사용하도록 기존 콘텐츠 페이지 업데이트

관리 섹션에 새 콘텐츠 페이지를 추가할 때마다 방금 만든 마스터 페이지에 바인딩 AdminNested.master 해야 합니다. 하지만 기존 콘텐츠 페이지는 어떨까요? 현재 사이트의 모든 콘텐츠 페이지는 런타임에 콘텐츠 페이지의 마스터 페이지를 프로그래밍 방식으로 설정하는 클래스에서 BasePage 파생됩니다. 관리 섹션의 콘텐츠 페이지에 대해 원하는 동작이 아닙니다. 대신 이러한 콘텐츠 페이지에서 항상 페이지를 사용하려고 합니다 AdminNested.master . 런타임 시 올바른 최상위 콘텐츠 페이지를 선택하는 것은 중첩된 마스터 페이지의 책임입니다.

이 원하는 동작을 수행하는 가장 좋은 방법은 클래스를 확장하는 새 AdminBasePage 사용자 지정 기본 페이지 클래스를 BasePage 만드는 것입니다. AdminBasePage는 개체를 SetMasterPageFile 재정의 MasterPageFile 하고 하드 코드된 값 "~/Admin/AdminNested.master"로 설정할 Page 수 있습니다. 이러한 방식으로 파생 AdminBasePage 되는 모든 페이지는 사용되지 AdminNested.master만, 파생 BasePage 되는 모든 페이지에는 MasterPageFile 세션 변수의 MyMasterPage 값에 따라 해당 속성이 "~/Site.master" 또는 "~/Alternate.master"로 동적으로 설정됩니다.

먼저 이름이 지정된 AdminBasePage.vb폴더에 새 클래스 파일을 App_Code 추가합니다. AdminBasePage 메서드를 확장 BasePage 한 다음 재정의합니다SetMasterPageFile. 이 메서드에서 "~/Admin/AdminNested.master" 값을 할당 MasterPageFile 합니다. 이러한 변경을 수행한 후 클래스 파일은 다음과 유사하게 표시됩니다.

Public Class AdminBasePage 
 Inherits BasePage 
 Protected Overrides Sub SetMasterPageFile() 
 Me.MasterPageFile = "~/Admin/AdminNested.master" 
 End Sub 
End Class

이제 관리 섹션의 기존 콘텐츠 페이지가 대신 파생 AdminBasePage BasePage되어야 합니다. 폴더의 각 콘텐츠 페이지에 대한 코드 숨김 클래스 파일로 ~/Admin 이동하여 변경합니다. 예를 들어 코드 ~/Admin/Default.aspx 숨김 클래스 선언을 다음에서 변경합니다.

Partial Class Admin_Default 
 Inherits BasePage

다음으로 변경:

Partial Class Admin_Default 
 Inherits AdminBasePage

그림 11에서는 최상위 마스터 페이지(Site.master 또는 Alternate.master), 중첩된 마스터 페이지(AdminNested.master) 및 관리 섹션 콘텐츠 페이지가 서로 어떻게 관련되어 있는지를 보여 줍니다.

중첩 마스터 페이지는 관리 섹션의 페이지와 관련된 콘텐츠를 정의합니다.

그림 11: 중첩 마스터 페이지는 관리 섹션의 페이지와 관련된 콘텐츠를 정의합니다(전체 크기 이미지를 보려면 클릭).

6단계: 마스터 페이지의 공용 메서드 및 속성 미러링

마스터 페이지와 ~/Admin/Products.aspx 페이지가 프로그래밍 방식으로 상호 작용합니다~/Admin/AddProduct.aspx. 마스터 페이지의 ~/Admin/AddProduct.aspx 공용 RefreshRecentProductsGrid 메서드를 호출하고 해당 GridMessageText 속성을 ~/Admin/Products.aspx 설정합니다. 이벤트에 대한 PricesDoubled 이벤트 처리기가 있습니다. 이전 자습서에서는 이러한 공용 멤버를 MustInherit BaseMasterPage 정의하는 클래스를 만들었습니다.

~/Admin/AddProduct.aspx 및 ~/Admin/Products.aspx 페이지는 해당 마스터 페이지가 클래스에서 파생된다고 BaseMasterPage 가정합니다. 그러나 이 AdminNested.master 페이지는 현재 클래스를 System.Web.UI.MasterPage 확장합니다. 따라서 방문할 ~/Admin/Products.aspx InvalidCastException 때 "'ASP.admin_adminnested_master' 형식의 개체를 'BaseMasterPage' 형식으로 캐스팅할 수 없습니다."라는 메시지와 함께 throw됩니다.

이 문제를 해결하려면 코드 숨김 클래스가 AdminNested.master 확장 BaseMasterPage되어야 합니다. 다음에서 중첩된 마스터 페이지의 코드 숨김 클래스 선언을 업데이트합니다.

Partial Class Admin_AdminNested 
 Inherits System.Web.UI.MasterPage

다음으로 변경:

Partial Class Admin_AdminNested 
 Inherits BaseMasterPage

아직 완료되지 않았습니다. 로 표시된 MustOverride멤버를 재정의해야 합니다 RefreshRecentProductsGrid GridMessageText. 이러한 멤버는 최상위 마스터 페이지에서 사용자 인터페이스를 업데이트하는 데 사용됩니다. 두 최상위 마스터 페이지가 모두 확장BaseMasterPage되므로 이러한 메서드를 구현하지만 실제로는 마스터 페이지만 Site.master 이러한 메서드를 사용합니다.

이러한 멤버를 AdminNested.master구현해야 하지만 이러한 구현은 중첩된 마스터 페이지에서 사용하는 최상위 마스터 페이지에서 동일한 멤버를 호출하기만 하면 됩니다. 예를 들어 관리 섹션의 RefreshRecentProductsGrid 콘텐츠 페이지에서 중첩된 마스터 페이지의 메서드를 호출할 때 중첩된 마스터 페이지는 모두 호출 Site.master 또는 Alternate.master's RefreshRecentProductsGrid 메서드입니다.

이렇게 하려면 다음 지시문을 맨 위에 AdminNested.master추가하여 @MasterType 시작합니다.

<%@ MasterType TypeName="BaseMasterPage" %>

지시문은 @MasterType 강력한 형식의 속성을 코드 Master숨김 클래스에 추가합니다. 그런 다음, 멤버 및 GridMessageText 멤버를 RefreshRecentProductsGrid 재정의하고 호출을 '의 해당 메서드에 위임하기Master만 하면됩니다.

Partial Class Admin_AdminNested 
 Inherits BaseMasterPage 
 Public Overrides Property GridMessageText() As String 
 Get 
 Return Master.GridMessageText 
 End Get 
 Set(ByVal value As String) 
 Master.GridMessageText = value 
 End Set 
 End Property 
 Public Overrides Sub RefreshRecentProductsGrid()
 Master.RefreshRecentProductsGrid()
 End Sub 
End Class

이 코드를 사용하면 관리 섹션의 콘텐츠 페이지를 방문하여 사용할 수 있습니다. 그림 12는 브라우저를 ~/Admin/Products.aspx 통해 볼 때 페이지를 보여 줍니다. 이 페이지에는 중첩된 마스터 페이지에 정의된 관리 지침 상자가 포함되어 있습니다.

관리 섹션의 콘텐츠 페이지에는 각 페이지의 맨 위에 있는 지침이 포함됩니다.

그림 12: 관리 섹션의 콘텐츠 페이지에는 각 페이지의 맨 위에 있는 지침이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).

7단계: 런타임에 적절한 최상위 마스터 페이지 사용

관리 섹션의 모든 콘텐츠 페이지는 완벽하게 작동하지만 모두 동일한 최상위 마스터 페이지를 사용하고 사용자가 ChooseMasterPage.aspx선택한 마스터 페이지를 무시합니다. 이 동작은 중첩된 마스터 페이지에 해당 MasterPageFile 속성이 지시문에 <%@ Master %> 정적으로 설정되어 Site.master 있기 때문입니다.

최종 사용자가 선택한 최상위 마스터 페이지를 사용하려면 세션 변수의 값 MyMasterPage 으로 's MasterPageFile 속성을 설정AdminNested.master해야 합니다. 콘텐츠 페이지의 MasterPageFile 속성을 BasePage설정하기 때문에 중첩된 마스터 페이지의 속성을 BaseMasterPage '코드 숨김 클래스 내 MasterPageFile 또는 AdminNested.master코드 숨김 클래스에 설정한다고 생각할 수 있습니다. 그러나 PreInit 단계가 끝날 때까지 속성을 설정 MasterPageFile 해야 하므로 작동하지 않습니다. 마스터 페이지에서 페이지 수명 주기를 프로그래밍 방식으로 활용할 수 있는 가장 빠른 시간은 초기 단계(PreInit 단계 후에 발생)입니다.

따라서 콘텐츠 페이지에서 중첩된 마스터 페이지의 MasterPageFile 속성을 설정해야 합니다. 마스터 페이지를 사용하는 AdminNested.master 유일한 콘텐츠 페이지는 .에서 AdminBasePage파생됩니다. 따라서 이 논리를 배치할 수 있습니다. 5단계에서는 Page 개체의 MasterPageFile 속성을 "~/Admin/AdminNested.master"로 설정하여 메서드를 오버로드 SetMasterPageFile 합니다. 또한 마스터 페이지의 MasterPageFile 속성을 세션에 저장된 결과로 설정하도록 업데이트 SetMasterPageFile 합니다.

Public Class AdminBasePage 
 Inherits BasePage 
 Protected Overrides Sub SetMasterPageFile() 
 Me.MasterPageFile = "~/Admin/AdminNested.master" 
 Page.Master.MasterPageFile = MyBase.GetMasterPageFileFromSession() 
 End Sub 
End Class

이전 자습서에서 클래스에 BasePage 추가한 메서드는 GetMasterPageFileFromSession 세션 변수 값에 따라 적절한 마스터 페이지 파일 경로를 반환합니다.

이 변경 내용이 적용되면 사용자의 마스터 페이지 선택이 관리 섹션으로 전달됩니다. 그림 13은 그림 12와 동일한 페이지를 보여 주지만 사용자가 마스터 페이지 선택 영역을 Alternate.master변경한 후 .

중첩 관리 페이지에서 사용자가 선택한 최상위 마스터 페이지를 사용합니다.

그림 13: 중첩 관리 페이지에서 사용자가 선택한 최상위 마스터 페이지를 사용합니다(전체 크기 이미지를 보려면 클릭).

요약

콘텐츠 페이지가 마스터 페이지에 바인딩할 수 있는 방법과 마찬가지로 자식 마스터 페이지가 부모 마스터 페이지에 바인딩되도록 하여 중첩된 마스터 페이지를 만들 수 있습니다. 자식 마스터 페이지는 각 부모의 ContentPlaceHolders에 대한 콘텐츠 컨트롤을 정의할 수 있습니다. 그런 다음, 이러한 콘텐츠 컨트롤에 자체 ContentPlaceHolder 컨트롤(및 기타 태그)을 추가할 수 있습니다. 중첩된 마스터 페이지는 모든 페이지가 가장 중요한 모양과 느낌을 공유하지만 사이트의 특정 섹션에는 고유한 사용자 지정이 필요한 대규모 웹 애플리케이션에서 매우 유용합니다.

행복한 프로그래밍!

추가 정보

이 자습서에서 설명하는 항목에 대한 자세한 내용은 다음 리소스를 참조하세요.

작성자 정보

여러 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 가르쳐 자신을 ASP.NET 3.5 24 시간. Scott은 자신의 블로그에서 mitchell@4GuysFromRolla.com 또는 블로그를 통해 연락할 수 있습니다 http://ScottOnWriting.NET.

특별 감사

이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 다음에서 줄을 놓습니다. mitchell@4GuysFromRolla.com

이전