lecture Home > ASP.NET > 악꽁이의 ASP.NET 강의

악꽁이의 ASP.NET 강의

   강좌 최초 작성일 : 2002년 03월 26일
   강좌 최종 수정일 : 2002년 03월 27일

   강좌 읽음 수 :

   작성자 : acggongi(임 태영)
   편집자 : Taeyo(김 태영)

   강좌 제목 : HtmlForm, HtmlAnchor, HtmlSelect, HtmlTextArea

강좌 전 태오의 잡담>

재미있는 c# 그리고.. 재미있는 ASP.NET..  그리고, 재미있는 태오  ^^;;


강좌 시작 >

이번 강좌는 HtmlForm 컨트롤, HtmlAnchor 컨트롤, HtmlSelect 컨트롤 그리고 HtmlTextArear 컨트롤을 볼 차례입니다. 지난 강좌에서 HtmlTable 컨트롤을 보았습니다. 지난 강좌에서 보았던 HtmlTable 컨트롤과 이번 강좌에서 보게 될 Html 컨트롤들은 시작태그와 닫는 태그의 한 쌍이 존재 하는 컨테이너 컨트롤들입니다. 지난 강좌에 이어 계속해서 컨테이너 컨트롤들을 마저 살펴 보겠습니다. (부지런히 컨트롤들 마치고 조그만한 프로젝트라도 만들어 봐야 할 텐데 악꽁이가 게을러서 ....)


악꽁이의 한 마디..."페이지 지시자"

하나의 웹 폼을 열어 작업을 하다 보면 Html 소스 보기 창에서 항상 처음 나오는 코드가 있습니다. 많이 보셨을테지만 별 신경 쓰게 하지 않는 코드 이기도 하죠. 이번 강좌를 들어가기에 앞서 첫 강좌에 올렸어야 할 부분이지만 미처 다루지 못했던 그 부분에 대해 약간 언급하고 들어 가겠습니다.

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="form.aspx.vb" Inherits="html.form"%>

외부에서 어떤 소스를 그대로 복사해서 사용할 경우 예를 들어 게시판 구현시 글의 등록 폼과 글의 수정 폼은 거의 흡사하며, 데이터 바인딩 부분만이 추가되므로 글 수정 폼 작성시에 글 등록 폼을 복사하여 붙여 넣기 한 후 코드를 추가하게 되는 경우가 간혹 있습니다. 이런 경우라 하더라도 절대 윗 부분의 코드는 복사 하면 않됩니다. 왜냐면 윗 부분에서 정의 하고자 하는 것은 이 페이지가 어떤 페이지이고, 그에 따른 속성들 까지도 정의 하고 있기 때문이죠. 구체적으로 알아 보겠지만, 위의 페이지를 "페이지 지시자"라고 합니다.웹 폼은 반드시 하나의 페이지 지시자가 필요 합니다. 페이지 지시자의 시작은 <%@ Page 로시작해서......%>로 끝나게 됩니다. 페이지 지시자가 하는 역할은 페이지의 속성과 클래스 및 컴파일시 필요한 부분들을 설정하게 됩니다.

속 성
설 명
Language
현재 페이지에서 사용하는 프로그래밍 언어.
"vb" 또는 "c#" 등으로 표현 됩니다.
AutoEventWireup
페이지를 정해진 이벤트로 자동 연결 할지를 결정합니다.
Default는 True 입니다.
*IDE를 사용할 경우에는 이벤트가 코드 비하인드 파일에서 정해지므로 이 값을 False로 해야 합니다.
Inherits
페이지의 상속에 관련된 코드 비하인드 클래스를 정의 합니다. 코드 비하인드 클래스의 정보를 제공하며 IDE에 의해 자동으로 설정 됩니다.
Buffer
HTTP 프로토콜의 버퍼와 관련된 부분을 결정합니다. Boolean형으로 True와 False 값을 가집니다.
ClassName
페이지가 동적으로 컴파일 되기 위해서 페이지의 클래스에 대한 부분들을 설명하는 부분입니다. 유효한 클래스 이름을 지정해야 합니다.
CompilerOptions
페이지의 컴파일 옵션을 정의합니다.
ContentType
ContentType을 정의 합니다.(MineType) 이 옵션의 리스트는 http://www.microsoft.com/technet 를 참조 하시기 바랍니다.
EnableSessionState
페이지의 session_state를 정하는 속성으로, True / ReadOnly / False의 값을 가집니다.
EnableViewState
페이지에 사용자 상태 정보를 유지할지의 여부를 결정합니다. 기본값은 True이며, 외부에서 페이지의 초기 정보를 가져온다면 서버의 부하를 줄이기 위해 False로 설정하면 됩니다.
ErroPage
에러 페이지에 대해 redirection URL을 규정합니다.
Explicit
VB의 Option Explicit Mode의 사용 여부 입니다. 기본값은 False입니다.
Src
코드비하인드클래스가 정의된 코드 비하인드 파일을 가르킵니다. IDE에서는 사용되지 않습니다.
Strict
VB의 Option Strict 모드의 사용 여부 입니다. 기본값은 False입니다
Trace
Trace(추적)기능을 사용할 지의 여부를 결정합니다. 기본값은 False입니다.
TraceMode
Trace Mode가 True일때 Trace의 Display 옵션을 결정합니다. SortByTime과 SortByCategory의 값을 가집니다. 더 자세한 내용은 해당 강좌에 싣도록 하겠습니다.
WarningLevel
컴파일 시 사용하는 경고레벨을 결정합니다. 0에서 4까지 값을 가지며 자세한 내용은 CLR의 CompilerParameters.WarningLevel 속성을 확인해 보시면 됩니다.
나름데로 페이지 지시자에 대해 정리를 해 보았습니다. 그러나 대부분의 웹 프로그램에서는 페이지 지시자의 기본값을 그대로 사용해도 됩니다. MSDN에 더 자세한 내용이 기술되어 있으며 번역을 해서 보는 것 보다는 원문을 보는게 이해가 더 빠르리라 생각합니다. 더 자세한 내용을 원하시는 초심자 분들은 MSDN을 참조 할 것을 권합니다..

HTMLFORM CONTROL

ASP.NET의 웹 페이지에서 유일무이한 컨트롤 입니다. 반드시 하나에 둘 이상은 않됩니다. PostBack 서비스를 사용하기 위해 유지가 필요한 컨트롤들이 그 사이에 존재 하게 됩니다. 기본 문법은 다음과 같습니다.

<form
runat="server"
id="programmaticID"
method=POST | GET
action="srcpageURL"
target="frame Target"
entype="Content Type"
>

</form>

<Method>
폼의 자료를 서버에 전송하는 방식을 결정합니다. 아시다 시피 Get 방식과 Post 방식이 있으며, 기본값은 Post 방식이며 PostBack 서비스를 정상적으로 이용하려면 기본값을 그대로 사용해야 합니다.
<Target>
Method를 통해 폼의 자료를 서버에 전송했습니다. 그 다음에 그 결과를 사용자에게 보여 줘야 하는데 어디에 보여 줄지를 결정하는 속성입니다. (blank, _parent, _self, _top 의 값을 가집니다.)
<Enctype>
서버로 자료 전송시 자료를 인코딩하는 방식을 결정합니다. 예를 들어 자료실 구축시 HtmlInputFile 컨트롤을 사용하게 되는데 이때 Form 태그에는 반드시 enctype="multipart/form-data" 라는 속성을 추가하여 사용해야 합니다. multipart 형식으로 인코딩하여 서버로 자료를 전송하겠다는 의미입니다.

예제를 보겠습니다. 코드비하인드 파일을 사용하지 않고 이벤트를 VB스크립트로 발생 시켰습니다.
먼저 VB 스크립트를 정의 한 후 OnServerClick="정의된 이름"을 적용시켜 이벤트를 규정하였습니다. 물론 코드비하이드 파일의 해당 컨트롤의 클릭 이벤트에 정의 하여도 무방합니다.





HtmlAnchor Control

Html 태그의 <a>에 해당하는 컨트롤입니다. href 부분에 링크될 URL을 기입하며, target에는 _blank, _self, _parent, and _top 등으로 그 타입을 정하면 됩니다. title 부분에는 마우스 오버시 display되는 문자입니다. 문법과 예제를 살펴 보겠습니다.

<a
runat="server"
id="programmaticID"
href="linkurl"
name="bookmarkname"
OnServerClick="onserverclickhandler"
target="linkedcontentframeorwindow"
title="titledisplayedbybrowser" >


linktext

</a>


HtmlAnchor 컨트롤은 ServerClick 이라는 이벤트를 가집니다. ServerClick 이벤트를 지정하게 되면 HtmlAnchor 컨트롤은 지정된 URL로 옮겨 가는 대신 서버에서 이벤트 처리가 수행됩니다.

예제로로는 Html 소스 보기에서 코딩한 결과와 코드 비하인드 파일을 이용한 결과가 동일한 예제를 준비 했습니다.
먼저 IDE의 Html 소스보기 모드에서 다음과 같이 anchor 컨트롤을 하나 생성합니다.

<form id="Form1" method="post" runat="server">
<!--HTML 소스보기에서 사용시 -->
<a id="anchor" runat="server" href="http://www.taeyo.pe.kr" title="태오의 ASP.NET" target="_blank">
Taeyo's Site</a>
</form>

이번에는 Html 에서는 단순히 <a id="anchor2" runat="server">데브피아</a>만을 코드에 입력한 다음 코드비하인드 파일의 페이지의 초기값을 주는 Page_Load 이벤트 부분에 다음과 같이 초기 값을 입력합니다.

anchor2.HRef = "http://www.devpia.com"
anchor2.Title = "(주) 데브피아"
anchor2.Target = "_blank"

결과는 다음과 같습니다.



HtmlSelect Control

<select
runat="server"
id="programmaticID"
OnServerChange="onserverchangehandler"
DataSource="databindingsource"
DataTextField="fieldtodatabindoptionttext"
DataValueField="fieldtodatabindoptionvalue"
Multiple
Items="collectionofoptionelements"
SelectedIndex="indexofcurrentlyselecteditem"
Size="#ofvisibleitems"
Value="currentitemvalue" >


<option>value1</option>
<option>value2</option>

</select>

Html 태그에서 <select>..</select>와 같은 일을 합니다. 이 컨트롤도 웹폼 디자이너에서 생성 가능하며, 또한 개발자의 코딩으로도 생성이 가능합니다.
웹폼 디자이너에서의 생성은 도구상자의 Html 중 Dropdown을 선택합니다. 먼저 하나의 웹폼을 생성한 후 도구를 추가해보시기 바랍니다.좌측의 속성 상자는 HtmlSelect 컨트롤의 팝업메뉴의 속성페이지 이며, 우측은 컨트롤의 속성창입니다. 동일한 옵션은 화살표를 사용했습니다.

<Multiple>
컨트롤이 동시에 선택 가능한지의 여부를 Boolean형으로 결정. 기본값은 False 입니다.

<Size>
브라우저에서 보여지는 항목의 갯수입니다.

<SelectedIndex>
선택된 항목의 idex 값입니다. 선택되지 않으면 -1값을 가집니다.

이벤트로는 SeverChange가 있는데, 컨트롤의 값이 변경 되었을 때 서버에 곧 바로 전송합니다.

예제는 텍스트 박스 하나와 추가 버튼 그리고 Select 컨트롤과 적용 버튼이 있습니다.
텍스트 박스에 문자를 입력하면 select 컨트롤에 추가 되며, 추가된 select 컨트롤에서 선택 후 적용 버튼을 누르면 <span></span> 부분의 텍스트의 백그라운드 칼라가 변화하는 로직으로 구현 됩니다. 먼저 Html 소스는 다음과 같습니다.

코드비하인드 파일은 각각의 버튼에 이벤트를 적용 시킵니다.

다음 예제는 데이터 바인딩에 의한 Select 컨트롤의 항목을 추가 해보겠습니다. 간단하게 웹폼 디자인 모드에서 Select 컨트롤 하나 추가 한 후, Page_Load 이벤트에 항목을 추가 시켜 보겠습니다.




HtmlTextArea Control

이번 강좌의 마지막 컨트롤인 HtmlTextArea 컨트롤입니다. Html요소의 <textarea>에 대응되는 컨트롤로 긴 문자열의 입력을 받아 폼에 전송할 때 사용되는 컨트롤입니다.

<textarea
runat="server"
id="programmaticID"
cols="numberofcolsintextarea"
name="namepassedtobrowser"
rows="numberofrowsintextarea"
onserverchange="onserverchangehandler" >


textareacontent

</textarea>

이 컨트롤은 속성으로 Cols와 Rows를 가집니다. 각각은 영역의 열 수와 행 수를 나타내며, HtmlTextArea 컨트롤은 ServerChange 라는 이벤트를 가집니다. 이는 값 변경 시 서버에 전송한다는 의미의 이벤트 입니다. 이번 예제는 TextArea 영역에 값을 입력 받아 이를 Html과 Text 형식으로 뿌려 주게 됩니다.


결과는 다음과 같습니다..

Back