이번에서 지금까지의 기본 지식을 바탕으로 하여, ASP.NET 웹 폼 페이지에서 사용할 수 있는 여러 가지 서버 컨트롤들에 대해서 알아보고자 한다. 웹 폼에서 사용할 수 있는 컨트롤은 크게 HTML 서버 컨트롤과 ASP.NET 웹 폼 컨트롤로 구분되는데, 이 장에서는 ASP.NET 웹 폼 컨트롤(혹은 ASP.NET 서버 컨트롤)을 중심으로 진행하려 한다. 서버 컨트롤들은 페이지의 UI를 직접적으로 담당하는 부분이기에, 반드시 익숙해져야만 하는 것들이다. 이러한 부분에 익숙해지지 못하면, 웹 어플리케이션의 제작을 시작할 수도 없기 때문이다.
ASP.NET에서는 사용자 인터페이스(User Interface)를 위해서 2 종류의 컨트롤 집합을 제공해 준다. 하나는 HTML 서버 컨트롤이고, 다른 하나는 ASP.NET 서버 컨트롤(혹은 웹 폼 서버 컨트롤이라고도 한다)이다. 이 책에서는 두 종류의 서버 컨트롤 중에서 ASP.NET 서버 컨트롤에 무게를 두고 다루고 있다. 왜냐하면, HTML 서버 컨트롤은 기존의 HTML 컨트롤에 익숙한 개발자들을 위해 준비된 중간자적 컨트롤이라 볼 수 있으며, 몇몇 컨트롤을 제외하고는 같은 기능을 가진 컨트롤들을 ASP.NET 웹 폼 컨트롤이 제공하고 있기 때문이다. 또한 ASP.NET 서버 컨트롤에서는 기존의 컨트롤에서는 제공되지 않았던 Validation 컨트롤이나 List 컨트롤, 그 외 Calendar(달력), 광고용 컴포넌트등과 같은 풍부한 기능을 제공하는 Rich 컨트롤들도 제공한다. 사실상, 실무에서는 HTML 서버 컨트롤보다는 ASP.NET 웹 폼 컨트롤을 주로 사용하게 되며, HTML 서버 컨트롤은 몇몇 특별한 경우에만 사용하는 편이다. (예를 들면, 파일 업로드를 구현하는 등의 몇몇 기능을 위해서)
여러분은 우선적으로 ASP.NET 웹 폼 컨트롤들에 대해서 익히게 될 것이며, HTML 서버 컨트롤들에 대해서는 필요한 것들에 한해서 다루어 보게 될 것이다. VS.NET과 함께 제공되는 [Visual Studio.NET 도움말]을 활용한다면 이 책에서 다루지 않는 여러 HTML 서버 컨트롤들에 대해서도 충분한 정보를 얻을 수 있다. 놀랍게도 이제는 .NET 관련 도움말의 상당 부분이 한글로써 제공된다. 또한, 그 분량도 방대해서 여러분이 기초만 어느 정도 확고히 한다면, 그 이후는 특별한 전문 서적의 도움 없이도, 도움말과 MSDN만으로 충분히 중급 수준의 학습을 해 나갈 수 있을 것이다. 해서, 고수들로부터 전해져 내려오는 옛 격언 중에는 이런 말이 있다.
"MS 프로그래밍의 모든 것은 MSDN으로 통한다"
| [Visual Studio.NET 도움말]은 .NET 개발과 관계된 네임스페이스, 클래스, 기반 기술들을 문서로 정리해서 제공하는 작은 MSDN이다. 이는 VS.NET이 설치되면서 같이 설치되며, 다음 경로로써 실행할 수 있다. 이후에서 필자가 [VS.NET 도움말]에서 찾아보라고 이야기하면 바로 이 도구를 사용해서 검색해 보라는 의미이니, 잘 기억해 두기 바란다. 이 도구 없이는 개발이 어려울 정도로, 이는 폭 넓은 도움을 준다. 진짜다. 거기다가 전부 한글이다. 오옷! 이것은 놀라움이다. 
|
웹 폼 컨트롤은 크게 4가지 종류의 컨트롤 그룹으로 구분이 되는데, 그들은 다음과 같다.
-HTML 요소들로 렌더링 되는 ASP.NET 기본 컨트롤들 (예: 버튼, 텍스트 박스, 이미지 등)
-다양한 데이터의 유효성을 검사하는 유효성 검사(Validation) 컨트롤들
-풍부한 UI와 기능을 제공하는 리치(Rich) 컨트롤들 (예: 달력, AdRotator)
-데이터 바인딩을 제공하는 바운드(Bound) 컨트롤들(DataGrid, DataList, Repeater등)
이미 여러분은 이전 장에서 위의 컨트롤들 중, ASP.NET 기본 컨트롤 중에 하나인 Label 컨트롤과 Button 컨트롤을 가벼운 수준으로 다루어 보았었다. 예를 들면, Label 서버 컨트롤은 다음과 같이 작성했었다.
<asp:Label id="lblMsg" runat="server"></asp:Label>
모든 웹 폼 컨트롤들은 반드시 닫는 태그와 함께 작성되어야 하며, 닫는 태그를 생략할 경우는 태그의 닫힘꺾쇠(>) 이전에 슬래시(/)를 사용해 주어야 한다. 예를 들면, 다음처럼 말이다. 이 코드는 위의 Label 코드와 완전하게 동일하다.
<asp:Label id="lblMsg" runat="server" />
모든 웹 폼 서버 컨트롤들은 반드시 고유한 id 값을 가져야 하며, runat="Server" 어트리뷰트도 지정되어야만 한다. 물론, VS.NET을 통해서 컨트롤들을 웹 폼에 추가할 경우에는 runat="server" 설정이 자동으로 지정된다. 하지만, 수작업으로 하드 코딩을 할 경우에는 반드시 이 설정을 추가해 주어야 한다. 자. 그렇다면, 이제 하나씩, 하나씩 자주 사용하는 서버 컨트롤들에 대해서 알아보도록 하자.
ASP.NET 기본 컨트롤들
다음은 ASP.NET에 내장된 기본적인 컨트롤들에 대한 간략한 소개이다. 각각의 컨트롤은 클라이언트 측으로의 HTML 출력 시 적절한 HTML 요소로써 렌더링 되며, 다음 표에서는 그 내용도 표기하였다. 즉, 이 컨트롤들은 서버에서만 컨트롤로 인식될 뿐, 클라이언트에서는 일반적인 HTML 요소로 표기된다는 점을 꼭 기억하기 바란다.
| 컨트롤 | 설명 |
| Label | 사용자가 편집할 수 없는 표시 전용 텍스트 컨트롤. <span> … </span> |
| TextBox | 사용자로부터 텍스트 데이터를 입력 받는 컨트롤.런타임에 편집하거나 프로그래밍 방식으로 변경 가능. <input type="text" … / id="text" name="text"> 혹은
<input type="password" … / id="password" name="password"> 혹은
<textarea id=textarea1 name=textarea1> … </textarea> |
| Image | 이미지 표시용 컨트롤. <img … /> |
| Button | 주로 작업을 수행하도록 명령을 내리는 버튼 컨트롤 <input type="submit" … / id="submit"1 name="submit"1> 혹은
<input type="button" … / id="button"1 name="button"1> |
| LinkButton | 하이퍼링크 스타일의 버튼 컨트롤. <a><img … /></a> |
| ImageButton | 이미지와 연결된 버튼 컨트롤. 이미지로 표시 <input type=“image" … /> |
| HyperLink | 하이퍼링크용 컨트롤 <a> … </a> |
| CheckBox | 사용자가 설정/해제할 수 있는 박스 모양의 컨트롤 (다중 선택 가능) <input type=“checkbox" … /> |
| RadioButton | 사용자가 설정/해제할 수 있는 원 모양의 컨트롤 (다중 선택 불가) <input type=“radio" … /> |
| Panel | 다른 컨트롤의 컨테이너 역할을 하는 컨트롤. <div> … </div> |
| Table | 테이블 생성 컨트롤. <table> … </table> |
| TableRow | 테이블에 행을 생성하는 컨트롤. <tr> … </tr> |
| TableCell | 테이블에 셀을 생성하는 컨트롤. <td> … </td> |
| PlaceHolder | 일종의 공간확보를 위한 컨트롤. 페이지에 이 컨트롤을 추가한 다음 런타임 시 동적으로 자식 요소들을 추가할 수 있다. |
| Literal | 정적인 텍스트를 웹 페이지로 렌더링 하는 컨트롤. |
각각의 서버 컨트롤들은 사실상 WebControl 이라는 클래스로부터 상속을 받아 확장된 개체들이기에, 이 들은 모두 WebControl 클래스의 모든 기능을 그대로 보유하고 있으며, 그 기능 위에 자신들의 이름에 걸 맞는 독특한 기능들이 추가된 형태로 존재한다. 그렇다면, 모든 ASP.NET 웹 폼 컨트롤들이 공통적으로 보유하고 있는 기능에는 어떠한 것들이 있을까? 즉, WebControl 이라는 클래스로부터 상속을 받아 보유하게 된 속성이나 메서드 등에는 어떠한 것들이 있을까? 이에 관한 지식을 미연에 습득해 둔다면 각각의 서버 컨트롤들을 기능적으로 구분하고 이해하는 데에 더욱 도움이 될 것이다.
WebControl 클래스 (namespace : System.Web.UI.WebControls)
언급했다시피 WebControl 클래스는 대부분의 기본적인 ASP.NET 웹 폼 컨트롤들의 부모 클래스로써, 웹 서버 컨트롤들에게 공통적으로 필요한 속성, 메서드 및 이벤트들을 제공한다. 그러므로, 이 클래스로부터 상속을 받은 여러 ASP.NET 기본 컨트롤들은 그 상속 받은 속성들을 설정하여, 개별 서버 컨트롤의 모양과 구동을 제어할 수 있다. 예를 들면, 컨트롤의 배경색과 글꼴 색은 BackColor 및 ForeColor 속성을 사용하여 각각 제어할 수 있으며, 컨트롤의 테두리에 대해서는 BorderWidth, BorderStyle 및 BorderColor 속성을 통해 설정할 수 있다. 또한, 컨트롤의 크기는 Height 및 Width 속성을 사용하여 지정할 수 있다.
대부분의 ASP.NET 컨트롤들이 이러한 기능을 그대로 물려받기에 WebControl 클래스의 기능을 꿰고 있다면, 컨트롤의 일반적인 외형은 그를 통해 쉽게 설정할 수 있으며, 각각의 ASP.NET 컨트롤이 자체적으로 보유하고 있는 특성들만을 추가적으로 습득하여 사용하면 될 것이다. 그러한 자체 기능은 대부분 몇 가지 정도에 불과하기에, 각각의 컨트롤에 대해 익숙해지는 데에 그리 오랜 시간이 요구되지는 않는다. 이것이 상속이라는 것의 장점이다.
예를 들면, ASP.NET 컨트롤 중 Button 컨트롤을 예로 들어보자. 이 컨트롤도 WebControl로부터 상속 받은 컨트롤이기에 WebControl 의 모든 기능(속성, 메서드, 이벤트 등을 의미하며, 멤버라고도 표현한다)를 그대로 가지고 있으며, 더해서, 자신만의 기능인 CommandName, CommandArgument 등의 몇몇 속성과 Click, Command 정도의 이벤트를 추가적으로 가지고 있다. 이런 식으로 각각의 컨트롤은 계층적인 구조를 가지고 있으며, 자신의 부모 클래스가 가진 기능은 자식 클래스에서 그대로 사용이 가능하다. 이는 개발자인 우리가 각각의 컨트롤들의 역할과 기능을 쉽게 이해할 수 있게 해 주며, 사용하기에 용이하게 해 준다.
그렇다면, 이제 WebControl 클래스의 기능들을 알아보도록 하자. 모두 기억하고 있을 필요는 없지만, 기능의 이름들이 대단히 직관적이어서 한번 읽어보는 것만으로도 몇몇 기능들은 저절로 외워질 것이다. 다음의 표는 그 기능을 정리한 것이니 차후 여러분이 필요할 경우는 언제라도 참고하기 바란다. (단, 이 표에서 보여지는 것이 전부는 아니며, 자주 사용되는 것을 일부 정리한 것이다)
| 속성 |
| Attributes | ASP.NET 페이지 내에서 현재의 컨트롤을 위해 제공되는 모든 이름/값 쌍의 어트리뷰트의 컬렉션을 반환한다. 이 속성을 이용하여 개발자는 서버 컨트롤이 지원하지 않는 특정 기능에 대한 설정을 지정할 수 있다. |
| AccessKey | 현재의 컨트롤로 포커스를 옮기는 단축키를 설정하거나 리턴 |
| BackColor | 컨트롤의 배경색을 설정하거나 리턴 |
| BorderColor | 컨트롤의 테두리 색을 설정하거나 리턴 |
| BorderStyle | 컨트롤의 테두리 스타일을 설정하거나 리턴 |
| BorderWidth | 컨트롤의 테두리 두께를 설정하거나 리턴 |
ClientID
(Control에서 상속) | ASP.NET에 의해 생성된 컨트롤의 고유 식별자를 리턴 |
Controls
(Control에서 상속) | 현재 컨트롤 내에 포함되어져 있는 자식 컨트롤들의 참조 목록을 나타내는 ControlCollection 개체를 리턴 |
| Enabled | 컨트롤의 사용가능 여부를 나타내는 Boolean 값을 설정하거나 리턴 |
EnableViewState
(Control에서 상속) | 현재 컨트롤과 자식 컨트롤들의 상태를 저장할 것인지를 나타내는 Boolean 값을 설정하거나 리턴 |
| Font | 컨트롤의 폰트 정보를 설정하거나 리턴 |
| ForeColor | 컨트롤의 전경색(텍스트의 색상) 설정하거나 리턴 |
| Height | 컨트롤의 높이를 설정하거나 리턴 |
| ID | 컨트롤의 지정된 고유 식별자 값을 설정하거나 리턴 |
Page
(Control에서 상속) | 컨트롤이 포함된 Page 개체에 대한 참조를 리턴 |
Parent
(Control에서 상속) | 현재 컨트롤의 부모 컨트롤에 대한 참조를 리턴. |
| Style | 컨트롤에 사용할 CSS 스타일을 참조 |
| TabIndex | 페이지 내 컨트롤의 탭 순서 값을 설정하거나 리턴 |
| ToolTip | 컨트롤 위에 마우스가 올라왔을 경우 보여질 풍선도움말을 설정하거나 리턴. |
Visible
(Control에서 상속) | 컨트롤을 페이지에 랜더링 할 것인지의 여부를 설정하거나 리턴 |
| Width | 컨트롤의 너비를 설정하거나 리턴 |
| 메서드 |
| DataBind | 자신 컨트롤과 자식 컨트롤들에 대해 데이터 바인딩을 수행한다 |
| FindControl | 현재 컨테이너 내에서 인자로 지정한 컨트롤을 찾는다 |
| HasControls | 자신 컨트롤 내에 지정된 컨트롤을 포함하고 있는지의 여부를 Boolean 값으로 리턴 |
| 이벤트 |
| DataBinding | 데이터 원본으로부터 데이터가 컨트롤에 바인딩 될 경우 발생 |
WebControl 클래스의 모든 기능은 이 컨트롤로부터 상속 받아 구성된 대부분의 ASP.NET 웹 폼 컨트롤에서 사용할 수 있다는 사실을 반드시 기억하자.
그리고, 사실 WebControl이라는 클래스도 Control이라는 클래스로부터 상속을 받아 구성된 클래스이다. 이 이야기는 WebControl 클래스가 Control이라는 클래스의 모든 기능을 또한 보유하고 있음을 의미하는 것이다. 위의 표에서는 그렇게 상속된 기능들도 포함하여 보여주고 있지만, WebControl 클래스는 위의 기능 이외에도 Control 클래스의 모든 기능들을 보유하고 있다는 사실을 알아두자. 그리고, Control이라는 클래스도 또한 Object 라고 하는 클래스로부터 상속을 받아 구성된 클래스라는 것도 기억하자. Object 클래스는 모든 클래스의 최상단 클래스, 조상 클래스이다. 이러한 계층적인 구조를 모두 기억할 필요는 없지만, 장기적으로 여러분은 이러한 구조를 기억하게 될 것이며, 이러한 구조에 익숙해지게 될 것이다. 다음 그림은 이러한 계층 구조를 보여주고 있다.
그렇다면, 이 장을 시작하면서 표로 정리하여 보여주었던 ASP.NET 서버 컨트롤들을 다시금 되새겨 보자. 표에서 정리했던 모든 ASP.NET 기본 컨트롤들은 WebControl로부터 상속 받아 확장된 클래스들이기에, WebControl 클래스의 모든 기능을 그대로 물려받아 구성되며, 추가적으로 자신의 컨트롤에 특화된 여러 기능들을 보유하고 있다. 다음의 표는 WebControl로부터 상속 받은 기능 외에 각 컨트롤들이 가지고 있는 자신만의 기능들을 정리한 것이다.
| 컨트롤 | 속성 | 이벤트 |
| Label | Text | |
| Button | CommandName, CommandArgument, Text, CausesValidation | OnClick, OnCommand |
| LinkButton | CommandName, CommandArgument, Text, CausesValidation | OnClick, OnCommand |
| ImageButton | CommandName, CommandArgument, CausesValidation | OnClick, OnCommand |
| TextBox | AutoPostBack, Columns, MaxLength, ReadOnly,Rows, Text, TextMode, Wrap | OnTextChanged |
| Image | AlternateText, ImageAlign, ImageUrl | |
| HyperLink | ImageUrl, NavigateUrl, Target, Text | |
| CheckBox | AutoPostBack, Checked, Text, TextAlign | OnCheckChanged |
| RadioButton | AutoPostBack, Checked, GroupName, Text, TextAlign | OnCheckChanged |
| Panel | BackImageUrl, HorizontalAlign, Wrap | |
| Table | BackImageUrl, CellPadding, CellSpacing, GridLines, HorizontalAlign, Rows | |
| TableRow | Cells, HorizontalAlign, VerticalAlign | |
| TableCell | ColumnSpan, HorizontalAlign, RowSpan, Text,VerticalAlign, Wrap | |
| Literal | Text | |
| PlaceHolder | | |
이제, 자주 사용되는 각각의 ASP.NET 컨트롤들에 대해서 조금 더 구체적으로 들어가 보도록 하자.
:{3} 
({4})