Hi Hi

'마스터 페이지 코드'에 해당되는 글 1건

  1. 11장. 마스터 페이지(Master Page) (2)

11장. 마스터 페이지(Master Page)

 

01.  마스터 페이지 들어가기

마스터 페이지란?
-  (.master) 라는 확장자를 가지면서 전체 웹사이트의 공통적인 구조를 정의하는 새로운 개념의 페이지이다.
-  상단 영역, 탐색 경로 영역, 하단 영역은 모든 웹 사이트에 공통적으로 적용되는 영역이며 중간에 있는 내용만
   각 페이지에 따라 바뀌게 된다.
   이 처럼 웹 사이트의 공통 영역과 공통 영역이 놓여져 있는 전체적인 큰 틀을 정의하는것 마스터 페이지 이다.



마스퍼 페이지가 나오게 된 배경


- 포함 파일 ( Include File ) : 웹 사이트의 공통 영역들은 하나의 물리적인 파일로 분리해 놓고 필요한 부분을 포함 
                                        시켜 사용하던 방법이다.
 그러나 프로그래밍적으로 제어하기 힘들고 포함된 파일에서 잘못된 태그 하나가 전체 웹 사이트의 디자인에 영향을 줄 수 있다는 단점이 있다. 

- 사용자 정의 컨트롤 ( User Controls ) : 공통적으로 사용되는 부분들을 하나의 모듈로 만들어 여러 페이지에서
                                                        끌아다 쓸 수 있도록 만든 컨트롤이다.
 그러나 공통영역들이 포함된 웹 사이트 전체의 틀은 정의 할수 없다.

포함 파일과 사용자 정의 컨트롤을 보안하기 위하여 나온것이다.

공통 영역과 공통 영역들이 웹 사이트에서 자리잡고 있는 위치를 마스터 페이지에서 한 번에 정의한다. 개발자는 각 페이지를 만들 때 포함시켜야 할 공통 영역에 대해 신경쓰지 않아도 되며, 웹 사이트 전체 디자인과 관련된 사항이 발생하더라도 이 마스터 페이지를 변경하는 것만으로 모든 페이지를 변경할 수 있다.



02. 마스터 페이지 사용하기

기본적인 마스터 페이지

새 항목 추가 - '마스터 페이지' 를 추가한다. 


새 항목 추가 - '마스터 페이지를 사용한 웹 폼' 을 추가한다.


마스터 페이지 선택 대화상자에서 마스터 페이지(MasterPage1.master)를 선택한다.



마스터 페이지 예제[MasterPage1.master]

마스터페이지[MasterPage1.master]

<%@ Master Language="C#" %>
 .
 .
 .

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>마스터 페이지 예제</h3>

        <table width="550" border="1">
        <tr>
            <td style = "width: 100px;">
                <img src="
http://imgnews.naver.com/image/020/2009/02/23/200902230440.jpg" alt="로고" />
            </td>
            <td valign="bottom">
            <a href= "Ex01.aspx">Home </a>" | <a  href= "Ex01_1.aspx"> 사이트 소개</a> |공지사항|Q&A 게시판| 자료실
            </td>
        </tr>
        <tr>
            <td valign="top">
            <a href="Ex01.aspx">Home</a><br />
            <a href="Ex01_1.aspx">사이트 소개</a><br /> 공지사항<br /> Q&A 게시판 <br /> 자료실<br />
            </td>
            <td style="height: 150px;" valign="top">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder></td> // 콘텐츠 페이지를 마스터 페이지와 바인딩하는 역학을 한다.
        </tr>
        <tr>
        <td colspan= "2"> Copyright & copy; 2006 닷네프로.All rights reserved.</td>
        </tr>
        </table>
    </div>
    </form>
</body>


콘텐츠 페이지 [Ex01.aspx]
 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage1.Master" AutoEventWireup="true" CodeBehind="Ex01.aspx.cs" Inherits="WebApplication8.Ex01"  %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br /> // 마스터 페이지의 ContentPlaceHolder 컨트롤에 렌더링할 콘텐츠(내용)를 정의한다.
<b>메인 페이지 입니다</b>
</asp:Content>



마스터 페이지에서 기본 콘텐츠 정의하기
마스터 페이지[MasterPage2.master]

 <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat=Server">
    Content Page : ContentPlaceHolder1 입니다.

<%@ Master Language="C#" %>

<!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 runat="server">
    <title>기본 콘텐츠 정의하기</title>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>기본 콘텐츠 정의 예제</h3>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
        <br />

        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
         이것은 마스터 페이지의 ContentPlaceHolder2에 정의한 기본 콘텐츠입니다.
        </asp:ContentPlaceHolder> // 여기에 Content 컨트롤을 바인딩 시키지 않으면 ContentPlaceHolder
                                                    컨트롤의 기본 콘텐츠가 그대로 렌더링 된다.

   </div>
    </form>
</body>
</html>


콘텐츠 페이지[Ex02.aspx]

 <%@ Page Title="기본콘텐츠 정의 예제" Language="C#" MasterPageFile="~/MasterPage2.Master"  %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    콘텐츠 페이지 : content1 입니다.
</asp:Content>


콘텐츠 페이지[Ex02_2.aspx]

 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage2.Master"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    콘텐츠 페이지 : Content1 입니다.
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    콘텐츠 페이지 : Content2 입니다.
</asp:Content
> // 마스터 페이지에 정의된 기본 콘텐츠는 모두 무시되고 콘텐츠 페이지에서
                           정의한 내용이 렌더링 된다.




마스터 페이지와 콘텐츠 페이지의 이벤트 실행 순서

마스터페이지[MasterPage3.master]

 <%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        Response.Write("마스터페이지:" +" Page_Init" + " <br>");
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("<b>마스터페이지:" + "Page_Load" +"</b><br>");
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        Response.Write("마스터페이지:" + "Page_PreRender" +"<br/>");
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
         Response.Write("<b> 마스터페이지:" + "Button1_Click" +"<b><br/>");
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>이벤트 실행 순서</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:Button ID="Button1" runat="server" Text="마스터 페이지 버튼"
            onclick="Button1_Click" />
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>


콘텐츠 페이지[Ex03.aspx]

 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage3.Master"  %>

<script runat="server">

    protected void Page_Init(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "Init" + "<br/>");
    }

    protected void Page_PreLoad(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "PreLoad" + "<br/>");
    }
   
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "Load" + "<br/>");
    }

    protected void Page_LoadComplete(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "LoadComplete" + "<br/>");
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "PreRender" + "<br/>");
    }

    protected void Page_PreRenderComplete(object sender, EventArgs e)
    {
        Response.Write("콘텐츠 페이지:" + "PreRenderComplete" + "<br/>");
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("<b>콘텐츠 페이지:" + "Button1_Click 이벤트" +"</b><br/>");
    }
   
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:Button ID="Button1" runat="server" Text="컨텐츠 페이지 버튼" onclick="Button1_Click" />

</asp:Content>


콘텐츠 페이지의 Load 이벤트가 마스터 페이지의 Load 이벤트보다 먼저 일어난다.
마스터 페이지의 Load 이벤트에서 초기화한 정보들을 콘텐츠 페이지에서 접근하려면 콘텐츠 페이지의 이벤트는 Load 이벤트가 아닌 LoadComplete 또는 PreRender 이벤트 등에서 접근해야 한다.



콘텐츠 페이지에서 마스터 페이지로 접근하기

마스터 페이지[MasterPage4.master]

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage4.master.cs" Inherits="WebApplication8.MasterPage4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = " 이것은 마스터 페이지의 Label에 초기화된 문자열입니다.";
    }
    </script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>콘텐츠 페이지에서 마스터 페이지로 접근하기</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>콘텐츠 페이지에서 마스터 페이지로 접근 예제</h3>
       
        <table border="1">
            <tr>
                <td>
                    마스터 페이지
                </td>
                <td>
                <asp:Label ID="Label1" runat"server" Text="Label"></asp:Label><br />
                <asp:TextBox ID="TextBox1" runat"server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    콘텐츠페이지
                </td>
                <td>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>


콘텐츠 페이지[Ex04.aspx]

 <%@ Page Title="콘텐츠 페이지에서 마스터 페이지로의 접근" Language="C#" MasterPageFile="~/MasterPage4.Master"  %>

<script runat="server">
    protected void Page_LoadeComplete(object sender, EventArgs e) // 마스터 페이지의 Load 이벤트 이후
                                         발생하는 컨텐츠 페이지의 이벤트에서 마스터 페이지의 Label1을 참조해야 한다.

    {
        if (!Page.IsPostBack)
        {
            Label tLabel = (Label)Master.FindControl("Label1");
            Label1.Text = tLabel.Text;
        }
    }

    protected void Button1_click(object sender, EventArgs e)
    {
        TextBox tTextBox = (TextBox)Master.FindControl("TextBox1");
        Label1.Text = tTextBox.Text;
    }
    </script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="Button1" runat="server" Text="출력" Onclick="Button1_Click" />
</asp:Content>




중첩 마스터 페이지


부모 마스터 페이지 [MasterMain.master]

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPageMain.master.cs" Inherits="WebApplication8.MasterPageMain" %>

<!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 runat="server">
    <title>중첩 마스퍼 페이지</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width = "400" border = "1">
            <tr>
                <td>
                    <b>네트워크팀</b>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
            <td>
            <b>Copyright &copy; 2011 MADE.All rights reserved.</b>
            </td>
            </tr>

        </table>
    </div>
    </form>
</body>
</html>


자식마스터 페이지[MasterKorea.master]

 <%@ Master Language="C#" MasterPageFile="~/MasterPageMain.Master" AutoEventWireup="true" CodeBehind="MasterKorea.master.cs" Inherits="WebApplication8.MasterKorea" %>

<asp:Content id="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<table width="100%" border="1">
    <tr>
        <td colspan="2">
            홈| 회사소개 |
        </td>
    </tr>
    <tr>
        <td style="width: 100px;" valign="top">
         홈<br /> 회사소개<br />
        </td>
        <td style="height: 150px;">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>       
        </td>
    </tr>
</table>
</asp:Content>


콘텐츠 [Ex05.aspx]

 <%@ Page Title="한국 콘텐츠" Language="C#" MasterPageFile="~/MasterKorea.master" AutoEventWireup="true" CodeBehind="Ex05.aspx.cs" Inherits="WebApplication8.Ex05" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 여기는 네트워크팀 입니다.
</asp:Content>