닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤

Notice

가이브의 Life Story에 대해..

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

새로운 시작, GuyV's lIfe sTyle.

닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤 본문

ⓟrogramming/asp.net 게시판

닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤

가이브 2011. 2. 10. 14:14

2011/01/19 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 10
2011/01/20 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 11
2011/01/21 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 12
2011/01/25 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 13
2011/01/26 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 14
2011/01/31 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 15

1. 닷넷 개발환경 준비, 테스트
2. 닷넷 알아보기 [7/7]
3. asp.net 컨트롤 [7/..]

이 때까지 강의에서 사용했던 명칭을 정정합니다. HtmlForm 은 클래스 이름으로, <form>..</form>태그에 해당하는 서버컨트롤입니다. HtmlControl로 정정합니다. HtmlControls 네임스페이스에 속한 클래스들이 HtmlControl 이라고 할 수 있습니다.
또한 WebForm 역시 WebControls 라는 네임스페이스에 속한 클래스의 묶음으로, WebControl이라고 부르거나 윈도우 프로그래밍에서 부르는 윈폼(WinForm)과 비슷하게 웹(Web)에서의 유저 인터페이스(UI)와 유사하게 웹폼(WebForm) 이라고 부르니 참고하세요.

잘못된 명칭을 사용하여 혼란을 드려 죄송합니다.

asp.net 서버컨트롤을 크게 두 가지로 나눈다면 HtmlControl과 WebControl(이하 웹폼) 이 있다고 했었는데, 이번 시간에는 asp.net 에서 자주 사용하게 되는 컨트롤에 대해 알아보도록 하자.

HtmlControl 의 특징을 다시 정리해보면,

1. 태그(<tag>)에 runat="server"만 붙여주면 해당 태그에 맞는 HtmlControl(서버컨트롤)로 변신하게 됨.
2. 일반적으로 사용하는 대부분의 태그뿐만 아니라, 모든 <form>태그를 서버컨트롤로 이용할 수 있기 때문에, 프로그래밍 방식으로 태그를 제어하거나 값을 읽을 수 있음.

"프로그래밍 방식으로 제어 가능하다"는 것이 asp.net의 서버컨트롤 주 목적이라고 할 수 있다는 말을 다시 한번 생각해보면서 웹폼에 대해 알아보도록 하자.

또 한번, 이 강의의 진행에서 누차 말씀드리지만, asp.net의 결과물은 태그일 뿐이다.

HtmlControl 과 마찬가지로, 웹폼도 클래스(Class)이다. 그리고 유사한 점이 많다.
그러나 사용하는 형식이 다르다.

웹폼 첫 시간이니, 예제를 보도록 하자.

control4.aspx

<%@ Page Language="C#" runat="server" %>
<script language="C#" runat="server">

void Page_Load()
{
}

</script>

<html>
<head>
<title>웹폼</title>
</head>

<body>

이름: <ASP:TextBox id="txt1" runat="server"></ASP:TextBox>
성별:
<ASP:DropDownList id="list1" runat="server">
<ASP:ListItem value="남">남자</ASP:ListItem>
<ASP:ListItem value="여">여자</ASP:ListItem>
</ASP:DropDownList>

<ASP:Button id="btn1" runat="server" text="인사하기!"></ASP:Button>

</body>
</html>

빨간색 코드가 웹폼을 배치시켰고, 읽어보면 알 수 있듯이, 텍스트박스(id=txt1), DropDownList 라는 컨트롤(id=list1), 그리고 버튼 한 개를 배치했다. 웹폼인 DropDownList 는 <select>..</select>태그 입력 컨트롤이다. 그리고 태그형식을 보면,

<ASP:웹폼명 runat="server"></ASP:웹폼명>

이렇게 되는 것을 볼 수 있다. 태그의 시작에 바로 ASP:[컨트롤명] 를 붙여준다. 그리고 모든 서버 컨트롤은 닫아주어야 하는데, 여기서 텍스트박스를 입력받기 위해 사용한 txt1 웹폼을 잠깐 보자. <tag>나 Html 서버컨트롤이나 이 녀석은 이미지를 뿌려주는 <img> 태그처럼 단독으로 사용하는 태그이다. (포함 내용이 없는 태그)

<input type="text" ..>

이런 형식이기 때문에 닫는 태그가 존재하지 않는다. </input>이 없다.

그러나, 웹폼은 무조건 닫아주어야 한다. 그러므로 태그 뒤에 </ASP:웹폼명> 형식에 따라서 </ASP:TextBox>를 붙여준 것이다.

하지만,

<ASP:TextBox id="txt1" runat="server"></ASP:TextBox>

이렇게 웹폼 형식상 포함하는 내용이 없거나, 넣지 않을 때는,

<ASP:TextBox id="txt1" runat="server" />

간단하게 슬래쉬(/)를 태그의 끝(꺽쇠 전)에 붙여줘서 간소화 할 수 있다.
그렇다면, 버튼(ASP:Button)도 마찬가지가 될 수 있겠다.

<ASP:Button id="btn1" runat="server" text="인사하기!"></ASP:Button>
▼
<ASP:Button id="btn1" runat="server" text="인사하기!" />

이런 형식은 모든 웹폼에 적용된다.

단, DropDownList 와 같이, 포함된 컨트롤이 필요하다면 예제처럼 원칙대로 닫아주어야 한다.
입력받는 폼 태그 중 하나인 <select> 태그를 사용해 본 적이 있으시겠지만, 형식은 다음과 같다.

<select name="넘어갈 key">
      <option value="넘어갈 value">보여지는 내용</option>
      <option value="넘어갈 value">보여지는 내용</option>
        ....
</select>

위 태그의 웹폼(서버컨트롤)이 DropDownList 이다.

<ASP:DropDownList id="넘어갈 key" runat="server">
      <option value="넘어갈 value">보여지는 내용</option>
      <option value="넘어갈 value">보여지는 내용</option>
        ....
</ASP:DropDownList>

이렇게 바뀔 수 있겠으나, <ASP:DropDownList>....</ASP:DropDownList>내에는 꼭 DropDownList 가 인식할 수 있는 웹폼이 들어가야 한다. 일반적으로 태그 형식도 <option>이 들어가야 되지 않는가? (HTML에서는 오류라는 개념은 없지만) 다음처럼 말이다.

<ASP:DropDownList id="넘어갈 key" runat="server">
      <ASP:ListItem value="넘어갈 value">보여지는 내용</ASP:ListItem>
      <ASP:ListItem value="넘어갈 value">보여지는 내용</ASP:ListItem>
        ....
</ASP:DropDownList>

웹폼도 이것 저것 자세히 보면, 개념적으로는 사용하는 방법에 있어서 HTML 태그문에 가깝다는 것을 알 수 있다. (HtmlControl 과 비교해보며 생각하자)

필자가 말하고 싶은 것은, 웹폼을 써보지는 않았지만, 결과물이 태그인 녀석이기 때문에 대충 감으로도 ○○웹폼 컨트롤을 사용하려면 "이러이러하게 써야되지 않을까?"라고 예상된다는 것이다. 이미 태그를 알고 있기 때문이다. (웹폼의 결과물이 태그이기 때문에..)

그리고 하나 더, 첫 예제를 보듯이 모든 웹폼에는 runat="server"가 HtmlControl 처럼 붙어야 한다. 그렇지 않으면 당연한 말이겠지만 asp.net 에서 인식하지 않기 때문에 소스가 그대로 전송하게 된다. (HtmlControl 도 마찬가지지 않은가?)

첫 번째 예제를 실행해보자.

실행시 이렇게 오류가 발생하는 것을 볼 수 있다.
예제에서는 <form>..</form> 태그를 빼봤는데, 여기서 알 수 있듯이 TextBox, DropDownList, Button, RadioButton, CheckBox 등 입력을 받는 웹폼을 사용하기 위해서는

<form runat="server">...</form>

이렇게 runat="server"가 붙은 폼 태그로 감싸져야 한다는 것이다.
직접 코드를 넣어 오류를 수정하자. 그리고 불필요하게 닫힌 웹폼 태그도 앞서 설명한 것 처럼 간소화 시켜 닫아보자.

수정된 control4.aspx

<%@ Page Language="C#" runat="server" %>
<script language="C#" runat="server">

void Page_Load()
{
}

</script>

<html>
<head>
<title>웹폼</title>
</head>

<body>

<form runat="server">
이름: <ASP:TextBox id="txt1" runat="server" />
성별:
<ASP:DropDownList id="list1" runat="server">
<ASP:ListItem value="남">남자</ASP:ListItem>
<ASP:ListItem value="여">여자</ASP:ListItem>
</ASP:DropDownList>

<ASP:Button id="btn1" runat="server" text="인사하기!" />
</form>

</body>
</html>

실행이 잘 되는 것을 볼 수 있다.

이제 "인사하기!" 버튼을 누르면 이름과 성별을 살짝 꾸며서 출력해보자.
출력을 하기 위해서는 단순하게 Response.Write() 로 바로 출력해볼 수 있겠지만, <span>태그로 렌더링(서버컨트롤이 결과물로 변경되는 것이라고 했다) 되는 Label 웹폼을 넣어서 출력하도록 하자.

<ASP:Label
id="lbl1"
runat="server" />

이렇게 id가 lbl1인 Label 컨트롤을 </form>아래에 넣어보자.
Label은 입력받는 형식의 컨트롤이 아니기 때문에 <form runat="server"></form>안에 넣지 않아도 잘 작동하게 된다.

그리고 HtmlControl 처럼, <ASP:Button>을 클릭했을 때 실행되는 이벤트를 넣자.
웹폼에서는 OnClick 이름으로 메서드를 지정하면 된다. 호출하는 메서드는 btn1_Click() 으로 정하자. 웹폼에서는 괄호는 생략한다.

<ASP:Button id="btn1" runat="server" text="인사하기!" onclick="btn1_Click" />

실행해보면 당연히 오류가 발생해야 한다. btn1_Click(object, EventArgs) 메서드가 없기 때문이다.

<script language="C#" runat="server">
..
</script>

항목이 C# 코드를 작성하는 부분, 즉 aspx파일에서 클래스로 취급하는 부분이기 때문에 메서드의 위치는 여기에 넣어주기로 하자. 클릭시에 이름(TextBox, id=txt1)과 성별(DropDownList, id=list1)의 값을 Label컨트롤(id=lbl1)에 출력을 하는 btn1_Click(object, EventArgs) 메서드의 기능은 다음과 같다.

void btn1_Click(object source, EventArgs e)
{
       string output = String.Format("{0}({1})님의 방문을 환영합니다.",
                                                 txt1.Text, list1.SelectedValue);
       lbl1.Text = output;
}

앞에서, HtmlControl 과 같이 태그에 바로 runat="server" 만 붙여주게 되면 "프로그래밍 방식"으로 접근이 가능하게 되듯이, 웹폼도 마찬가지이다. 단, 선언하는 방식이 다를 뿐이다. 그리고 HtmlControl 에서 값을 읽어오는 속성(프로퍼티) 이름이 .Value 였던 것이 .Text 또는 .SelectedValue 처럼 달라진 것을 알 수 있다.

예제 코드가 잘 작성되었다면, 다음과 같은 결과물이 나오게 되겠다.

웹폼인 System.Web.UI.WebControls 네임스페이스를 살펴보도록 하자.
http://msdn.microsoft.com/ko-kr/library/system.web.ui.webcontrols(v=VS.80).aspx

다른 페이지들처럼, 페이지 좌측에는 클래스의 리스트가 있고(네임스페이스를 열었으니) 우측에 네임스페이스의 전반적인 설명이 적혀있다.

System.Web.UI.WebControls 네임스페이스에는 웹 페이지에 웹 서버 컨트롤을 만드는 데 사용할 수 있는 클래스가 포함되어 있습니다. 웹 서버 컨트롤은 서버에서 실행되며 단추 및 텍스트 상자와 같은 폼 컨트롤을 포함합니다. 또한 달력과 같은 특수 용도의 컨트롤도 포함합니다. 웹 서버 컨트롤은 서버에서 실행되므로 프로그래밍 방식으로 이 요소를 제어할 수 있습니다. 웹 서버 컨트롤은 HTML로 렌더링되지만 해당 개체 모델이 반드시 HTML 구문을 반영하는 것은 아닙니다.

System.Web.UI.WebControls 네임스페이스에는 TextBox 컨트롤 및 ListBox 컨트롤과 같은 HTML 태그로 렌더링되는 클래스가 포함되어 있습니다. 이 네임스페이스에는 SqlDataSource 및 ObjectDataSource 클래스와 같이 웹 페이지에 렌더링되지 않지만 데이터 작업을 지원하는 클래스도 포함되어 있습니다. GridView, DetailsView 등의 다른 컨트롤은 데이터 표시와 편집을 지원합니다. WebControl 클래스는 System.Web.UI.WebControls 네임스페이스에 있는 많은 클래스의 기본 클래스 역할을 합니다.

용어가 섞인 설명이 어려우나, 우리 초보들은 꼭 적응을 해야 한다.

WebControls 네임스페이스에는 aspx파일에 서버컨트롤을 만들기 위해 사용하는 클래스들이 담겨져 있다. 서버컨트롤은 서버에서 해석되고, 단추(Button), 텍스트박스(TextBox)와 같은 <form>..</form>컨트롤이 포함되어 있다. 또한 달력과 같은 특수 용도의 컨트롤도 들어있다. 서버컨트롤은 프로그래밍 방식으로 각각을 제어할 수 있다. 그 결과물은 태그(HTML)로 변경되긴하나, HTML 문법에 맞게 꼭 맞추어진다는 것은 아니다.

WebControls 네임스페이스는 TextBox 컨트롤, ListBox 컨트롤과 같은 HTML태그로 변경되는 클래스가 포함되어 있다. 이 네임 스페이스에는 SqlDataSource 및 ObjectDataSource 클래스와 같이 aspx에 태그로 변경되지는 않지만 데이터(Data)작업을 위한 클래스도 포함되어 있다. GridView, DetailsView 등의 다른 컨트롤은 데이터 표시와 편집을 위해 사용한다. WebControl 클래스는 WebControls 네임스페이스에 있는 모든 클래스의 공통적인 역할을 한다.

필자 나름대로 읽기 쉽게 용어를 제거해보았다.
첫 문단의 설명은 우리가 방금 소스를 작성해본 그대로이다.

<ASP:TextBox>,<ASP:DropDownList> 등이 aspx파일에 서버컨트롤을 만들기 위해 사용하는 클래스를 사용한 것이다. 이것들은 자동으로 "인스턴스 화"되어 프로그래밍 코드로 접근 할 수 있게 된다. 이는 runat="server" 를 붙여주었기 때문에, 서버에서 해석이 되는 서버컨트롤이 되어 "서버에서 해석"한다. 그리고 진하게 색이 칠해진 문장을 잘 보자. 이런 웹폼이 해석이 태그로 되긴 하나, 태그 문법에 꼭 맞추어진다는 말이 아니라는 말은, 우리가 이 웹폼 서버컨트롤을 마음대로 가지고 놀 수 있기 때문이다.

예를 들어보자. <font>라는 태그를 알고 있을것이다. 이 <font>태그는 태그에 포함된 텍스트를 속성에 의해 글꼴이 변경되거나 크기를 변경할 수 있다.

<font color="red">빨간색</font>

이렇게 사용되는데, 이것이 서버컨트롤로 만들어져서 우리 마음대로 가지고 논다면, 없는 속성도 넣을 수 있을 것이다.

<font color="red" effect="underline">빨간색</font>

물론, <font>태그에는 effect 라는 속성은 존재하지 않는다. 그러나, 디자인요소에 의해서 어떤 속성이 필요하거나, 기타 목적에 의해서 임의(커스텀, custom)의 속성을 충분히 넣을 수 있다. 넣더라도 웹브라우저에서 HTML은 결코 오류를 발생하지 않기 때문에 문제가 없고, 잘 작동한다.

결론은, 서버컨트롤의 결과물이 HTML이다. 그러나 asp.net 에서는 이것을 제어하는데에 있어서 HTML문법에 맞출 필요까지는 없다는 것이다. 기본적으로 렌더링(변환)될 때는 태그의 기본 형식을 갖추긴하지만.

그리고 두번째 문단을 읽어보면 알 수 있듯이, 웹폼은 HtmlControl 기능보다 좀 더 업그레이드 된 서버컨트롤이 있다. HtmlControl은 일반 태그에 runat="server"를 붙이면 짠~하고 바뀌는 서버컨트롤이라고 했다. 그리고 그것은 각각 태그에 맞는 클래스로 변경된다고 했었는데, HtmlContol 서버컨트롤은 말 그대로 태그에 대응되는 것만 존재하는 반면에, 웹폼은 전혀 새로운 서버컨트롤이 존재한다.
이것이 서버컨트롤의 두 가지 종류인 HtmlControl 과 WebControl인 웹폼과의 큰 차이점 중 하나이다.

MSDN 설명에 나와있듯이, 웹폼 하나만으로 우리는 달력을 짠~하고 만들 수 있다.

calendar.aspx

<%@ Page Language="C#" runat="server" %>
<script language="C#" runat="server">

void Page_Load()
{
}

</script>

<html>
<head>
<title>웹폼 - Calendar 컨트롤</title>
</head>

<body>

<form runat="server">
<ASP:Calendar id="cal1" runat="server" />
</form>

</body>
</html>

이 서버컨트롤은 입력이 있기 때문에 <form runat="server"></form>에 포함시켜야 한다.
실행을 해보자. 기본디자인은 별 볼품없지만, 그래도 월별로 이동하거나, 날짜를 선택할 수 있는 달력이 하나 만들어졌다. 결과에 HTML 소스 보기도 해보자.

그럼, 다음 파트에서 Calendar 웹폼을 시작으로 웹폼에 대해 계속 알아보도록 하자.

다음시간에..

저작자표시 비영리 변경금지

'ⓟrogramming > asp.net 게시판' 카테고리의 다른 글

닷넷 게시판 만들기 Part 18 - 웹폼 마지막 (4)	2011.02.14
닷넷 게시판 만들기 Part 17 - 웹폼에 대하여 좀 더 상세하게 (0)	2011.02.11
닷넷 게시판 만들기 Part 15 - 서버컨트롤과 이벤트 (0)	2011.01.31
닷넷 게시판 만들기 Extra Part : 한줄 메모장 만들기 (6)	2011.01.27
닷넷 게시판 만들기 Part 14 - 서버컨트롤(중요!) (0)	2011.01.26

공유하기 링크

페이스북
카카오스토리
트위터

'ⓟrogramming/asp.net 게시판' Related Articles

Comments

새로운 시작, GuyV's lIfe sTyle.

닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤 본문

닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤

'ⓟrogramming > asp.net 게시판' 카테고리의 다른 글

티스토리툴바