강좌 전 태오의 잡담>

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

강좌 시작 >

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

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

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

HTMLFORM CONTROL

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

<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되는 문자입니다. 문법과 예제를 살펴 보겠습니다.

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

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

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

결과는 다음과 같습니다.

HtmlSelect Control

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>에 대응되는 컨트롤로 긴 문자열의 입력을 받아 폼에 전송할 때 사용되는 컨트롤입니다.

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

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

Back