홈페이지>네트워크 프로그래밍 튜토리얼>ASP.NET 튜토리얼

ASP.NET 2.0의 마스터 페이지에 대한 자세한 설명

저자：Eve Cole 업데이트 시간：2009-06-30 16:37:05
웹 디자인 중 한 페이지를 변경할 때 사이트 전체가 바뀌는 문제를 줄이기 위해 vs2003에서 vs2005로 업그레이드한 이후 마스터 개념을 추가했습니다.

이를 "웹 페이지 템플릿"이라고 생각할 수 있습니다. 차이점은 더 이상 모든 페이지를 업데이트할 필요가 없다는 것입니다. 일단 수정하면 모든 웹 페이지가 완전히 변경됩니다.

간단한 마스터 사용법 데모부터 시작해 보겠습니다.

1. 먼저 Visual Studio 2005를 열고 새로운 asp.net 웹사이트, 파일 시스템, C#을 만듭니다.

2. 솔루션 탐색기에서 마우스 오른쪽 버튼을 클릭하여 새 항목을 만듭니다.



3. 마스터 페이지를 선택합니다:



4. MasterPage.master를 열면 내부에 contentplaceholder 컨트롤이 있습니다. 컨트롤에 아무것도 쓰지 않도록 주의하세요.

디자인 보기로 이동하여 이 컨트롤 외부에 머리글 및 바닥글 텍스트를 추가합니다.



5. 저장 후 이를 사용하여 다른 페이지를 만들 수 있습니다. 1. 마스터 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 콘텐츠 페이지 추가를 클릭합니다. 2. aspx 페이지를 생성할 때 솔루션 탐색기에서 새 항목을 만들고 "마스터 페이지 선택"을 선택합니다.



6. 해당 마스터 페이지를 선택하세요



7. 새로 생성된 페이지 소스 코드에는 다음과 같은 몇 개의 문장만 있습니다.


  1. <%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%>
  2. <asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
  3. </asp:Content>

마스터 페이지의 ContentPlaceHolder1 컨트롤에 해당하고 보기 페이지로 변환되는 콘텐츠 컨트롤을 볼 수 있습니다.



8. 머리글과 바닥글의 텍스트가 회색으로 표시되어 있으며, 내용에서만 편집이 가능합니다.

저장한 후 default2.aspx 페이지(F5)를 방문하면 다음 페이지가 표시됩니다.


9. 예상대로 소스 코드를 살펴보겠습니다.


  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www .w3.org/1999/xhtml">
  3. <head><title>
  4. 제목 없음 페이지
  5. </title></head>
  6. <body>
  7. <formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm ">
  8. <div>
  9. <inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/>
  10. </div>
  11. <div>
  12. thisisthepage'sheader<br/>
  13. thispage'scontent:hello,world!<br/>
  14. thisisthepage'sfooter&nbsp;</div>
  15. </form>
  16. </body>
  17. </html>

마스터 콘텐츠는 div에 배치되지만 콘텐츠 페이지는 별도의 div에 배치되지 않습니다. 즉, 마스터의 하위 페이지에 중복 코드가 추가되지 않습니다. 이를 통해 프로그래밍 및 웹 페이지 레이아웃에 큰 유연성을 제공하고 CSS+DIV 위치 지정을 최대한 활용할 수 있으며 테이블 위치 지정도 사용할 수 있습니다. 수정 시 모든 페이지를 수정할 필요는 없습니다.

10. 고정 컨텐츠가 아닌 마스터의 경우 레이아웃에 여러 ContentPlaceHolder1을 사용할 수 있습니다. 다음 예에서는 위치 지정에 테이블을 사용합니다.



11. 해당 하위 페이지에는 두 가지 콘텐츠가 있습니다.



생성된 코드:


  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www .w3.org/1999/xhtml">
  3. <head><title>
  4. 제목 없음 페이지
  5. </title></head>
  6. <body>
  7. <formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm ">
  8. <div>
  9. <inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/>
  10. </div>
  11. <div>
  12. thisisthepage'sheader
  13. <br/>
  14. <table>
  15. <tr>
  16. <td>
  17. ohmyContent1
  18. </td>
  19. <td>
  20. HimyContent2
  21. </td>
  22. </tr>
  23. /table>
  24. 이 페이지의 바닥글&nbsp;
  25. </div>
  26. </form>
  27. </body>
  28. </html>

12. 유연하게 사용하십시오. CSS는 DIV를 사용하여 이 문제를 해결할 수도 있지만 일부 비표준 컨트롤의 모양은 CSS로 제어하기 어렵습니다. MasterPage2.master라는 다른 마스터 세트를 만드는 경우 다음과 같이 중간 동적 설정을 수행할 수 있습니다.

protected void Page_PreInit(개체 전송자, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

먼저 여기로 가보겠습니다. 중첩된 애플리케이션도 사용할 수 있다고 하는데, 일단은 테마와 연계해서 사용해 보겠습니다.
관련 기사