이 자습서에서는 보기 master 페이지를 활용하여 애플리케이션의 여러 페이지에 대한 공통 페이지 레이아웃을 만드는 방법을 알아봅니다. 예를 들어 보기 master 페이지를 사용하여 2열 페이지 레이아웃을 정의하고 웹 애플리케이션의 모든 페이지에 대해 2열 레이아웃을 사용할 수 있습니다.
보기 마스터 페이지를 사용하여 페이지 레이아웃 만들기
이 자습서에서는 보기 master 페이지를 활용하여 애플리케이션의 여러 페이지에 대한 공통 페이지 레이아웃을 만드는 방법을 알아봅니다. 예를 들어 보기 master 페이지를 사용하여 2열 페이지 레이아웃을 정의하고 웹 애플리케이션의 모든 페이지에 대해 2열 레이아웃을 사용할 수 있습니다.
보기 master 페이지를 활용하여 애플리케이션의 여러 페이지에서 공통 콘텐츠를 공유할 수도 있습니다. 예를 들어 웹 사이트 로고, 탐색 링크 및 배너 광고를 보기 master 페이지에 배치할 수 있습니다. 이렇게 하면 애플리케이션의 모든 페이지에 이 콘텐츠가 자동으로 표시됩니다.
이 자습서에서는 새 보기 master 페이지를 만들고 master 페이지를 기반으로 새 보기 콘텐츠 페이지를 만드는 방법을 알아봅니다.
보기 마스터 페이지 만들기
먼저 2열 레이아웃을 정의하는 보기 master 페이지를 만들어 보겠습니다. Views\Shared 폴더를 마우스 오른쪽 단추로 클릭하고 메뉴 옵션 추가, 새 항목을 선택하고 MVC 보기 마스터 페이지 템플릿을 선택하여 MVC 프로젝트에 새 보기 master 페이지를 추가합니다(그림 1 참조).
그림 01: 보기 master 페이지 추가(전체 크기 이미지를 보려면 클릭)
애플리케이션에서 둘 이상의 보기 master 페이지를 만들 수 있습니다. 각 보기 master 페이지는 다른 페이지 레이아웃을 정의할 수 있습니다. 예를 들어 특정 페이지에는 2열 레이아웃이 있고 다른 페이지에는 3열 레이아웃이 포함될 수 있습니다.
보기 master 페이지는 표준 ASP.NET MVC 보기와 매우 유사합니다. 그러나 일반 보기와 달리 보기 master 페이지에는 하나 이상의 <asp:ContentPlaceHolder> 태그가 포함됩니다. 태그는 <contentplaceholder> 개별 콘텐츠 페이지에서 재정의할 수 있는 master 페이지의 영역을 표시하는 데 사용됩니다.
예를 들어 목록 1의 보기 master 페이지는 2열 레이아웃을 정의합니다. 여기에는 두 개의 <contentplaceholder> 태그가 포함되어 있습니다. 각 열에 대해 하나씩 <ContentPlaceHolder> .
목록 1 – Views\Shared\Site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
html
{
background-color:gray;
}
.column
{
float:left;
width:300px;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:500px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<h1>My Website</h1>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
목록 1의 보기 master 페이지의 본문에는 두 열에 해당하는 두 개의 <div> 태그가 포함되어 있습니다. Cascading Style Sheet 열 클래스는 두 태그 모두 <div> 에 적용됩니다. 이 클래스는 master 페이지의 맨 위에 선언된 스타일시트에 정의됩니다. 디자인 보기로 전환하여 보기 master 페이지를 렌더링하는 방법을 미리 볼 수 있습니다. 소스 코드 편집기의 왼쪽 아래에 있는 디자인 탭을 클릭합니다(그림 2 참조).
그림 02: 디자이너에서 master 페이지 미리 보기(전체 크기 이미지를 보려면 클릭)
콘텐츠 보기 페이지 만들기
보기 master 페이지를 만든 후 보기 master 페이지를 기반으로 하나 이상의 보기 콘텐츠 페이지를 만들 수 있습니다. 예를 들어 Views\Home 폴더를 마우스 오른쪽 단추로 클릭하고 , 추가, 새 항목을 선택하고,MVC 콘텐츠 페이지 보기 템플릿을 선택하고, Index.aspx라는 이름을 입력하고, 추가 단추를 클릭하여 홈 컨트롤러에 대한 인덱스 보기 콘텐츠 페이지를 만들 수 있습니다(그림 3 참조).
그림 03: 보기 콘텐츠 페이지 추가(전체 크기 이미지를 보려면 클릭)
추가 단추를 클릭하면 보기 콘텐츠 페이지와 연결할 보기 master 페이지를 선택할 수 있는 새 대화 상자가 나타납니다(그림 4 참조). 사이트로 이동할 수 있습니다. master 이전 섹션에서 만든 master 페이지를 봅니다.
그림 04: master 페이지 선택(전체 크기 이미지를 보려면 클릭)
사이트를 기반으로 새 보기 콘텐츠 페이지를 만든 후 master master 페이지에서는 목록 2에서 파일을 가져옵니다.
목록 2 – Views\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
이 보기에는 보기 master 페이지의 각 <asp:ContentPlaceHolder> 태그에 해당하는 태그가 포함되어 <asp:Content> 있습니다. 각 <asp:Content> 태그에는 재정의하는 특정 <asp:ContentPlaceHolder> 을 가리키는 ContentPlaceHolderID 특성이 포함되어 있습니다.
또한 목록 2의 콘텐츠 보기 페이지에는 일반적인 여는 HTML 태그와 닫는 HTML 태그가 포함되어 있지 않습니다. 예를 들어 열기 및 닫기 <html> 또는 <head> 태그를 포함하지 않습니다. 모든 일반 열기 및 닫는 태그는 보기 master 페이지에 포함됩니다.
보기 콘텐츠 페이지에 표시하려는 모든 콘텐츠는 태그 내에 <asp:Content> 배치해야 합니다. 이러한 태그 외부에 HTML 또는 기타 콘텐츠를 배치하면 페이지를 보려고 할 때 오류가 발생합니다.
콘텐츠 보기 페이지의 master 페이지에서 모든 <asp:ContentPlaceHolder> 태그를 재정의할 필요는 없습니다. 태그를 특정 콘텐츠로 <asp:ContentPlaceHolder> 바꾸려는 경우에만 태그를 재정의해야 합니다.
예를 들어 목록 3의 수정된 인덱스 보기에는 두 개의 <asp:Content> 태그만 포함됩니다. 각 태그에는 <asp:Content> 일부 텍스트가 포함됩니다.
목록 3 – Views\Home\Index.aspx (modified)
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Content in first column!</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h1>Content in second column!</h1>
</asp:Content>
목록 3의 보기가 요청되면 그림 5에서 페이지를 렌더링합니다. 보기는 두 개의 열이 있는 페이지를 렌더링합니다. 또한 보기 콘텐츠 페이지의 콘텐츠가 보기 master 페이지의 콘텐츠와 병합됩니다.
그림 05: 인덱스 보기 콘텐츠 페이지(전체 크기 이미지를 보려면 클릭)
마스터 페이지 콘텐츠 보기 수정
보기 master 페이지로 작업할 때 거의 즉시 발생하는 한 가지 문제는 다른 보기 콘텐츠 페이지가 요청될 때 보기 master 페이지 콘텐츠를 수정하는 문제입니다. 예를 들어 웹 애플리케이션의 각 페이지에 고유한 제목이 있어야 합니다. 그러나 제목은 보기 콘텐츠 페이지가 아닌 보기 master 페이지에서 선언됩니다. 그렇다면 각 보기 콘텐츠 페이지의 페이지 제목을 사용자 지정하려면 어떻게 해야 할까요?
보기 콘텐츠 페이지에 표시되는 제목을 수정하는 방법에는 두 가지가 있습니다. 먼저 보기 콘텐츠 페이지의 맨 위에 선언된 지시문의 <%@ page %> 제목 특성에 페이지 제목을 할당할 수 있습니다. 예를 들어 페이지 제목 "Super Great Website"를 인덱스 보기에 할당하려는 경우 인덱스 보기의 맨 위에 다음 지시문을 포함할 수 있습니다.
<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>
인덱스 보기가 브라우저에 렌더링되면 원하는 제목이 브라우저 제목 표시줄에 표시됩니다.
타이틀 특성이 작동하려면 master 보기 페이지가 충족되어야 하는 한 가지 중요한 요구 사항이 있습니다. 보기 master 페이지에는 헤더에 <head runat="server"> 대한 일반 <head> 태그 대신 태그가 포함되어야 합니다. 태그에 <head> runat="server" 특성이 포함되어 있지 않으면 제목이 표시되지 않습니다. 기본 보기 master 페이지에는 필수 <head runat="server"> 태그가 포함됩니다.
개별 보기 콘텐츠 페이지에서 master 페이지 콘텐츠를 수정하는 다른 방법은 태그에서 <asp:ContentPlaceHolder> 수정하려는 지역을 래핑하는 것입니다. 예를 들어 제목뿐만 아니라 master 보기 페이지에서 렌더링된 메타 태그도 변경하려는 경우를 생각해 보세요. 목록 4의 master 보기 페이지에는 태그 내에 태그가 <asp:ContentPlaceHolder><head> 포함되어 있습니다.
목록 4 – Views\Shared\Site2.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<asp:ContentPlaceHolder ID="head" runat="server">
<title>Please change my title</title>
<meta name="description" content="Please provide a description" />
<meta name="keywords" content="keyword1,keyword2" />
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
목록 4의 <asp:ContentPlaceHolder> 태그에는 기본 콘텐츠인 기본 제목 및 기본 메타 태그가 포함됩니다. 개별 보기 콘텐츠 페이지에서 이 <asp:ContentPlaceHolder> 태그를 재정의하지 않으면 기본 콘텐츠가 표시됩니다.
목록 5의 콘텐츠 보기 페이지는 사용자 지정 제목 및 사용자 지정 메타 태그를 표시하기 위해 태그를 재정 <asp:ContentPlaceHolder> 의합니다.
목록 5 – Views\Home\Index2.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>The Index2 Page</title>
<meta name="description" content="Description of Index2 page" />
<meta name="keywords" content="asp.net,mvc,cool,groovy" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Just some content in the body of the page.
</asp:Content>
요약
이 자습서에서는 master 페이지를 보고 콘텐츠 페이지를 보는 기본 소개를 제공했습니다. 새 보기 master 페이지를 만들고 이를 기반으로 콘텐츠 보기 페이지를 만드는 방법을 알아보았습니다. 또한 특정 보기 콘텐츠 페이지에서 보기 master 페이지의 콘텐츠를 수정하는 방법도 검토했습니다.