[ASP.NET] 15. 표준 웹 컨트롤

HTML 서버 컨트롤은 그대로 HTML 태그로 전환되는 반면, 웹 컨트롤은 사용에 따라 ASP.NET이 자동 생성하는 HTML 태그가 다를 수 있으며, 하나의 웹 컨트롤이 여러 개의 HTML 태그로 표현되기도 한다. HTML 서버 컨트롤은 이전 버전과의 호환 및 마이그레이션을 위해 사용되는 컨트롤로, ASP.NET에서는 웹 컨트롤의 사용을 권장한다.

HTML 서버 컨트롤보다 웹 컨트롤의 사용을 권장하는 이유는?

간편한 UI 기능 제공 : 웹 컨트롤이 HTML로 어떻게 표현될 것인지에 신경 쓰지 않고 단지 하나의 객체로 다루면 된다. 

일관된 객체 모델 제공 : HTML에서 문자열을 입력받을 수 있는 엘리먼트로는 <textarea>,<input type="text">, <input type="password">를 들 수 있는데 반해, 웹 컨트롤에서는 TextBox 컨트롤 하나로 처리한다.

결과에 대한 조정 : ASP.NET은 JavaScript를 이용하는 등 사용자의 웹 브라우저에 맞게 HTML 코드를 자동으로 조정한다.

1.Button형 컨트롤

Button형 컨트롤은 클릭 이벤트를 통해 특정 코드를 실행하거나 웹 폼의 정보를 서버로 전송할 때 사용한다. ASP.NET에는 세 종류(Button, LinkButton, ImageButton)의 BUtton형 컨트롤이 있다.

속성	설명
Text	버튼 위에 보이는 문자열을 지정한다.
CommandArgument	CommandName과 연관된 매개변수를 지정한다.
CommandName	Command 이벤트 발생 시 전달되는 command의 이름을 지정한다.
OnClientClick	클릭 이벤트 발생 시 수행할 클라이언트 스크립트를 지정한다.
PostBackUrl	클릭 이벤트 발생 시 웹 폼의 정보를 전송할 URL을 지정한다.

Button 컨트롤의 주요 이벤트

이벤트	설명
Click	Button 클릭 시 발생
Command	Button 클릭 시 발생

LinkButton 컨트롤

LinkButton 컨트롤은 하이퍼링크 형식으로 표시되는 버튼이다. 웹 페이지에서는 하이퍼링크와 같이 보이지만 Button 컨트롤과 동일한 속성과 이벤트를 갖고 있으며, Button 컨트롤과 같은 형태로 동작한다.

ImageButton 컨트롤

ImageButton 컨트롤은 버튼 모양 대신 이미지를 보여주는 컨트롤이다. 

2.문자열 입출력 컨트롤

사용자로부터 문자열을 입력받거나 웹 폼에 문자열을 출력할 때 사용하는 웹 컨트롤은 사용빈도가 매우 높다. ASP.NET에서 제공하는 대표적인 문자열 입출력 컨트롤에는 TextBox 컨트롤, Label 컨트롤, Literal 컨트롤 등이 있다.

TextBox컨트롤

TextBox컨트롤은 주로 사용자로부터 문자열을 입력받을 때 사용한다.

속성	설명
Text	TextBox 컨트롤의 문자열 내용을 가져오거나 설정한다.
TextMode	문자열 입출력 모드를 지정한다. 지원되는 모드는 다음과 같다. SingleLine(Defalut) : 한 줄로 입출력 MultiLine : 여러 줄로 입 출력 Password : 입출력되는 문자열이 '*' 로 표시
MaxLength	입력할 수 있는 최대 문자 수를 지정한다.
Columns	TextBox 컨트롤의 너비(문자 단위)를 지정한다.
Rows	TextBox 컨트롤의 높이(행 단위)를 지정한다.
ReadOnly	TextBox 컨트롤을 문자열 출력용으로 사용하고자 할 때 True로 설정한다.
Wrap	행의 끝에서 워드랩할 것인지를 지정한다.
AutoPostBack	TextBox 컨트롤에서 엔터를 누를 때마다 서버로 정보를 보낼 것인지를 지정한다.

- AutoPostBack 속성

Button형 이외에 컨트롤들은 내용이 변경되거나 선택되어도 바로 서버로 정보를 전달하지 않는다. 하지만 속성 AutoPostBack을 True로 설정하면 Button형 이외의 컨트롤에서 내용의 변경이나 선택이 이루어졌을 경우 자동으로 정보를 서버로 전송하고 다시 게시한다.

-워드랩(Wrap)   

한 행의 문자열이 길어져 컨트롤의 너비에 전부 표시할 수 없을 경우, 다음 행으로 자동으로 줄바꿈하는 것을 워드랩 이라고한다.

TextBox 컨트롤의 주요 이벤트

이벤트	설명
TextChanged	TextBox 컨트롤의 문자열의 내용이 변경되었을 때 발생한다.

Label 컨트롤

Label 컨트롤은 문자열의 입출력을 모두 하는 TextBox 컨트롤에 반해, 특정 위치에 문자열을 출력하는 단순한 가능을 갖는 컨트롤이다.

Label 컨트롤의 주요 속성

속성	설명
Text	Label 컨트롤의 문자열 내용을 가져오거나 설정한다.

Literal 컨트롤

Literal 컨트롤은 Label 컨트롤과 마찬가지로 문자열을 출력하는 컨트롤이다. Label 컨트롤은 출력 문자열의 폰트, 색상, 크기 등을 지정할 수 있지만, Literal 컨트롤은 이러한 스타일을 지정할 수 없다. 그러나 Literal 컨트롤은 문자열 출력 모드를 변경할 수 있다는 장점이 있다.

속성	설명
Text	Literal 컨트롤의 문자열 내용을 가져오거나 설정한다.
Mode	문자열 출력 모드를 지정한다. PassThrough : 문자열의 내용을 수정하지 않고 그대로 전달한다. Encode : 문자열의 내용을 HTML 문자로 인코딩한 문자열을 웹 브라우저로 전달한다. 예를 들어, 문자열 <th>는 "&lt;th&gt;"로 전달된다. Transform(default) : 지원되지 않는 태그는 문자열에서 제거된다. 예를 들어, WML에서 지원하지 않는 <th> 태그는 WML을 사용하는 장치로 전달될 때 제거된다

3.선택형 컨트롤

사용자들이 특정 항목을 선택하는 경우가 종종 있다. 예를 들어, 성을 구별하거나 관심 분야를 선택하게 할 때 선택형 컨트롤인 CheckBox 컨트롤이나 RadioButton 컨트롤을 사용한다.

CheckBox 컨트롤

CheckBox 컨트롤은 여러 항목을 선택할 때 사용한다. 항목 하나에 대헤서는 선택(Checked=True) 또는 비선택(Checked=False)의 값을 갖지만 다른 항목과 독립적으로 선택되기 때문에 동시에 여러 개를 선택할 수 있다.

CheckBox 컨트롤의 주요 속성

속성	설명
Text	CheckBox 컨트롤에 보여줄 문자열을  지정한다.
TextAlign	CheckBox 컨트롤의 Text 속성 값을 보여줄 위치를 지정한다.
Checked	CheckBox 컨트롤의 선택 여부를 가져오거나 설정한다.

CheckBox 컨트롤의 주요 이벤트

이벤트	설명
CheckedChanged	CheckBox 컨트롤의 선택 상태가 변경될 때 발생한다. AutoPostBack 속성이 True로 설정된 경우에는 자동으로 다시 게시(PostBack)된다.