출처 :
http://www.bullog.net/
값 입력 관련 웹 폼 컨트롤
이번에는 사용자가 값을 입력할 수 있는 컨트롤들에 대해 알아보도록 하겠습니다. 입력 관련 컨트롤들은 앞서 살펴본 버튼 관련 컨트롤들과 함께 사용자가 서버로 데이터를 전송하는데 필요한 가장 기초적인 컨트롤이라 할 수 있습니다.
TextBox 컨트롤
TextBox 컨트롤은 사용자가 어떤 값을 입력할 수 있는 입력 창을 웹 폼 페이지에 나타내는 컨트롤로 System.Web.UI.WebControls.TextBox 클래스로 구현되어 있으며 역시 WebControl 클래스를 상속하고 있습니다.
이미 앞서 살펴본 HTML 서버 컨트롤 중에서 입력과 관련된 컨트롤은 HtmlInputText, HtmlTextArea, HtmlInputPassword 등 세 가지 컨트롤로 구분되어 있었지만 TextBox 컨트롤은 이 들 세 컨트롤의 기능을 모두 하나로 제공합니다.
TextBox 컨트롤의 사용 형식
TextBox 컨트롤의 사용 형식은 다음과 같습니다.
웹 폼 페이지에서
<asp:TextBox ID=”컨트롤의 ID” Runat=”server”></asp:TextBox>
C# 코드에서
TextBox tb = new TextBox();
TextBox 컨트롤의 생성자
TextBox 컨트롤의 생성자는 다음과 같습니다.
public TextBox();
이 생성자는 인자 없이 새로운 TextBox 클래스의 인스턴스 객체를 생성합니다.
TextBox 컨트롤의 속성
TextBox 컨트롤은 사용자가 값을 입력할 수 있는 다양한 형태의 입력 창을 웹 폼 페이지에 나타내기 위해 WebControl 클래스로부터 상속 받은 속성 외에 추가적으로 다음과 같은 속성을 제공합니다.
AutoPostBack 속성
이 속성은 TextBox 컨트롤이 특정 버튼을 클릭하지 않아도 자동적으로 서버에 현재 웹 폼의 데이터를 전송하는지 여부를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual bool AutoPostBack {get; set;}
이 속성 값을 true로 설정하면 사용자가 컨트롤에 입력을 마친 뒤 다른 컨트롤로 포커스를 이동하는 등의 행동으로 TextBox 컨트롤이 포커스를 잃게 되는 동시에 웹 폼의 데이터가 서버로 자동 전송됩니다. 단, TextBox 컨트롤의 내용이 변경되지 않은 경우에는 서버로 데이터가 전송되지 않으며, 기본 값은 false입니다.
Columns 속성
이 속성은 TextBox 컨트롤의 너비를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual int Columns {get; set;}
이 속성은 <INPUT TYPE=”text”> HTML 태그의 size 특성과 동일한 기능을 수행하는 속성입니다. 기본 값은 너비가 설정되어 있지 않음을 의미하는 0입니다.
MaxLength 속성
이 속성은 TextBox 컨트롤에 입력될 값의 최대 길이를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual int MaxLength {get; set;}
이 속성은 <INPUT TYPE=”text”> HTML 태그의 maxlength 특성과 동일한 기능을 수행하며 기본 값은 입력할 수 있는 값의 길이가 정해져 있지 않음을 의미하는 0입니다.
이 속성 값은 TextMode 속성이 SingleLine이거나 Password인 경우에만 유효합니다. TextMode 속성은 잠시 후에 설명하도록 하겠습니다.
ReadOnly 속성
이 속성은 TextBox 컨트롤을 읽기 전용, 즉 사용자가 값을 입력할 수는 없고 값을 표시할 수만 있는 지 여부를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual bool ReadOnly {get; set;}
이 속성의 값을 true로 설정하면 TextBox 컨트롤이 포커스를 얻을 수는 있지만 사용자가 값을 입력할 수는 없게 됩니다. 기본 값은 false이며 <INPUT TYPE=”text”> HTML 태그의 readonly 특성과 동일합니다.
Rows 속성
이 속성은 TextBox 컨트롤에 사용자가 값을 입력할 수 있는 공간의 줄 수를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual int Rows {get; set;}
이 속성은 TextMode 속성이 MultiLine으로 설정된 경우에만 유효하며 기본 값은 0으로 한 줄만 입력할 수 있는 입력 창으로 나타납니다.
Text 속성
이 속성은 TextBox 컨트롤에 입력될 텍스트의 내용을 지정하거나 또는 입력되어 있는 텍스트의 내용을 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual string Text {get; set;}
이 속성의 기본 값은 텍스트가 입력되어 있지 않음을 의미하는 String.Empty입니다.
TextMode 속성
이 속성은 TextBox가 어떤 형태로 동작할 것인지를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual TextBoxMode TextMode {get; set;}
이 속성은 다음 표에 나타난 TextBoxMode 열거 형 값 중 하나를 가집니다.
|
값 |
설명 |
|
SingleLine |
기본 값이며 한 줄 입력 모드로 동작합니다. <INPUT TYPE=”text”> 태그로 렌더링 됩니다. |
|
Password |
비밀번호 입력 모드로 동작합니다. <INPUT TYPE=”password”> 태그로 렌더링 됩니다. |
|
MultiLine |
여러 줄 입력 모드로 동작합니다. <TEXTAREA>태그로 렌더링 됩니다. |
Wrap 속성
이 속성은 TextBox 컨트롤에 입력된 내용에 대해 줄 바꿈을 적용할 지 여부를 지정하거나 가져오기 위한 속성으로 형식은 다음과 같습니다.
public virtual bool Wrap {get; set;}
이 속성의 기본 값은 true이며 이 경우 입력된 텍스트들이 TextBox 컨트롤의 너비에 따라 자동으로 줄 바꿈이 됩니다. 이 속성은 TextMode 속성이 MultiLine으로 설정된 경우에만 적용됩니다.
TextBox 컨트롤의 메서드
TextBox 컨트롤은 WebControl 클래스로부터 상속 받은 메서드 외에 추가적으로 제공되는 메서드가 없습니다.
TextBox 컨트롤의 이벤트
TextBox 컨트롤은 WebControl 클래스로부터 상속 받은 이벤트 외에 추가적으로 다음과 같은 이벤트를 제공합니다.
TextChanged 이벤트
이 이벤트는 TextBox 컨트롤에 입력된 텍스트의 내용이 변경되었을 때 발생하는 이벤트로 형식은 다음과 같습니다.
public event EventHandler TextChanged;
이 이벤트는 다음과 같이 사용할 수 있습니다.
웹 폼 페이지에서
<asp:TextBox ID=”컨트롤의ID” Runat=”server”
OnTextChanged=”MethodName”></asp:TextBox>
C# 코드에서
TextBox tb = new TextBox();
tb.TextChanged += new EventHandler(MethodName);
이 이벤트를 처리하기 위한 이벤트 핸들러 메서드 형식은 다음과 같습니다.
public void MethodName(object sender, EventArgs e) {...}
TextBox 컨트롤 예제
다음 예제는 TextBox 컨트롤을 이용하여 웹 폼 페이지에서 세 가지 다른 형태의 입력 창이 나타나도록 구현한 예제입니다.
|
1 |
<%@ Page Language="C#" %> |
|
2 |
<html> |
|
3 |
<head> |
|
4 |
<title>TextBox Control</title> |
|
5 |
</head> |
|
6 |
<body> |
|
7 |
<form id="form1" runat="server"> |
|
8 |
ID: |
|
9 |
<asp:TextBox ID="txtID" |
|
10 |
Runat="Server" MaxLength="12"> |
|
11 |
</asp:TextBox><br> |
|
12 |
Password: |
|
13 |
<asp:TextBox ID="txtPwd" |
|
14 |
Runat="Server" MaxLength="12" |
|
15 |
TextMode="Password"> |
|
16 |
</asp:TextBox><br> |
|
17 |
Comment: |
|
18 |
<asp:TextBox ID="txtComment" |
|
19 |
Runat="Server" Rows="5" |
|
20 |
TextMode="MultiLine"> |
|
21 |
</asp:TextBox> |
|
22 |
</form> |
|
23 |
</body> |
|
24 |
</html> |
위의 예제에는 총 3개의 TextBox 컨트롤이 웹 폼에 배치되어 있습니다. 각각 일반 한 줄 텍스트를 입력할 수 있는 TextBox 컨트롤과 비밀 번호를 입력할 수 있는 TextBox 그리고 여러 줄 텍스트를 입력할 수 있는 TextBox 등 입니다.
이 예제의 실행 결과는 아래 그림과 같습니다.
