중첩 마스터 페이지(VB)

  • 아티클

작성자 : Scott Mitchell

한 master 페이지를 다른 페이지 내에 중첩하는 방법을 보여 있습니다.

소개

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

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

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

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

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

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

참고

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

중첩 마스터 페이지의 이점

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

참고

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

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

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

첫 번째 옵션은 가장 맛있지 않습니다. master 페이지를 사용하는 요점은 공통 태그를 수동으로 복사하여 새 ASP.NET 페이지에 붙여넣을 필요에서 벗어나는 것입니다. 두 번째 옵션은 허용 가능하지만 가끔만 표시되는 태그를 사용하여 master 페이지를 일괄 처리하고 개발자가 이 태그를 해결하기 위해 master 페이지를 편집하고 특정 태그가 표시되는 시기와 숨겨진 시기를 기억해야 하므로 애플리케이션을 유지 관리하기 어렵게 만듭니다. 이 방법은 이 단일 master 페이지에서 수용해야 하는 점점 더 많은 유형의 웹 페이지의 사용자 지정으로 인해 더 적은 테넌트와 같습니다.

세 번째 옵션은 두 번째 옵션과 함께 표면화된 복잡도 문제를 제거합니다. 그러나 옵션 3의 기본 단점은 공통 레이아웃 Site.master 을 복사하여 새 관리 섹션별 master 페이지에 붙여넣는 것입니다. 나중에 사이트 전체 레이아웃을 변경하려는 경우 두 곳에서 변경해야 합니다.

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

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

1단계: 간단한 Top-Level 마스터 페이지 만들기

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

라는 NestedMasterPages 새 폴더를 만든 다음 이라는 폴더에 Simple.master새 master 페이지 파일을 추가합니다. (이 폴더와 파일이 추가된 후 솔루션 탐색기 스크린샷은 그림 1을 참조하세요.) AlternateStyles.css 스타일시트 파일을 솔루션 탐색기 Designer 끌어다 놓습니다. 그러면 요소의 스타일시트 파일에 <head> 요소가 추가 <link> 되며, 그 후에는 master 페이지의 <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>

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

Visual Studio Designer 로드될 때 간단한 점 master master 페이지입니다.

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

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

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

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

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

참고

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

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

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

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

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

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

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

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

새 콘텐츠 페이지에 콘텐츠 컨트롤이 없습니다.

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

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

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

참고

중첩된 master 페이지의 ContentPlaceHolder 컨트롤 이름을 최상위 master 페이지의 ContentPlaceHolders와 동일하게 명명하는 것이 좋지만 이 명명 대칭은 필요하지 않습니다. 중첩된 master 페이지의 ContentPlaceHolder 컨트롤에 원하는 이름을 지정할 수 있습니다. 그러나 최상위 master 페이지와 중첩된 master 페이지가 동일한 이름을 사용하는 경우 페이지의 영역과 일치하는 ContentPlaceHolders를 더 쉽게 기억할 수 있습니다.

이러한 추가를 SimpleNested.master 수행한 후 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 방금 만든 콘텐츠 페이지를 삭제한 다음 다시 추가하여 master 페이지에 바인딩합니다 SimpleNested.master . 이번에는 Visual Studio에서 이제 에 정의된 ContentPlaceHolders를 참조하는 두 개의 콘텐츠 컨트롤 Default.aspx을 에 SimpleNested.master 추가합니다(그림 6 참조). 를 참조하는 콘텐츠 컨트롤에 "hello, from Default.aspx!" 텍스트를 추가합니다 MainContent.

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

Top-Level 중첩된 마스터 페이지 콘텐츠 페이지의 레이아웃을 받아쓰기

그림 05: Top-Level 중첩 마스터 페이지 콘텐츠 페이지의 레이아웃을 받아쓰기(전체 크기 이미지를 보려면 클릭)

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

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

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

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

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

<%@ 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>

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

Alternate.aspx SimpleNestedAlternate에 바인딩됩니다. master 마스터 페이지

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

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

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

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

<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>

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

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

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

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

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

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

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

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

이 두 가지 과제는 중첩된 master 페이지를 빌드하고 기존 콘텐츠 페이지에서 사용할 때 나타납니다. 이러한 문제가 발생하면 조사하고 분리할 것입니다.

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

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

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

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

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

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

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

중첩된 master 페이지는 4개의 ContentPlaceHolder 컨트롤이 있는 master 페이지에 바인딩되므로 Visual Studio는 새 중첩된 master 페이지 파일의 초기 태그에 4개의 콘텐츠 컨트롤을 추가합니다. 2단계와 3단계에서 수행한 것처럼 각 콘텐츠 컨트롤에 ContentPlaceHolder 컨트롤을 추가하여 최상위 master 페이지의 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>

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

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

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

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

<%@ 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 속성에는 최상위 master 페이지의 해당 ContentPlaceHolder 컨트롤과 동일한 값이 할당됩니다. 또한 관리 섹션별 태그는 ContentPlaceHolder에 MainContent 표시됩니다.

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

중첩 마스터 페이지는 Top-Level 마스터 페이지를 확장하여 관리자에 대한 지침을 포함합니다.

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

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

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

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

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

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

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

Partial Class Admin_Default 
 Inherits BasePage

대상:

Partial Class Admin_Default 
 Inherits AdminBasePage

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

중첩 마스터 페이지는 관리 섹션의 페이지에 특정한 콘텐츠를 정의합니다.

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

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

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

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

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

Partial Class Admin_AdminNested 
 Inherits System.Web.UI.MasterPage

대상:

Partial Class Admin_AdminNested 
 Inherits BaseMasterPage

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

에서 AdminNested.master이러한 멤버를 구현해야 하지만 이러한 모든 구현은 중첩된 master 페이지에서 사용하는 최상위 master 페이지에서 동일한 멤버를 호출하기만 하면 됩니다. instance 경우 관리 섹션의 RefreshRecentProductsGrid 콘텐츠 페이지가 중첩된 master 페이지의 메서드를 호출할 때 중첩된 모든 master 페이지는 차례로 또는 Alternate.master의 RefreshRecentProductsGrid 메서드를 호출 Site.master 해야 합니다.

이를 위해 먼저 의 맨 위에 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 통해 볼 때 페이지를 보여줍니다. 보듯이 페이지에는 중첩된 master 페이지에 정의된 관리 지침 상자가 포함되어 있습니다.

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

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

7단계: 런타임에서 적절한 Top-Level 마스터 페이지 사용

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

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

따라서 콘텐츠 페이지에서 중첩된 master 페이지의 MasterPageFile 속성을 설정해야 합니다. master 페이지를 사용하는 AdminNested.master 유일한 콘텐츠 페이지는 에서 AdminBasePage파생됩니다. 따라서 이 논리를 배치할 수 있습니다. 5단계에서는 Page 개체의 MasterPageFile 속성을 "~/관리/AdminNested.master"로 설정하여 메서드를 오버로드 SetMasterPageFile 합니다. master 페이지의 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 Session 변수 값에 따라 적절한 master 페이지 파일 경로를 반환합니다.

이 변경 내용이 적용되면 사용자의 master 페이지 선택이 관리 섹션으로 전달됩니다. 그림 13은 그림 12와 동일한 페이지를 표시하지만 사용자가 master 페이지 선택을 Alternate.master로 변경한 후

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

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

요약

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

행복한 프로그래밍!

추가 정보

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

저자 정보

여러 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

이전