닷넷 게시판 만들기 Part 18

Notice

가이브의 Life Story에 대해..

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

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

닷넷 게시판 만들기 Part 18 - 웹폼 마지막 본문

ⓟrogramming/asp.net 게시판

닷넷 게시판 만들기 Part 18 - 웹폼 마지막

가이브 2011. 2. 14. 17:57

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

이전시간에 이어서 WebControls 컨트롤(이하 웹폼)을 계속 알아보도록 하자.
서버컨트롤 8회까지 복잡하게 달려온 것 같아 정리가 좀 필요할 것 같다.

▒ <form></form>
우리가 알고 있는 회원가입, 로그인, 게시판 글 쓰기 등등, 웹에서 어떤 정보를 보내기 위해 사용하는 태그이다. 이 태그 내에는 사용자에게 입력을 받을 수 있는 텍스트박스(한줄/여러줄), 체크박스, 라디오버튼, 파일 업로드 등이 있고 일반적으로 GET, POST 방식 중 POST로 보내기 위해 사용한다. 그리고 어디로 정보를 보낼지 지정을 할 수 있다.

▒ <form method="GET/POST"..></form>
일반적으로 우리가 잘 알고 있는 "퍼가기링크"가 가능한 이유는, 바로 이 GET 방식이 있기 때문이다. HTML에서 정보를 보낸다는 것은 (1)어디주소로, (2)어떤값을 실어서 보내는지를 정하는 건데, GET방식은 <form>태그가 필요없이 주소에 붙여서 값을 보낼 수 있다.

/test.aspx?name=값1&age=값2&...

보낼 주소의 "?"뒤에 붙어 "키=값"이 쌍으로 이룬 값들이 "&" 으로 구분한다.

/test.aspx?name=값1&age=값2&...

▼

/test.aspx
?
name=값1
&
age=값2
&
...

이 주소의 의미는 test.aspx 에 name, age 2개를 보낸다는 의미이다.

쉽게, 우리가 주소창에 치는 주소 자체가 GET 으로 보내는 의미이고, <form method="post">..</form>에 양식을 입력하여 버튼 등을 눌러 보내는 정보는 GET/POST 두가지 가능하지만, 목적상 POST가 일반적이다 라고 할 수 있다.

▒ asp.net 의 서버컨트롤이란?
(1)디자인 단의 태그에 runat="server"를 붙이기만 하면 서버컨트롤로 변하는 HtmlControls
(2)이것과 비슷하지만 사용하는 형식이 조금 다르고 특정 기능을 목적으로 하는 컨트롤이 포함된 WebControls
이렇게 두 가지의 형태를 asp.net 에서 서버컨트롤이라고 한다.

서버컨트롤을 이용하는 이유로는

(1)웹프로그래밍의 목적인 "동적(변동있는) 페이지"를 구현하기 위하여 태그를 프로그래밍 코드로 접근가능 하기 위해
(2)복잡하거나 자주쓰이는 태그의 묶음을 프로그래밍 방식으로 만들거나 사용하기 위해

등이 있겠다.

이제 다시 9회 강의에 들어가보자.
asp.net 의 모든 서버컨트롤을 여러분은 일일히 외울 필요가 없다. HTML태그를 알고 있으면 그만이다. HTML태그와 대응하는 서버컨트롤이 존재하기 때문이다.

그러나 웹폼은 HtmlControls 와는 다른 기능이 추가되어 있다고 했다. 앞서서 해본 <ASP:Calendar>달력 컨트롤처럼, 특정 기능을 조합할 수 있다. 달력 컨트롤은 특정 달(Month)의 달력을 표시해준다. 이것은 테이블로 이루어져 있으며, 각각의 항목은 클래스의 속성을 변경하면 모양과 형식을 변경할 수 있다. 그리고 이런 조작법은 asp.net 웹폼에 모두 해당된다.

웹폼 컨트롤의 형식은 다음처럼 세 가지가 있다.

1. 나홀로 콘트롤

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

2. 포함된 컨트롤이 있는 컨트롤

<ASP:DropDownList id="ddlList" runat="server">
<ASP:ListItem value="real value">showing value</ASP:ListItem>
</ASP:DropDownList>

3. 스타일(템플릿) 형식이 포함된 컨트롤

<ASP:Calendar id="cal1" runat="server">
      <DayHeaderStyle BackColor="Red"></DayHeaderStyle>
</ASP:Calendar>

<ASP:Repeater id="rpt1" runat="server">
      <HeaderTemplate>사용자 목록</HeaderTemplate>
      <ItemTemplate>
           - [ <%# Eval("user_name") %> ]-<br>
      </ItemTemplate>
      <FooterTemplate>------이상------</FooterTemplate>
</ASP:Repeater>

이 형식을 잘 알아놓도록 하자. 앞으로 여러분들이 필요에 의해서 사용하게 될 웹폼의 형식이다. 예제에 속성이나 이벤트(Event)가 부여되면 좀 더 복잡해 보일 수 있지만, 여러분들이 형식만 잘 알아둔다면 별 문제되지 않을 것이다.

연습으로, 다음 예제를 한번 살펴보자. 달력 컨트롤처럼 또다른 웹폼인TreeView 컨트롤이다.

treeview.aspx 예제

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

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

void Page_Load()
{
}

</script>

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

<body>

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

<ASP:TreeView id="tree1" ExpandDepth="0" runat="server">
<Nodes>
  <asp:TreeNode Text="하위메뉴열기" SelectAction="Expand">
  <asp:TreeNode Text="메뉴1" />
  <asp:TreeNode Text="메뉴2" />
    <asp:TreeNode Text="메뉴3" SelectAction="Expand">
           <asp:TreeNode Text="메뉴 3-1" />
         <asp:TreeNode Text="메뉴 3-2" />
     </asp:TreeNode>
  </asp:TreeNode>
</Nodes>
</ASP:TreeView>

</form>

</body>
</html>

이 컨트롤은 컨트롤 이름에서 알 수 있듯이 계층적 메뉴를 구현을 편하게 해주는 녀석이다.
어떤 기능이 있는지 알기 위해 한번 임시로 .aspx 파일을 만들어 넣어, 실행해보자.

예제는 컨트롤의 형식을 분석하기 위해 준비했다. (컨트롤 자체에 대해 설명하려는 것이 아니다)

TreeView 라는 클래스가 있고, 여기에는 Nodes 라는 TreeNodeCollection 이름의 컬렉션(Collection)이 있다. 왜냐하면, TreeView 클래스의 자료형식이 컬렉션이기 때문이다. (일전에 컬렉션은 동일한 클래스의 모음이라고 했을 것이다.)

이것을 프로그래밍 코드로 만들거나 제어하기 위해서는 우리가 지금까지 했던 MSDN 에서 자료 찾는 법을 이용해서 서버컨트롤 클래스의 예제와 멤버를 뒤져야 할 것이다.

웹폼 컨트롤들을 하나하나 정리해놓은 것이 asp.net 서적이 될 수도 있고, MSDN이 될 수도 있고, 다른 분들이 정리해놓은 블로그 등이 있다. 우리같은 프로그램 개발자는 이런 백서(바이블)는 꼭 하나씩 끼고 있어야 할 것이다. 언제나 찾아서 쓸 수 있게 말이다.

이 강의에서 모두 다루기에는 많은 지면과 시간이 필요하기 때문에 할 수 없겠지만 필자가 꼭 말해주고 싶은 것은 서버 컨트롤들을 여러분들이 직접 타이핑하면서 감을 익혀나가야 된다는 것이다.

asp.net 2.0 이 정식으로 처음 나왔을 때, 당시 asp.net 의 모든 것을 한번에 볼 수 있게 예제와 함께 제공해주는 QuickStart 라는 것이있다. Microsoft .net framework 2 SDK를 설치한 후 Quickstart를 설치하면 한글로 볼 수 있긴하지만, 구버전 IIS(XP)에서만 작동한다. 다행히 Microsoft 에서 영문 버전을 온라인으로 제공한다.

http://quickstarts.asp.net/QuickStartv20/default.aspx

필자도 예전에 여러분들처럼 서버컨트롤을 공부할 때 이 문서를 적극 활용한 경험이 있기에 강력하게 추천한다. 예제를 보면서, 여기서 다루지 않은 서버컨트롤이 어떤게 있는지 눈으로 확인하고, 이해가 잘 안될 수 있으나 소스파일도 확인할 수 있다. 그리고 MSDN 문서를 병행하면서 컨트롤에 대해 학습한다면 많은 도움이 될 것이다.

방금 예제로 작성한 treeview.aspx 파일을 열어서, 첫 줄 aspx파일의 선언문을 수정해보자.

<%@ Page Language="C#" runat="server" trace="true" %>

빨간색 trace="true" 를 추가해주자. 이 값은 웹페이지 추적(trace)정보를 볼 수 있는 기능이다. 기본값은 "false" 였으므로, 우리가 이 때가지 볼 수 없었다.

그리고 실행해보면 다음의 결과를 볼 수 있다.

프로그램의 실행 끝에 검은색 타이틀과 내용으로 이루어진 정보를 볼 수 있다.
현재 열려진 aspx 페이지에 대한 정보이다.

1. 각각 항목별 실행시간,
2. 우리가 이번장에서 배우고 있는 서버컨트롤의 모든 정보
3. 세션(Session)값 할당 상태
4. 어플리케이션(Application)값 할당 상태
5. 쿠키/헤더정보
6. 이번장 초반에 했었던 <form></form>의 GET/POST 정보
7. 서버 변수

눈으로 보이는 값이 있을 수 있지만, 보이지 않는 값도 있다. 실제 복잡한 컨트롤들이 많이 얽혀있는 페이지나 컨트롤이 프로그램 코드에서 잘 잡히지 않을 때 유용하게 사용된다.

우리는 컨트롤을 봐야겠다. 컨트롤트리 항목을 보자.

이제 두말하면 잔소리일법한 말이지만, 서버컨트롤도 계층으로 되어 있기 때문에, 포함관계가 들여쓰기로 표현되어 있음을 알 수 있다.
중요하게 보아야 될 것은 서버컨트롤의 id="값"에 해당하는 [컨트롤 UniqueID] 와 그 서버컨트롤의 클래스를 말하는 [형식]이다. 위의 예제에서, "ctl01"을 제어하기 위해서는 "System.Web.UI.LiteralControl" 클래스를 뒤져야 한다는 정보를 알 수 있기 때문이다.
또한 여기 보이는 것들은 HtmlControls, WebControls 의 부모격인 컨트롤 컬렉션 Controls 로 접근이 가능하다.

treeview.aspx 파일의 소스를 보면서 "컨트롤 UniqueID"와 비교 분석해보자.
(UniqueID는 모든 컨트롤에 있는 속성값으로, id=""로 지정한 것과 거의 동일하나, 내부 동작에서 필요에 의해 변경되기도 한다 )

1. __Page
aspx파일의 몸체라고 할 수 있다. System.Web.UI 네임스페이스의 Page 클래스이다. 즉, aspx파일 자체를 말한다. 형식(클래스와 동일)은 System.Web.UI.Page 라고 표시되어있지 않다.
현재 __Page 하위에는 3개의 컨트롤이 들어있음을 알 수 있다.

2. ctl00
treeview.aspx 페이지에서 첫 번째로 서버컨트롤이 UniqueID="ctl00" 로 잡혀있다. 페이지의 시작에서부터 첫번째 서버컨트롤까지의 내용이라고 생각하자. 이것은 특별하게 id 로 지정할 수가 없다. 말 그대로 하드코딩 된 내용이기 때문이다.

3. frm
<form>..</form>을 의미하는 것을 알 수 있다. 형식을 봐도 HtmlForm 클래스이다. 3개의 하위 컨트롤이 있는데, 소스에서 MyTree는 볼 수 있으나 ctl01, ctl02 이름의 LiteralControl 형식은 찾을 수 없다. 그러므로 이 2개의 LiteralControl 은 MyTree에 의해 생성되었다고 볼 수 있다.

4. ctl03
ctl00 처럼 마지막 서버컨트롤이 끝난 후 하드 코딩된 페이지의 끝까지의 내용이라고 생각하면 되겠다.

이것을 Controls 라는 컬렉션으로 접근해보자. 현재의 컨트롤 트리를 코드로 표현하면 다음과 같다.

1번 항목은 파일 자체를 말하므로 제외.
2번 항목인 ctl00 은 Controls[0] 이다.
3번 항목인 frm 은 Controls[1] 이다.
       3번에 포함된 ctl01은 Controls[1].Controls[0] 이다.
      3번에 포함된 MyTree는 Controls[1].Controls[1] 이다.
     3번에 포함된 ctl02는 Controls[1].Controls[2] 이다.
4번 항목인 ctl03 은 Controls[2] 이다.

이제 프로그래밍 코드를 이용해 TreeView 컨트롤을 숨겨보자.
확인하기 쉽게 trace="true" 항목을 지우고, treeview.aspx 파일의 코드에 다음처럼 넣어본다.

treeview.aspx 코드
<%@ Page Language="C#" runat="server" %>

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

void Page_Load()
{
Controls[1].Visible = false;
((LiteralControl)Controls[2]).Text = "End Of File";
}

</script>

첫 번째 줄은 이 페이지의 최상위 두 번째(Controls[1]) 인 <form>..</form>컨트롤의 Visible 값을 false로 주었다. 두 번째 줄은 trace에서 봤듯이, 마지막의 하드코딩 된 값의 영역을 "End Of File"이라고 주었다.

실행해보고 소스보기를 해보자.
실행했을 때는 <form></form>이 모두 가려졌으니, 해당 소스코드 역시 가려지게된다. 그러므로 거기에 포함된 TreeView 역시 함께 해당된다. 그리고 End Of File 이 출력되어있는데, 소스보기를 하면, 실제 우리 소스에서 하드코딩 된 (..) </form> 뒤의 내용이 없어지고, 지정한 텍스트로 변형된 것을 알 수 있다.

이렇게 우리가 원하는 컨트롤을 간단하게 Controls[] 컬렉션으로 계층적 접근을 하여 속성값을 부여할 수 있다. 또한 앞에서 했듯이 id가 있는 컨트롤은 id로 속성을 지정할 수 있다.

<form>..</form>의 id가 frm 이므로, 간단하게 frm.Visible = false; 코드로 첫 번째 줄과 같은 효과를 낼 수 있을 것이다.

이렇게 trace="true"로 aspx 파일의 서버컨트롤 계층을 확인해보고 Controls[] 로 접근하여 속성을 변경해보았다. 그러나 일반적으로는 id 로 접근하므로 컨트롤에 id를 주고 프로그램 코드에서 컨트롤의 id로 접근하는 방식을 사용한다.

서버컨트롤을 다루는 3장에 대한 설명도 후반으로 접어든 것 같다.
(게시판은 언제 만드냐고 물어보신다면... 면목이 없긴 하다 -_-)

서버컨트롤의 실습으로, 여러분들이 직접 asp.net 코드만을 이용해서 웹폼 서버컨트롤을 넣어보자.
control_test.aspx 파일을 기본으로 하여,

1. Panel 컨트롤 생성 -- <div>..</div>태그로 렌더링(결과) 됨
2. Panel 컨트롤에 Label 컨트롤을 생성하여 추가. -- Label 컨트롤의 결과는 <span>..</span>태그로 렌더링(변형)됨
3. Label.Text 속성에 "안녕하세요" 라는 string 값을 넣음.
4. Calendar 컨트롤을 생성하여 Panel 컨트롤에 추가.
▶ Calendar 는 <form></form>내에 와야 된다는 점에 주의
5. DropDownList 컨트롤을 생성 -- <select>..</select>
6. DropDownList.Items.Add(new ListItem("보여줄내용", "값")) 메서드를 이용해서 DropDownList 컨트롤에 임의의 항목 추가
7. Panel 컨트롤에 DropDownList 추가
▶ DropDownList 역시 <form></form>내에 와야 된다는 점에 주의
8. Page.Controls.Add(컨트롤인스턴스) 메서드를 이용하여 Panel 컨트롤을 추가. -- aspx 페이지에 보여짐.

꼭 여러분들이 직접 해보길 바란다. 해당 컨트롤은 모두 MSDN 에서 찾을 수 있으며, 다루지 않은 내용의 메서드는 본문에 알려드렸다.

여기서 컨트롤에 컨트롤을 추가한다는 말은 무엇인가? 당연히 태그내에 태그를 추가한다는 말과 동일하다. 결과물이 태그이기 때문에, 우리는 서버컨트롤을 알맞게 포함관계를 주어 구성하는 것을 하고 있다.

다음은 결과와 소스 파일이다.

control_test.aspx

소스파일에 주석도 함께 읽어보기 바란다.
실행 후 소스보기를 해보자. 우리가 단계적으로 수행한 컨트롤들이 해당 태그에 알맞게 들어갔는지 확인해보자. (알 수 없는 코드는 제외하고 <태그>만 보자)

또는 익스플로러 버전 8또는 9를 사용한다면, 실행결과창에서 F12를 눌러 좌측 태그구조를 쉽게 확인할 수 있다.

asp.net 서버컨트롤 -> 프로그래밍 코드로 제작 또는 디자인 단에 배치 -> 결과는 <tag>

이해하셨길 바라며,
다음 시간에..

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

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

닷넷 게시판 만들기 Part 20 - DBMS (SQL Server) 설치 (2)	2011.02.16
닷넷 게시판 만들기 Part 19 - 이벤트. 그리고 포스트백(postback) 개념. (3)	2011.02.15
닷넷 게시판 만들기 Part 17 - 웹폼에 대하여 좀 더 상세하게 (0)	2011.02.11
닷넷 게시판 만들기 Part 16 - 웹폼 서버컨트롤 (0)	2011.02.10
닷넷 게시판 만들기 Part 15 - 서버컨트롤과 이벤트 (0)	2011.01.31

공유하기 링크

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

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

Comments

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

닷넷 게시판 만들기 Part 18 - 웹폼 마지막 본문

닷넷 게시판 만들기 Part 18 - 웹폼 마지막

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

티스토리툴바