이제까지 WebForm1.aspx에 다양한 방법으로 출력을 하는 방법을 알아 보았다. 이제 출력을 할 수 있게 되었으니 바로 이 메인 페이지에 게시판 프로그램을 넣어도 되지만 이렇게 하면 장차 이 게시판을 다양한 웹 페이지에서 사용하기가 힘들어진다. 웹 사이트 디자인상에서 게시판은 다양한 위치에 다양한 형태로 들어가게 되는데 단독 어플리케이션 형식으로 만들면 장차 활용할 때 어려움을 겪게 된다. 그러므로 게시판 같은 웹 페이지를 이루는 하나의 단위 프로그램은 웹 서버 컨트롤로 만들어야 한다.
웹 서버 컨트롤이란 일반적인 HTML태그를 사용하듯이 웹 페이지의 어떤 위치에서든 자유롭게 사용할 수 있도록 만든 프로그램의 단위를 말한다. 말로 설명하는 것 보다 한번 보는 것이 간단하다. 우리의 DotNetBBS 프로젝트로 들어가보자.
프로젝트 화면의 오른쪽 솔루션탐색기를 보자. 가장 상단에 ‘DotNetBBS’ 솔루션이라는 줄이 있고 그 아래에 DotNetBBS가 있다. 하나의 솔루션은 여러 개의 프로젝트를 포함할 수 있기 때문에 이러한 형식을 지니고 있는 것이다. 현재는 DotNetBBS라는 하나의 프로젝트만 이 솔루션에 포함된 것이다. DotNetBBS 프로젝트에서 오른쪽 버튼을 눌러 추가>새 항목추가… 를 선택하면 아래와 같은 다이얼로그가 나온다.
여기서 그림과 같이 웹 사용자 정의 컨트롤을 선택하고 아래 이름란에 BBS.ascx를 입력 하고 열기를 누른다. 그러면 솔루션탐색기에 BBS.ascx가 추가된 것을 볼 수 있을 것이다. 이 BBS.ascx는 장차 게시판 프로그램을 담게 될 메인 웹 서버 컨트롤이 될 것이다. 게시판 프로그램은 하나의 웹 서버 컨트롤이 아니라 그 속의 분화된 다양한 기능에 따라 여러 개의 웹 서버 컨트롤로 구성되게 될 것이다. 그러면 웹 서버 컨트롤을 사용해 보자.
먼저 BBS.ascx를 열어 보자. 아무 내용도 없고 단 한 줄의 컨트롤 정의 문장만 있을 것이 다. 여기에 아래와 같이 내용을 추가해 보자.
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="BBS.ascx.cs" Inherits="DotNetBBS.BBS" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<
asp:Label
>
Hello!</asp:Label>
다음 WebForm1.aspx를 열어서 아래와 같이 수정한다. 볼드로 된 줄이 새로 추가된 줄이다.
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DotNetBBS.WebForm1" %>
<%@ Register TagPrefix="Gosu" TagName="BBS" Src="BBS.ascx" %>
<!
DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>WebForm1</title>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1">
<
meta
name
="CODE_LANGUAGE"
Content
="C#">
<
meta
name
=vs_defaultClientScript
content
="JavaScript">
<
meta
name
=vs_targetSchema
content
="http://schemas.microsoft.com/intellisense/ie5">
</
head
>
<
body
MS_POSITIONING
="GridLayout">
<
form
id
="Form1"
method
="post"
runat
="server">
<
Gosu:BBS
runat
="server"></
Gosu:BBS
>
</
form
>
</
body
>
</
html
>
@Register를 사용하여 서버컨트롤을 선언하고 아래쪽 form태그 안에 그 서버 컨트롤을 넣은 것이다. 자 그럼 실행을 해보자. 화면에 “Hello!”가 나오면 정상적으로 동작한 것이다. 실행한 상태의 브라우저에서 소스보기를 해보자.
<!
DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>WebForm1</title>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1">
<
meta
name
="CODE_LANGUAGE"
Content
="C#">
<
meta
name
=vs_defaultClientScript
content
="JavaScript">
<
meta
name
=vs_targetSchema
content
="http://schemas.microsoft.com/intellisense/ie5">
</
head
>
<
body
MS_POSITIONING
="GridLayout">
<
form
name
="Form1"
method
="post"
action
="WebForm1.aspx"
id
="Form1">
<
input
type
="hidden"
name
="__VIEWSTATE"
value
="dDwtMTUxNzE3ODkwMDs7PhbBR75Grk6sGenHElUmPsGdTEUn"
ID
="Hidden1"/>
<
asp:Label
>
Hello!</asp:Label>
</
form
>
</
body
>
</
html
>
볼드로 된 줄을 보자. 뭔가 좀 이상하다. 원래 입력된 태그가 그대로 나와있다. HTML소스상에서 <asp:label>은 잘못 정의된 태그이다. ASP.NET서버 컨트롤이기 때문이다. 왜 이런일이? 그리고 정상적으로 동작하는 것처럼 보이는 이유는 무엇인가?
우선 Hello!가 정상적으로 나오는 이유는 브라우저가 인식하지 못하는 태그를 그냥 무시하고 내용만 보여주었기 때문이다. 그렇다면 제대로 동작하게 하는 방법은?
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="BBS.ascx.cs" Inherits="DotNetBBS.BBS" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<
asp:Label
Runat
=server>
Hello!</asp:Label>
위와 같이 runat=server라는 특성 값이 설정되어야 한다. 모든 웹 서버 컨트롤은 반드시 이 특성을 설정해 주어야만 서버 컨트롤로서 동작하게 된다. 수정 후에 다시 실행하여 브라우저에서 소스보기를 하면 아래와 같이 나타난다.
<!
DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>WebForm1</title>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1">
<
meta
name
="CODE_LANGUAGE"
Content
="C#">
<
meta
name
=vs_defaultClientScript
content
="JavaScript">
<
meta
name
=vs_targetSchema
content
="http://schemas.microsoft.com/intellisense/ie5">
</
head
>
<
body
MS_POSITIONING
="GridLayout">
<
form
name
="Form1"
method
="post"
action
="WebForm1.aspx"
id
="Form1">
<
input
type
="hidden"
name
="__VIEWSTATE"
value
="dDwtMTUxNzE3ODkwMDs7PhbBR75Grk6sGenHElUmPsGdTEUn"
ID
="Hidden1"/>
<
span
>Hello!</span>
</
form
>
</
body
>
</
html
>
“Hello!”가 span태그에 둘러 쌓여 있는 것을 볼 수 있다. 이와 같이 웹 서버 컨트롤은 서버에서 해당 태그를 해석하여 모든 브라우저가 이해할 수 있는 HTML태그로 바꿔주는 역할을 하는 것이다.
이렇게 사용자 정의 웹 컨트롤을 사용하도록 프로젝트를 구성해 두면 이제 WebForm1.aspx는 수정할 일이 없다. 모든 게시판 관련 프로그램들은 BBS.ascx안에서 이루어 지게 되는 것이다. 이런 식으로 사용자 정의 컨트롤을 사용하여 프로젝트를 만들면 어떤 웹 프로젝트에서든지 간단하게 태그를 추가하는 것 만으로 게시판 모듈전체를 쉽게 웹 페이지에 추가 할 수 있게 되는 것이다.