ASP.NET 2.0에는 Master Page라는것이 새로 생겼다. 마스터 페이지의 개념을 MSDN에 나온 그대로 옮기면 다음과 같다.
"ASP.NET 마스터 페이지를 사용하면 응용 프로그램의 페이지에 대해 일관된 레이아웃을 만들 수 있습니다. 단일 마스터 페이지는 응용 프로그램의 모든 페이지 또는 페이지 그룹에 대해 원하는 모양과 느낌 및 표준 동작을 정의합니다. 그런 다음 표시할 콘텐츠가 포함된 개별 콘텐츠 페이지를 만들 수 있습니다. 사용자가 요청한 콘텐츠 페이지는 마스터 페이지와 병합되어 마스터 페이지의 레이아웃과 콘텐츠 페이지의 콘텐츠가 조합된 결과가 만들어집니다."
그런데, Master Page - Content Page가구성이되면, 마치 ASCX처럼 내부로 중첩된 컨트롤들의 Client ID가 아주복잡해지는 것을 소스보기에서 볼 수가있다. 이렇게..
<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="ctl00_ContentPlaceHolder1_TextBox1" />
그래서, 자바스크립트를 사용해서 제어하고자 할 때 반드시 서버사이드에서 그 컨트롤의 ClientID를 구해서 해야한다.다음은 Master Page에서 자바스크립트로 Content Page의 컨트롤을 제어하는 샘플이다.
마스터 페이지에는 버튼 컨트롤과 텍스트 박스 컨트롤을 하나씩 올려 두었다.
<%@ 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>
</head>
<body> <form id="form1" runat="server">
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
<input id="Hidden1" type="hidden" runat="server" /><br />
<br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</form>
</body></html>
<!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">
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
<input id="Hidden1" type="hidden" runat="server" /><br />
<br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</form>
</body></html>
컨텐트 페이지에는 텍스트박스 컨트롤을 하나 올렸다.
ASPX 소스는 아래처럼 구성된다.
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
목표는 마스터페이지에서 버튼을 눌렀을 때, 컨텐트 페이지의 텍스트 박스에 "aaa"라는 값이 들어가게 하는 것이고, 이를 자바스크립트를 사용해서 수행하는 것이다. 그 코드는 다음과 같다.
protected void Page_Load(object sender, EventArgs e)
{
//contentPlaceHolder1은 Master페이지에 기본적으로 들어있는 PlaceHolder 컨트롤의 이름이다.
//이 내부에 각 컨텐트 페이지의 컨트롤들이 들어있다.
//즉 ContentPlaceHolder1.Controls 를 뒤지면 나온다는 얘기다.
//그래서 루프를 돌면서 찾도록 한다.
foreach (Control con in this.ContentPlaceHolder1.Controls)
{
//원하는 것을 찾기 위해서는 종류나 ID 같은 것을 알면 된다.
if (con.GetType().Name == "TextBox" con.ID == "TextBox1")
{
//ClientID를 알 수 있다. 히든에다 넣는다.
this.Hidden1.Value = con.ClientID;
}
}
//자바스크립트를 생성한다.
//렌더링된 자바 스크립트는 아래와 같은 모양이다.
// function Button1_onclick() {
// var conID = document.all.item("ctl00_Hidden1").value;
// eval("document.all.item('" + conID + "').value = 'aaa'");
// }
//즉, 히든에 넣은 textbox 컨트롤의 ID를 구한 후,
//eval문을 사용해서 컨트롤에 'aaa'라는 값을 넣는 스크립트를 실행하는 것이다.
string scriptCode = "function Button1_onclick() {" + System.Environment.NewLine;
scriptCode += " var conID = document.all.item(\"" + this.Hidden1.ClientID + "\").value;" + System.Environment.NewLine;
scriptCode += "eval(\"document.all.item('\" + conID + \"').value = 'aaa'\");" + System.Environment.NewLine;
scriptCode += "}";
//페이지에 클라이언트 스크립트를 등록한다.
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Click", scriptCode, true);
}
{
//contentPlaceHolder1은 Master페이지에 기본적으로 들어있는 PlaceHolder 컨트롤의 이름이다.
//이 내부에 각 컨텐트 페이지의 컨트롤들이 들어있다.
//즉 ContentPlaceHolder1.Controls 를 뒤지면 나온다는 얘기다.
//그래서 루프를 돌면서 찾도록 한다.
foreach (Control con in this.ContentPlaceHolder1.Controls)
{
//원하는 것을 찾기 위해서는 종류나 ID 같은 것을 알면 된다.
if (con.GetType().Name == "TextBox" con.ID == "TextBox1")
{
//ClientID를 알 수 있다. 히든에다 넣는다.
this.Hidden1.Value = con.ClientID;
}
}
//자바스크립트를 생성한다.
//렌더링된 자바 스크립트는 아래와 같은 모양이다.
// function Button1_onclick() {
// var conID = document.all.item("ctl00_Hidden1").value;
// eval("document.all.item('" + conID + "').value = 'aaa'");
// }
//즉, 히든에 넣은 textbox 컨트롤의 ID를 구한 후,
//eval문을 사용해서 컨트롤에 'aaa'라는 값을 넣는 스크립트를 실행하는 것이다.
string scriptCode = "function Button1_onclick() {" + System.Environment.NewLine;
scriptCode += " var conID = document.all.item(\"" + this.Hidden1.ClientID + "\").value;" + System.Environment.NewLine;
scriptCode += "eval(\"document.all.item('\" + conID + \"').value = 'aaa'\");" + System.Environment.NewLine;
scriptCode += "}";
//페이지에 클라이언트 스크립트를 등록한다.
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Click", scriptCode, true);
}
주석에도 설명이 되어 있지만, 포인트는 마스터 페이지에 있는 PlaceHolder 컨트롤 내부에서 그 컨텐트 페이지에 있는 컨트롤을 찾는 것이다. 일단 찾은 후에는 그 ClientID 속성을 구할수 있으므로, 이 샘플보다 복잡한 스크립트도 얼마든지 수행시킬 수가 있다.
이올린에 북마크하기
이올린에 추천하기'asp.net' 카테고리의 다른 글
| [Article]이미지를 동적으로 웹 화면에 출력하는 ASPX 페이지 (8) | 2006/11/19 |
|---|---|
| [HowTo]Web Deployment Project (0) | 2006/10/01 |
| [HowTo]ASP.NET Master Page에서 자바스크립트로 Content Page의 컨트롤 제어(C#) (4) | 2006/09/18 |
| [Tip]ASP.NET 2.0에서 웹 파트를 프로그래밍 방식으로 페이지에 추가하기(C#) (0) | 2006/06/21 |
| [Article]ASP.NET 2.0 Web Part Overview (0) | 2006/05/10 |
| [Article]ASP.NET 2.0 테마 (0) | 2006/04/29 |
Trackback Address :: http://lazydeveloper.net/trackback/2532393
- Tracked from cem1103님의 블로그 2007/02/09 15:08 삭제
Subject: Master Page...
<P>위 블로그를 보고</P> <P>마스터 페이지를 이용해서 개발할때 생각이나서 몇자 끄적~</P> <P> </P> <P> </P> <P>마스터 페이지에 공통으로 쓰는 버튼을 예제처럼 생성하고 클릭했을때</P> <P>수행되면 심플한데....</P> <P> </P> <P>각 컨텐트 페이지별로 처리되어야 할 것(DB insert 처리등) 들이 다를때...</P> <P>버튼 자체를 컨텐트 페이지에 넣고 클릭이벤트시.. - Tracked from It's Chronicles 2007/12/11 12:42 삭제
Subject: 페이지내 특정 콘트롤을 찾아서 속성 변경하기
닷넷 페이지에서는 계층구조 (Hierarchy)가 엄청나게 잘 발달되어 있는 바, 이 계층구조만 잘 파악하면 외부에서 직접 해당 콘트롤에 접근할 수가 있다. 가장 중요한 것은 Nested Controls, 즉 상하위 콘트롤들...
