여러 ContentPlaceHolders 및 기본 콘텐츠(VB)
작성자 : Scott Mitchell
master 페이지에 여러 콘텐츠 장소 표시자를 추가하는 방법과 콘텐츠 장소 표시자에서 기본 콘텐츠를 지정하는 방법을 살펴봅니다.
소개
이전 자습서에서는 master 페이지에서 개발자가 일관된 사이트 전체 레이아웃을 만들 수 ASP.NET 방법을 검토했습니다. 마스터 페이지는 페이지 단위로 사용자 지정할 수 있는 모든 콘텐츠 페이지와 지역에 공통적인 태그를 모두 정의합니다. 이전 자습서에서는 간단한 master 페이지(Site.master)와 두 개의 콘텐츠 페이지(Default.aspx 및 About.aspx)를 만들었습니다. master 페이지는 각각 요소와 웹 양식에 <head> 있는 및 MainContent라는 head 두 개의 ContentPlaceHolders로 구성되었습니다. 콘텐츠 페이지에는 각각 두 개의 콘텐츠 컨트롤이 있지만 에 해당하는 MainContent항목에 대한 태그만 지정했습니다.
의 두 ContentPlaceHolder 컨트롤에서 Site.master알 수 있듯이 master 페이지에는 여러 ContentPlaceHolders가 포함될 수 있습니다. 또한 master 페이지에서 ContentPlaceHolder 컨트롤에 대한 기본 태그를 지정할 수 있습니다. 그런 다음 콘텐츠 페이지에서 필요에 따라 자체 태그를 지정하거나 기본 태그를 사용할 수 있습니다. 이 자습서에서는 master 페이지에서 여러 콘텐츠 컨트롤을 사용하는 방법을 살펴보고 ContentPlaceHolder 컨트롤에서 기본 태그를 정의하는 방법을 알아봅니다.
1단계: 마스터 페이지에 ContentPlaceHolder 컨트롤 추가
많은 웹 사이트 디자인에는 페이지에 따라 사용자 지정된 여러 영역이 화면에 포함되어 있습니다. Site.master이전 자습서에서 만든 master 페이지에는 라는 MainContent웹 양식 내에 단일 ContentPlaceHolder가 포함되어 있습니다. 특히 이 ContentPlaceHolder는 요소 내에 mainContent<div> 있습니다.
그림 1은 브라우저를 통해 볼 때를 보여줍니다 Default.aspx . 빨간색 원을 그리는 영역은 에 해당하는 MainContent페이지별 태그입니다.
그림 01: 원을 그리는 영역에 현재 페이지 단위로 사용자 지정할 수 있는 영역이 표시됩니다(전체 크기 이미지를 보려면 클릭).
그림 1에 표시된 지역 외에도 단원 및 뉴스 섹션 아래의 왼쪽 열에 페이지별 항목을 추가해야 한다고 상상해 보세요. 이를 위해 다른 ContentPlaceHolder 컨트롤을 master 페이지에 추가합니다. 따라가려면 Visual Web Developer에서 master 페이지를 연 Site.master 다음, ContentPlaceHolder 컨트롤을 도구 상자에서 뉴스 섹션 뒤에 있는 디자이너로 끌어옵니다. ContentPlaceHolder의 ID 를 로 LeftColumnContent설정합니다.
그림 02: 마스터 페이지의 왼쪽 열에 ContentPlaceHolder 컨트롤 추가(전체 크기 이미지를 보려면 클릭)
master 페이지에 ContentPlaceHolder를 추가 LeftColumnContent 하면 로 설정된 페이지에 ContentPlaceHolderID Content 컨트롤을 포함하여 페이지 단위로 이 지역의 콘텐츠를 정의할 LeftColumnContent수 있습니다. 이 프로세스는 2단계에서 검토합니다.
2단계: 콘텐츠 페이지에서 새 ContentPlaceHolder에 대한 콘텐츠 정의
웹 사이트에 새 콘텐츠 페이지를 추가할 때 Visual Web Developer는 선택한 master 페이지의 각 ContentPlaceHolder에 대한 페이지에 콘텐츠 컨트롤을 자동으로 만듭니다. 1단계의 LeftColumnContent master 페이지에 ContentPlaceHolder를 추가한 후 새 ASP.NET 페이지에는 이제 세 개의 콘텐츠 컨트롤이 있습니다.
이를 설명하기 위해 master 페이지에 바인딩된 Site.master 라는 MultipleContentPlaceHolders.aspx 루트 디렉터리에 새 콘텐츠 페이지를 추가합니다. Visual Web Developer는 다음 선언적 태그를 사용하여 이 페이지를 만듭니다.
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="MultipleContentPlaceHolders.aspx.vb" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>
ContentPlaceHolders(Content2)를 참조하는 콘텐츠 컨트롤에 MainContent 일부 콘텐츠를 입력합니다. 다음으로 Content 컨트롤(ContentPlaceHolder를 참조하는)에 다음 태그 Content3 를 LeftColumnContent 추가합니다.
<h3>Page-Specific Content</h3>
<ul>
<li>This content is defined in the content page.</li>
<li>The master page has two regions in the Web Form that are editable on a
page-by-page basis.</li>
</ul>
이 태그를 추가한 후 브라우저를 통해 페이지를 방문합니다. 그림 3에서 보여 주듯이 콘텐츠 컨트롤에 Content3 배치된 태그는 뉴스 섹션 아래의 왼쪽 열에 표시됩니다(빨간색 원). 에 Content2 배치된 태그는 페이지의 오른쪽 부분에 표시됩니다(파란색 원).
그림 03: 이제 왼쪽 열에는 뉴스 섹션 아래에 Page-Specific 콘텐츠가 포함됩니다(전체 크기 이미지를 보려면 클릭).
기존 콘텐츠 페이지에서 콘텐츠 정의
새 콘텐츠 페이지를 만들면 1단계에서 추가한 ContentPlaceHolder 컨트롤이 자동으로 통합됩니다. 하지만 두 개의 기존 콘텐츠 페이지인 About.aspx 및 Default.aspx 에는 ContentPlaceHolder에 대한 콘텐츠 컨트롤이 LeftColumnContent 없습니다. 이 두 기존 페이지에서 이 ContentPlaceHolder에 대한 콘텐츠를 지정하려면 콘텐츠 컨트롤을 직접 추가해야 합니다.
대부분의 ASP.NET 웹 컨트롤과 달리 Visual Web Developer 도구 상자에는 콘텐츠 컨트롤 항목이 포함되지 않습니다. 콘텐츠 컨트롤의 선언적 태그를 원본 보기에 수동으로 입력할 수 있지만 디자인 보기를 사용하는 것이 더 쉽고 빠릅니다. About.aspx 페이지를 열고 디자인 보기로 전환합니다. 그림 4에서 알 수 LeftColumnContent 있듯이 ContentPlaceHolder는 디자인 보기에 나타납니다. 이 보기 위로 마우스를 가져가면 제목에 "LeftColumnContent(마스터)"가 표시됩니다. 제목에 "마스터"가 포함되면 이 ContentPlaceHolder의 페이지에 정의된 콘텐츠 컨트롤이 없음을 나타냅니다. 의 경우 MainContent와 같이 ContentPlaceHolder에 대한 콘텐츠 컨트롤이 있는 경우 제목은 "ContentPlaceHolderID (사용자 지정)"를 읽습니다.
ContentPlaceHolder에 대한 LeftColumnContent 콘텐츠 컨트롤을 About.aspx에 추가하려면 ContentPlaceHolder의 스마트 태그를 확장하고 사용자 지정 콘텐츠 만들기 링크를 클릭합니다.
그림 04: ContentPlaceHolder를 LeftColumnContent 표시하는 디자인 보기About.aspx(전체 크기 이미지를 보려면 클릭)
사용자 지정 콘텐츠 만들기 링크를 클릭하면 페이지에서 필요한 콘텐츠 컨트롤이 생성되고 해당 속성이 ContentPlaceHolderID ContentPlaceHolder의 ID로 설정됩니다. 예를 들어 에서 지역에 About.aspx 대한 LeftColumnContent 사용자 지정 콘텐츠 만들기 링크를 클릭하면 다음 선언적 태그가 페이지에 추가됩니다.
<asp:Content ID="Content3" runat="server"
contentplaceholderid="LeftColumnContent">
</asp:Content>
콘텐츠 컨트롤 생략
ASP.NET 모든 콘텐츠 페이지에 master 페이지에 정의된 각 ContentPlaceHolder에 대한 콘텐츠 컨트롤을 포함할 필요가 없습니다. 콘텐츠 컨트롤을 생략하면 ASP.NET 엔진은 master 페이지의 ContentPlaceHolder 내에 정의된 태그를 사용합니다. 이 태그는 ContentPlaceHolder의 기본 콘텐츠 라고 하며, 일부 지역의 콘텐츠가 대부분의 페이지에서 일반적이지만 소수의 페이지에 대해 사용자 지정해야 하는 시나리오에서 유용합니다. 3단계에서는 master 페이지에서 기본 콘텐츠 지정을 살펴봅니다.
현재 Default.aspx 에는 및 MainContent ContentPlaceHolders에 대한 head 두 개의 콘텐츠 컨트롤이 포함되어 있습니다. 에 대한 LeftColumnContent콘텐츠 컨트롤이 없습니다. 따라서 가 Default.aspx 렌더링되면 LeftColumnContent ContentPlaceHolder의 기본 콘텐츠가 사용됩니다. 이 ContentPlaceHolder에 대한 기본 콘텐츠를 아직 정의하지 않았기 때문에 이 지역에 대한 태그가 내보내지지 않습니다. 이 동작을 확인하려면 브라우저를 통해 방문 Default.aspx 하세요. 그림 5와 같이 뉴스 섹션 아래의 왼쪽 열에는 태그가 내보내지지 않습니다.
그림 05: ContentPlaceHolder에 대해 LeftColumnContent 렌더링된 콘텐츠가 없습니다(전체 크기 이미지를 보려면 클릭).
3단계: 마스터 페이지에서 기본 콘텐츠 지정
일부 웹 사이트 디자인에는 하나 또는 두 개의 예외를 제외하고 사이트의 모든 페이지에 대해 콘텐츠가 동일한 지역이 포함됩니다. 사용자 계정을 지원하는 웹 사이트를 고려합니다. 이러한 사이트에는 방문자가 사이트에 로그인하기 위해 자격 증명을 입력할 수 있는 로그인 페이지가 필요합니다. 로그인 프로세스를 신속하게 처리하기 위해 웹 사이트 디자이너는 사용자가 로그인 페이지를 명시적으로 방문하지 않고도 로그인할 수 있도록 모든 페이지의 왼쪽 위 모서리에 사용자 이름 및 암호 텍스트 상자를 포함할 수 있습니다. 이러한 사용자 이름 및 암호 텍스트 상자는 대부분의 페이지에서 유용하지만 로그인 페이지에서 중복되며 사용자의 자격 증명에 대한 텍스트 상자가 이미 포함되어 있습니다.
이 디자인을 구현하려면 master 페이지의 왼쪽 위 모서리에 ContentPlaceHolder 컨트롤을 만들 수 있습니다. 왼쪽 위 모서리에 사용자 이름 및 암호 텍스트 상자를 표시해야 하는 각 페이지는 이 ContentPlaceHolder에 대한 콘텐츠 컨트롤을 만들고 필요한 인터페이스를 추가합니다. 반면 로그인 페이지는 이 ContentPlaceHolder에 대한 콘텐츠 컨트롤 추가를 생략하거나 태그가 정의되지 않은 콘텐츠 컨트롤을 만듭니다. 이 방법의 단점은 사이트에 추가하는 모든 페이지에 사용자 이름 및 암호 텍스트 상자를 추가해야 한다는 것입니다(로그인 페이지 제외). 이것은 문제를 요구하고있다. 이러한 텍스트 상자를 페이지에 추가하는 것을 잊어버리거나, 더 나쁜 경우 인터페이스를 올바르게 구현하지 못할 수 있습니다(아마도 두 개 대신 하나의 텍스트 상자만 추가).
더 나은 해결 방법은 사용자 이름 및 암호 텍스트 상자를 ContentPlaceHolder의 기본 콘텐츠로 정의하는 것입니다. 이렇게 하면 사용자 이름 및 암호 텍스트 상자(instance 로그인 페이지)를 표시하지 않는 몇 페이지의 기본 콘텐츠만 재정의하면 됩니다. ContentPlaceHolder 컨트롤에 대한 기본 콘텐츠를 지정하는 방법을 설명하기 위해 방금 설명한 시나리오를 구현해 보겠습니다.
참고
이 자습서의 나머지 부분에서는 로그인 페이지를 제외한 모든 페이지의 왼쪽 열에 로그인 인터페이스를 포함하도록 웹 사이트를 업데이트합니다. 그러나 이 자습서에서는 사용자 계정을 지원하도록 웹 사이트를 구성하는 방법을 검토하지 않습니다. 이 항목에 대한 자세한 내용은 내 Forms 인증, 권한 부여, 사용자 계정 및 역할 자습서를 참조하세요.
ContentPlaceHolder 추가 및 기본 콘텐츠 지정
Site.master master 페이지를 열고 레이블 및 단원 섹션 사이의 왼쪽 열에 DateDisplay 다음 태그를 추가합니다.
<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
<asp:Login ID="QuickLogin" runat="server"
TitleText="<h3>Sign In</h3>"
FailureAction="RedirectToLoginPage">
</asp:Login>
</asp:ContentPlaceHolder>
이 태그를 추가한 후 master 페이지의 디자인 보기는 그림 6과 유사해야 합니다.
그림 06: 마스터 페이지에 로그인 컨트롤이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
이 ContentPlaceHolder QuickLoginUI에는 로그인 웹 컨트롤이 기본 콘텐츠로 있습니다. 로그인 컨트롤은 로그인 단추와 함께 사용자에게 사용자 이름 및 암호를 묻는 사용자 인터페이스를 표시합니다. 로그인 단추를 클릭하면 로그인 컨트롤이 멤버 자격 API에 대해 사용자의 자격 증명의 유효성을 내부적으로 검사합니다. 실제로 이 로그인 컨트롤을 사용하려면 멤버 자격을 사용하도록 사이트를 구성해야 합니다. 이 항목은 이 자습서의 scope 넘어가고 있습니다. 사용자 계정을 지원하는 웹 애플리케이션을 빌드하는 방법에 대한 자세한 내용은 내 양식 인증, 권한 부여, 사용자 계정 및 역할 자습서를 참조하세요.
로그인 컨트롤의 동작 또는 모양을 자유롭게 사용자 지정할 수 있습니다. 및 FailureAction의 두 가지 속성을 TitleText 설정했습니다. TitleText 기본값인 "로그인"인 속성 값은 컨트롤의 사용자 인터페이스 맨 위에 표시됩니다. "로그인" 텍스트를 요소로 <h3> 표시하도록 이 속성을 설정했습니다. 속성은 FailureAction 사용자의 자격 증명이 잘못된 경우 수행할 작업을 나타냅니다. 기본값은 의 값으로 설정되며, 이 값 Refresh은 사용자를 동일한 페이지에 두고 로그인 컨트롤 내에 실패 메시지를 표시합니다. 자격 증명이 잘못된 경우 사용자를 로그인 페이지로 보내는 로 변경 RedirectToLoginPage했습니다. 사용자가 다른 페이지에서 로그인을 시도할 때 사용자를 로그인 페이지로 보내는 것을 선호하지만, 로그인 페이지에는 왼쪽 열에 쉽게 맞지 않는 추가 지침과 옵션이 포함될 수 있기 때문에 실패합니다. 예를 들어 로그인 페이지에는 잊어버린 암호를 검색하거나 새 계정을 만드는 옵션이 포함될 수 있습니다.
로그인 페이지 만들기 및 기본 콘텐츠 재정의
master 페이지가 완료되면 다음 단계는 로그인 페이지를 만드는 것입니다. 사이트의 Login.aspx루트 디렉터리에 ASP.NET 페이지를 추가하고 master 페이지에 바인딩 Site.master 합니다. 이렇게 하면 에 정의된 각 ContentPlaceHolders에 대해 하나씩 4개의 콘텐츠 컨트롤이 있는 Site.master페이지가 생성됩니다.
콘텐츠 컨트롤에 로그인 컨트롤을 MainContent 추가합니다. 마찬가지로 지역에 콘텐츠를 자유롭게 추가할 수 LeftColumnContent 있습니다. 그러나 ContentPlaceHolder에 대한 콘텐츠 컨트롤은 QuickLoginUI 비워 두어야 합니다. 이렇게 하면 로그인 컨트롤이 로그인 페이지의 왼쪽 열에 표시되지 않습니다.
및 LeftColumnContent 지역에 대한 MainContent 콘텐츠를 정의한 후 로그인 페이지의 선언적 태그는 다음과 유사하게 표시됩니다.
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
Sign In</h2>
<p>
<asp:Login ID="Login1" runat="server" TitleText="">
</asp:Login>
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
<h3>Sign In Tasks</h3>
<ul>
<li>Create a New Account</li>
<li>Recover Forgotten Password</li>
</ul>
<p>TODO: Turn the above text into links...</p>
</asp:Content>
그림 7은 브라우저를 통해 볼 때 이 페이지를 보여줍니다. 이 페이지는 ContentPlaceHolder에 대한 QuickLoginUI 콘텐츠 컨트롤을 지정하므로 master 페이지에 지정된 기본 콘텐츠를 재정의합니다. 그 결과 master 페이지의 디자인 보기에 표시되는 로그인 컨트롤(그림 6 참조)이 이 페이지에 렌더링되지 않습니다.
그림 07: 로그인 페이지에서 ContentPlaceHolder의 기본 콘텐츠를 다시 표시 QuickLoginUI 합니다(전체 크기 이미지를 보려면 클릭).
새 페이지에서 기본 콘텐츠 사용
로그인 페이지를 제외한 모든 페이지의 왼쪽 열에 로그인 컨트롤을 표시하려고 합니다. 이를 위해 로그인 페이지를 제외한 모든 콘텐츠 페이지는 ContentPlaceHolder에 대한 콘텐츠 컨트롤을 QuickLoginUI 생략해야 합니다. 콘텐츠 컨트롤을 생략하면 ContentPlaceHolder의 기본 콘텐츠가 대신 사용됩니다.
기존 콘텐츠 페이지인 Default.aspx, About.aspx및 MultipleContentPlaceHolders.aspx 는 ContentPlaceHolder 컨트롤을 master 페이지에 추가하기 전에 생성되었기 때문에 에 대한 QuickLoginUI 콘텐츠 컨트롤을 포함하지 않습니다. 따라서 이러한 기존 페이지를 업데이트할 필요가 없습니다. 그러나 웹 사이트에 추가된 새 페이지에는 기본적으로 ContentPlaceHolder에 대한 QuickLoginUI 콘텐츠 컨트롤이 포함됩니다. 따라서 새 콘텐츠 페이지를 추가할 때마다 이러한 콘텐츠 컨트롤을 제거해야 합니다(로그인 페이지의 경우와 같이 ContentPlaceHolder의 기본 콘텐츠를 재정의하지 않는 한).
콘텐츠 컨트롤을 제거하려면 원본 보기에서 선언적 태그를 수동으로 삭제하거나 디자인 보기에서 스마트 태그에서 마스터의 콘텐츠로 기본값 링크를 선택할 수 있습니다. 두 방법 중 하나가 페이지에서 콘텐츠 컨트롤을 제거하고 동일한 순 효과를 생성합니다.
그림 8은 브라우저를 통해 볼 때를 보여줍니다 Default.aspx . Default.aspx 선언적 태그에 두 개의 Content 컨트롤만 지정되어 있습니다. 하나는 에 대해head, 다른 하나는 에 대해 MainContent지정됩니다. 따라서 및 QuickLoginUI ContentPlaceHolders에 LeftColumnContent 대한 기본 콘텐츠가 표시됩니다.
그림 08: 및 QuickLoginUI ContentPlaceHolders에 LeftColumnContent 대한 기본 콘텐츠가 표시됩니다(전체 크기 이미지를 보려면 클릭).
요약
ASP.NET master 페이지 모델을 사용하면 master 페이지에서 임의의 개수의 ContentPlaceHolders를 사용할 수 있습니다. 또한 ContentPlaceHolders에는 콘텐츠 페이지에 해당 콘텐츠 컨트롤이 없는 경우 내보내지는 기본 콘텐츠가 포함됩니다. 이 자습서에서는 master 페이지에 추가 ContentPlaceHolder 컨트롤을 포함하는 방법과 새 페이지와 기존 ASP.NET 페이지에서 이러한 새 ContentPlaceHolders에 대한 콘텐츠 컨트롤을 정의하는 방법을 알아보았습니다. 또한 ContentPlaceHolder에서 기본 콘텐츠를 지정하는 방법을 살펴보았습니다. 이는 소수의 페이지만 특정 지역 내에서 표준화된 콘텐츠를 사용자 지정해야 하는 시나리오에서 유용합니다.
다음 자습서에서는 ContentPlaceHolder를 좀 더 자세히 살펴보고 head , 페이지 단위로 제목, 메타 태그 및 기타 HTML 헤더를 선언적이고 프로그래밍 방식으로 정의하는 방법을 살펴봅니다.
행복한 프로그래밍!
저자 정보
여러 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 티치 유어셀프 ASP.NET 3.5 24 시간. Scott은 에서 mitchell@4GuysFromRolla.com 또는 에서 자신의 블로그 http://ScottOnWriting.NET를 통해 연락할 수 있습니다.
특별 감사
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 Suchi Banerjee였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기