logo
border border
              
border border
border border
  Post Subject :: #23. MasterPage 사용하기(Ⅱ)     [ASP.NET]
border border
border border
     

결합된 페이지 확인하기



그러면, 마스터 페이지와 컨텐츠 페이지가 결합된 화면을 보기 위해서 각각의 페이지에 다음과 같은 코드를 작성한다.




<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>


 


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


    <script language="javascript" type="text/javascript">


        function fnMovePage(command) {


            switch (command) {


                case "1" :


                    self.location.href = "MasterTest1.aspx";


                    break;


                case "2" :


                    self.location.href = "MasterTest2.aspx";


                    break;


                case "3" :


                    self.location.href = "MasterTest3.aspx";


                    break;


                case "4" :


                    self.location.href = "MasterTest4.aspx";


                    break;


                case "5" :


                    self.location.href = "MasterTest5.aspx";


                    break;


                default :


                    self.location.href = "MasterTest1.aspx";


                    break;


            } 


        }


    </script>


</head>


<body style="padding-top:20px; padding-bottom:20px;" bgcolor="#DDDDDD" oncontextmenu="//return false">


<form id="MasterForm" runat="server">


    <table width="600px" border="0" bgcolor="#DDDDDD" cellpadding="0" cellspacing="0" align="center" bordercolor="red">


        <tr>


            <td bgcolor="#FFFFFF" align="center" valign="middle" style="padding:4px;">


                <table width="100%" height="100%" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" bordercolor="purple">


                    <tr>


                        <td width="600px" align="center" valign="top" style="display:inline-block;">


                            <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="margin:3px;" bordercolor="red">


                                <tr valign="middle" height="100px">


                                    <td background="" bgcolor="#666666" align="center" style="color:#666666;font-size:11pt;border : 1px solid #333333">


                                        <table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="red">


                                            <tr height="100%" valign="middle">


                                                <td width="40%" align="left">


                                                    <div align="left">


                                                        &nbsp;&nbsp;&nbsp;


                                                        <a style="cursor:hand" href="javascript:fnMovePage('1')">


                                                            <img src="http://www.neostyx.net/theme/graytheme/Images/img_nxblog_logo.gif" border="0" />


                                                        </a>   


                                                    </div>


                                                </td>


                                                <td width="60%" align="right">


                                                    <div align="right" style="margin-left:5px;">


                                                        <a style="cursor:hand" href="javascript:fnMovePage('2')">


                                                            <img src="http://www.neostyx.net/theme/graytheme/Images/img_nxblog_menu1.gif" border="0" />


                                                        </a>&nbsp;


                                                        <a style="cursor:hand" href="javascript:fnMovePage('3')">


                                                            <img src="http://www.neostyx.net/theme/graytheme/Images/img_nxblog_menu2.gif" border="0"/>


                                                        </a>&nbsp;


                                                        <a style="cursor:hand" href="javascript:fnMovePage('4')">


                                                            <img src="http://www.neostyx.net/theme/graytheme/Images/img_nxblog_menu3.gif" border="0"/>


                                                        </a>&nbsp;


                                                        <a style="cursor:hand" href="javascript:fnMovePage('5')">


                                                            <img src="http://www.neostyx.net/theme/graytheme/Images/img_nxblog_menu5.gif" border="0"/>


                                                        </a>&nbsp;


                                                    </div>


                                                </td>


                                            </tr>


                                        </table>                           


                                    </td>


                                </tr>


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


                                </asp:ContentPlaceHolder>


                                <tr>


                                    <td align="center" style="width:100%">


                                        <asp:Label ID="lblMain" runat="server" Text="마스터 페이지 라벨입니다."></asp:Label>


                                    </td>


                                </tr>


                            </table>   


                        </td>


                    </tr>


                </table>   


            </td>


        </tr>


    </table>


</form>


</body>


</html>




<MasterTest1.aspx>


<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MasterTest1.aspx.cs" Inherits="MasterTest1" Title="Untitled Page" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">


    <tr height="10">


        <td width="100%" align="center" colspan="3">&nbsp;</td>


    </tr>


    <tr valign="middle" height="30px">


        <td background="http://www.neostyx.net/theme/graytheme/Images/img_menu_bg.jpg" align="left" style="color: #FFFFFF; font-size: 9pt;width:100%">


            &nbsp;&nbsp;<img src="http://www.neostyx.net/theme/graytheme/Images/img_menu_notification.gif" />


        </td>


    </tr>


    <tr>


        <td align="center" width="100%" colspan="3">


            <table width="100%" border="0" bgcolor="#666666" cellpadding="0" cellspacing="2">


                <tr height="150px" valign="top">


                    <td width="100%" align="left" bgcolor="#FFFFFF" style="padding: 3px">


                        메인화면입니다.


                    </td>


                </tr>


            </table>


        </td>


    </tr>


</asp:Content>




이와 같이 MasterPage.master 페이지와 MasterTest1.aspx 페이지에 위와 같이 코드를 작성하고, MasterTest2.aspx, MasterTest3.aspx, MasterTest4.aspx, MasterTest5.aspx 페이지를 새로 추가하여 MasterTest1.aspx와 동일하게 코드를 작성한다. 그리고, MasterTest1.aspx의 "메인화면입니다."라는 글 대신 MasterTest2.aspx에는 "쥔장 소개입니다" , MasterTest3.aspx에는 "방명록입니다.", MasterTest4.aspx에는 "포럼입니다.", MasterTest5.aspx에는 "즐겨찾기입니다."라는 글을 입력하도록 한다.

그런 후, MasterTest1.aspx를 시작 페이지로 설정하고 난 뒤 웹 사이트를 빌드하면, 다음과 같은 화면이 뜨게 된다.




실행된 화면에서 우측 상단의 메뉴를 누르면, 각 페이지로 이동하게 된다.




방금 실행한 예제처럼 하나의 마스터 페이지에 공통적으로 사용되는 부분을 정의하고, 사용자에게 다르게 보여주어야 하는 부분은 각각의 컨텐츠 페이지에 정의를 하면 된다. 만약, ASP.NET 1.1 버전의 경우는 사용자 정의 컨트롤을 만들든지, 아니면 똑같은 코드를 복사하여 각 페이지마다 붙여넣기해야 했을 것이다. 마스터 페이지를 이용하면 이러한 작업들을 정말 간편하게 할 수 있다. 또한, 코드 또는 HTML 태그를 수정할 때 코드 또는 HTML 태그가 마스터 페이지에 작성되어 있으면, 마스터 페이지만 수정하면 된다. 그리 놀랄만한 일이 아니라고 생각하시는 분들도 있을 것이지만~!!! 그래도 마스터 페이지를 사용하면 정말 편리함을 느낄 수 있다.

코드 비하인드에서의 코드 작성



이번에는 코드 비하인드에서 값을 할당하는 코드를 작성하도록 하겠다. 이 방법은 기타 다른 웹 페이지에서 서버 컨트롤에 속성 및 값을 할당하는 방법과 동일하다. MasterTest1.aspx의 "메인화면입니다." 뒤에 <br /> 태그를 입력하고 아이디가 Label1인 Label 컨트롤을 추가한다.
그리고 MasterTest1.aspx.cs의 Page_Load 이벤트에 Label의 Text값을 "MasterTest1에 있는 Label1 컨트롤입니다."라고 할당한다. 역시 화면을 실행시켜 보면 추가한 Label1에 할당한 Text 값이 표시되는 것을 확인할 수 있다.




이것은 기본적인 사항이고, 이 포스트를 보시는 분은 모두 다 알고 있는 내용이다. 그러면, 이 내용을 왜 쓰고 있느냐? 컨텐츠 페이지의 코드 비하인드에서 마스터 페이지에 있는 컨트롤을 제어할 수 있기 때문에 위에 간단하게 설명을 한 것이다. 그러면, 이제 중요한 컨텐츠 페이지의 코드 비하인드에서 마스터 페이지의 컨트롤에 어떻게 제어를 하는지에 대해서 설명하도록 하겠다.

마스터 페이지인 MasterPage.master를 보면 하단에 "lblMain"이라는 ID를 가진 Label 컨트롤이 있고, Text는 "마스터 페이지 라벨입니다."라고 되어 있다. 그러면, 컨텐츠 페이지에서 이 Label의 Text를 바꿔보도록 하겠다. 컨텐츠 페이지에서 마스터 페이지를 찾는 방법은 this.Master(Page.Master)라는 마스터 페이지 클래스를 호출함으로써 접근이 가능해진다. 그러므로, 다음과 같이 코드를 작성한 후 실행하면 다음과 같이 마스터 페이지에 있는 Label의 Text값이 변경되게 된다.


protected void Page_Load(object sender, EventArgs e)


    {


        ((Label)this.Master.FindControl("lblMain")).Text = "컨텐츠 페이지에서 할당한 Label의 값입니다.";


    }







또한, 컨텐츠 페이지에서 마스터 페이지에 있는 여러가지 속성 및 메소드도 제어가 가능하다.


protected void Page_Load(object sender, EventArgs e)


    {


        this.Master.Page.Title = "마스터 타이틀";


        this.Master.Page.Response.Write("마스터 페이지에 텍스트 출력");


    }







그리고, 마스터 페이지에 있는 컨트롤의 값을 컨텐츠 페이지에 위치한 컨트롤의 값으로 할당할 수도 있다.


protected void Page_Load(object sender, EventArgs e)


    {


        Label1.Text = (Master.FindControl("lblMain") as Label).Text;


    }







이로써, 어느정도 마스터 페이지와 컨텐츠 페이지에 대해서 알아본 것 같다. 다음 포스트에서는 마스터 페이지와 컨텐츠 페이지의 이벤트 처리 과정 및 기타 항목에 대해서 알아보도록 하겠다.
border border
border border
  이전 포스트 :: #22. MasterPage 사용하기(Ⅰ)
  다음 포스트 :: #24. 서버 컨트롤의 일반적인 속성들
border border
border border
  
# Commented By :: 조재문 At 10/9/2007 10:46:33 AM [M] [D]
다른 책에서 설명이 부족한 ??(이해가 안되던) 부분이 해결 되었네요..
깔끔한 설명 참 좋았습니다.
이곳을 들러 강의를 보다 보면 최지훈님이 ASP.NET AJAX에 관한 책을 집필하면
히트 칠 것 같은 생각이 듭니다. 풍부한 예제와 친절한 설명을 곁들인 예시화면 등
많은 사람들이 공감할 수 있는 책이 될것 같아요..
혹 계획은 없는지요??
# Commented By :: 최지훈 At 10/9/2007 11:08:14 AM [M] [D]
부족한 강좌를 이렇게 칭찬해주시니 몸둘바를 모르겠네요. (부끄부끄~^^;;)

저도 물론 책을 쓸 욕심은 가지고 있지만, 출판사 및 책의 내용등에 대해서 제가 좀 더 알아보고 연구를 해야 할 것 같아서 올해는 좀 힘들지 않나 싶습니다.
이렇게 힘을 주시니, 정말 감사합니다. ^^;;
# Commented By :: 황보세현 At 4/24/2009 11:35:50 AM [M] [D]
강좌 보면서 공부 중입니다.
이번 강좌에서 이미지가 과거에 이미지가 많아서 현재 홈페이지의 이미지 짜집기 해서 붙였습니다.
로고 : http://www.neostyx.net/Images/GrayRound/img_neostyx_logo.png
메뉴 1 : http://www.neostyx.net/Images/GrayRound/img_nxblog_menu_ntyx_ko.gif
메뉴 2 : http://www.neostyx.net/Images/GrayRound/img_nxblog_menu_guestbook_ko.gif
메뉴 3 : http://www.neostyx.net/Images/GrayRound/img_nxblog_menu_board_ko.gif
메뉴 4 : http://www.neostyx.net/Images/GrayRound/img_nxblog_menu_favorite_ko.gif
그리고 MasterTest1~5 에서의 백그라운드와 notification
배경 : http://www.neostyx.net/Images/Global/img_content_textline.gif
Notification : http://www.neostyx.net/Images/GrayRound/img_menu_notification.png
이렇게 하면 잘 나옵니다.

회사에서도 많은 지도 부탁드립니다.
# Commented By :: 님좀혼나셔야할듯 At 2/26/2010 6:00:38 AM [D]
농당입니다. 최지훈님께서 추천한 책(asp 실전...) 샀다가 피봤지만,
블로그에는 정말 좋은 내용이 많네요. 무엇보다도 무엇이 문제인지 정확하게 찝어주는 코드
어짜피 비슷한 코드가 책에도 있다고 하지만, 이렇게 특정 코드가 하일라이팅이 되면서 주목을 해주면 참 공부하기가 쉬운데 말이죠. 친절함과 정성이 느껴지는 포스트네요.
앞에 있는 기본 컨트롤의 공통속성 정리도 잘 봤어요.
지금 나머지도 달려봐야징~
# Commented By :: 최지훈 At 2/26/2010 3:32:27 PM [M] [D]
ㅎㅎ. 그런가요.
제가 잘못 추천한 셈이 되었네요.. ㅎㅎ

예전에 작성했던 포스트들을 지금 돌이켜보면, 좀 엉망인 부분이 많아서 시간날 때 다시 수정을 할 예정에 있습니다. 제가 봐도 좀... 보기에도 불편하고, 이해도 잘 안되고요...

많이 둘러 보시고, 궁금한 사항 있으면 질문도 해주시고... 틀린 점이 있으면 지적도 좀 해주세요.
좋은 하루 되세요~
  NAME ::   PASSWORD ::
  MAIL ::   HOMEPAGE ::
  COMMENT ::
border border
border border
COPYLEFT NX Blogs.   opml

LogIn ]  [ Join NX Blog's ]
border border
border border
mvp
border border
border border
  border
   Personal Thought
   ASP.NET
   ASP.NET AJAX
   ASP.NET MVC Framework
   Dev Story(Etc.)
   Reading the Articles
   About Microsoft / MSDN
   Certification Talk
   Useful Dev Tools
border border
border border
  border
   2010 년 09 월 (2)
   2010 년 06 월 (1)
   2010 년 05 월 (1)
   2010 년 04 월 (1)
   2010 년 03 월 (1)
   2010 년 02 월 (5)
   2010 년 01 월 (1)
   2009 년 04 월 (2)
   2009 년 03 월 (3)
   2009 년 02 월 (6)
   2009 년 01 월 (1)
   2008 년 10 월 (1)
   2008 년 06 월 (8)
   2008 년 05 월 (10)
   2008 년 04 월 (13)
   2008 년 03 월 (9)
   2008 년 02 월 (17)
   2008 년 01 월 (5)
   2007 년 12 월 (8)
   2007 년 11 월 (15)
   2007 년 10 월 (36)
   2007 년 09 월 (33)
   2007 년 08 월 (17)
   2007 년 07 월 (23)
   2007 년 06 월 (4)
   2007 년 05 월 (16)
   2007 년 04 월 (26)
   2007 년 03 월 (14)
   2007 년 02 월 (25)
   2007 년 01 월 (41)
   2006 년 12 월 (38)
   2006 년 11 월 (0)
   2006 년 10 월 (0)
   2006 년 09 월 (1)
   2006 년 08 월 (9)
   2006 년 07 월 (1)
border border
border border
  border
   #129. 無題(2)
    By 최지훈 At 9/6/2010
   #128. 無題
    By 최지훈 At 9/3/2010
   127. [예약구매] 실전. jQ...
    By 최지훈 At 6/13/2010
   #126. 무제
    By 최지훈 At 5/23/2010
   #125. 요즘 근황?
    By 최지훈 At 4/15/2010
   #124. ASP.NET 4 책을...
    By 최지훈 At 3/12/2010
   #97. ASP.NET 4 New...
    By 최지훈 At 2/12/2010
   #96. ASP.NET 4 New...
    By 최지훈 At 2/10/2010
   #95. ASP.NET 4 New...
    By 최지훈 At 2/9/2010
   #94. ASP.NET 4 New...
    By 최지훈 At 2/2/2010
border border
border border
  border
   태풍의 끝자락이 대지를 쓸고 지나...
    By 조재문 At 9/7/2010
   배는숨겨야지 에서 나도 모르게 빵...
    By ㅋㅋ At 8/17/2010
   Sorry. I don't hav...
    By 최지훈 At 8/16/2010
   내 생애 번역서는 이걸루 끝이다....
    By 최지훈 At 8/16/2010
   네..^^;; 저도 감사합니다.
    By 최지훈 At 8/16/2010
   IIS 버전이 업그레이드되면서 해...
    By 최지훈 At 8/16/2010
   나중에 비슷한 차로 태워는 줄께~...
    By 최지훈 At 8/16/2010
   나도 사주세요 저 차
    By ㅋㅋ At 8/12/2010
   저도 URL Rewriting 이...
    By 초보 At 8/7/2010
   감사드립니다^^
    By 이한철 At 7/28/2010
border border