강좌 최초 작성일 : 2004년 04월 01일
강좌 최종 수정일 : 2004년 08월 17일 작성자 : YouKnow(문윤호) youknow@fuz.co.kr 편집자 : HOONS(박경훈) http://www.hoonsbara.com 강좌 제목 : ASP.NET Summary Ver.2 Chapter 4 (웹 서버 컨트롤 사용하기)
-. 웹 서버 컨트롤은 클라이언트의 타입을 자동으로 감지해서 적절한 결과물로 렌더링하는 기능을 제공한다. 이러한 클라이언트별로 렌더링되는 기능이 웹 서버 컨틀롤이 HTML 서버 컨트롤과 비교되는 가장 큰 특징이라고 할 수 있다. 이번 Chapter에선 웹 서버 컨트롤 중 기본 컨트롤에 대해 알아 보겠다. (Intrinsic Controls)
1. Label 컨트롤
웹 폼 페이지에서 동적인 텍스트를 출력하고자 할 때 사용된다. 런타임시에 페이지 내의 텍스트의 내용을 변화 시킬 수 있다. 따라서 페이지에서 정적인 텍스트는 Label 컨트롤을 사용하지 않고 일반 텍스트로 처리하는 것이 좋다. 또한 Repeater나 DataList, DataGrid 컨트롤과 같은 리스트 컨트롤에서 데이터베이스로 부터 가져온 정보를 출력하고자 할 때 템플릿에 Label 컨트롤을 추가하여 사용할 수도 있다. Label 컨트롤은 Html의 <span> 태그로 렌더링 된다.
2. TextBox 컨트롤
웹 폼에서 사용자로 부터 텍스트나 숫자, 날짜 같은 정보를 입력 받을때 사용하는 컨트롤이다.
TextBox 컨트롤의 주요 프로퍼티
| -. Columns : 컨트롤의 길이
-. MaxLength : 입력할 수 있는 최대 문자열 길이 -. Row : 행 수. TextMode가 MultiLine일 때만 유효하다. -. Text : 박스 내의 텍스트 -. TextMode : Textbox 컨트롤의 형식을 지정한다. Single, MultiLine, Password 값을 설정할 수 있다. |
TextBox 컨트롤의 값이 변경되면 OnTextChanged 이벤트가 발생한다. OnTextChanged(Object sender, EventArgs e)
TextBox 컨트롤은 라운드 트립시에 기존의 텍스트 값에 변화가 있으면 TextChanged 이벤트를 발생시킨다. 이 이벤트는 즉시 일어나는 것이 아니라 웹 폼이 서버로 POST 되었을 때 발생한다. 그러나 'AutoPostBack' 프로퍼티를 'True'로 설정하면 사용작의 포커스가 TextBox 컨트롤을 벗어났을 때 즉시 서버로 전송되게 설정할 수도 있다. 이때 주의 할 것은 사용자가 키 입력을 할 때 발생하는 것이 아니라 컨트롤에서 포커스가 벗어 났을때 발생하는 것이다.
3. Image 컨트롤
웹 폼 페이시 상에 이미지를 보여주고 코드 상에서 이미지를 관리할 때 사용할 수 있는 컨트롤로 Image 컨트롤을 사용하여 페이지 디자인할 때 뿐만 아니라, 런타입 시에도 출력할 이미지 파일을 적절하게 설정할 수 있다. 또한 ImageUrl 프로퍼티를 데이터베이스와 바인딩 시켜서 사용할 수도 있다. Image 컨트롤은 어떠한 이벤트도 발생시키지 않는다. 즉, 마우스 클릭같은 이벤트에 대해서 Image 컨트롤이 반응을 하기 위해선 ImageButton 컨트롤을 사용해야 한다.
Image 컨트롤의 주요 프로퍼티
-. AlternateText : 이미지를 보여줄 수 없을 때 대신하는 텍스트, 이미지를 툴팁으로 제공하는 웹 브라우저도 있다.
-. ImageAlign : 주변의 텍스트와 이미지를의 정렬 방법
-. ImageUrl : 출력할 이미지의 경로
속성창에서 ImageUrl의 확장버튼을 클릭하여 이미지 선택창을 띄어 사용할 이미지의 경로를 선택하고 OK 버튼을 클릭하여 이미지를 설정할 수 있다. 이미지의 Url 타입은 Chapter3의 이미지 출력에서 설명한 바 있다.
|
<form id="Form1" method="post" runat="server"> |
(소스) Label.aspx
웹 폼 페이지내에 Button 컨트롤에 해당 기능을 구현하자. 첫번째 버튼은 Label의 텍스트를 변할 것이고, 두번째 버튼은 TextBox의 입력한 내용을 웹 페이지에 Write 할 것이다.
|
private void Button1_Click(object sender, System.EventArgs e) |
4. CheckBox 컨트롤
웹 폼에서 CheckBox를 사용하는 방법에는 개별적으로 CheckBox 컨트롤을 사용해서 관련 항목끼리 그룹핑하는 방법과 CheckBoxList 컨트롤을 이용하는 방법이 있다. CheckBox 컨트롤을 사용해서 개별적으로 웹 폼에 추가흔 것은 각 컨트롤별로 폰트나 색상과 같은 스타일을 지정 할 수 있다. CheckBox 컨트롤은 사용자가 마우스로 클릭할 때 CheckedChanged라는 이벤트를 발생시킨다.
5. RadioButton 컨트롤
RadioButton 컨트롤도 CheckBox 컨트롤 처럼 웹 폼에서 개별적으로 추가할 수 있고 그룹핑된 RadioButtonList 컨트롤을 사용할 수 있다. RadioButton 컨트롤은 개별적으로 추가하더라도 동일한 그룹 이름을 지정함으로써 그룹핑할 수 있다. 즉, 하나의 RadioButton 컨트롤을 선택하면 그룹 내의 다른 RadioButton은 선택이 해제 된다는 의미이다. RadioButton 컨트롤은 개벌적인 스타일 지정이 가능하다는 장점이 있다. 반면 RadioButtonList 컨트롤은 버튼 사이에 텍스트를 임의로 추가할 수는 없지만 데이터베이스에서 바인딩해서 자동으로 그룹핑할 수 있다.
|
<form id="Form1" method="post" runat="server"> |
(소스)checkbox.aspx
버튼을 클릭하여 어느 Item이 선택 되었는지 확인하는 코드를 작성하자.
|
private void Button1_Click(object sender, System.EventArgs e) |
6. Button, LinkButton, ImageButton 컨트롤
Button은 사용자가 폼에서의 작업을 마친 후 특정 명령을 수행하고자 할 때 쓰이는 컨트롤이다. ASP.NET 서버 컨트롤은 세가지 종류의 Button 컨트롤이 있다.
Button : Html <submit> 태그로 렌더링된다.
LinkButton : 하이퍼링크로 렌더링된다. 그러나 일반 하이퍼링크와는 달리 클릭시 서버로 폼을 전송시키는 클라이언트 스크립트를 포함하고 있다.
ImageButton : 특정 이미지를 버튼으로 지정한다. 또한 ImageButton은 사용자가 클릭한 위치 값을 지원해서 이미지 맵으로 버튼을 사용할 수 있게 해 준다.
위 세가지 형태의 버튼을 모두 사용자가 마우스로 클릭했을 때 폼을 서버로 전송하며 전송된 폼은 서버 코드에 의해서 처리된다.
Button 컨트롤 주요 프로퍼티
-. CommandArgument : Command 프로퍼티와 함께 사용되는 선택적 인자이다. 클릭 이벤트에 추가 정보를 보낼 수 있다. 예를 들어 'Sort' Command에는 'Ascending'이나 'Descending' 같은 값을 인자로 사용할 수 있을 것이다.
-. Command : 컨테이너 컨트롤에 포함되어 있을 경우 클릭시에 처리해야 할 커맨드. 이 프로퍼티는 컨테이너 컨트롤의 OnItemCommand 이벤트의 인자로 넘겨진다.
-. Text : Button 컨트롤의 캡션
Button Click시 OnClick 이벤트가 발생하며 서버로 페이지가 전송된다. OnClick(Object sender, EventArgs e)
LinkButton 컨트롤의 주요 프로퍼티 및 이벤트는 Button 컨트롤과 동일하다.
ImageButton 컨트롤의 주요 프로퍼티와 이벤트는 Button 컨트롤과 비슷하나 Text 프로퍼티가 없는 대신 ImageUrl(출력할 이미지 경로)가 있다.
ImageButton 컨트롤의 속성창에서 ImageUrl 프로퍼티에 사용할 이미지를 지정할 수 있다.
| <form id="Form1" method="post" runat="server">
<P><FONT face="굴림">button : <asp:Button id="Button1" runat="server" Text="Button"></asp:Button></FONT></P> <P><FONT face="굴림">LinkButton : <asp:LinkButton id="LinkButton1" runat="server">LinkButton</asp:LinkButton></FONT></P> <P><FONT face="굴림">ImageButton : <asp:ImageButton id="ImageButton1" runat="server" ImageUrl="../image/next.gif" CommandName="ButtonCommand" CommandArgument="ImageButton"></asp:ImageButton></FONT></P> </form> |
모두 Button Control의 일종이기 때문에 Click 이벤트를 설정할 수 있다. 아래 코드는 클릭시 발생하는 이벤트이 위임자 메소드 이다.
| private void Button1_Click(object sender, System.EventArgs e) { Response.Write("Button 클릭 <hr>"); } private void LinkButton1_Click(object sender, System.EventArgs e) { Response.Write("LinkButton 클릭 <hr>"); } private void ImageButton1_Click(object sender, System.Web.UI.ImageClickEventArgs e) { Response.Write("ImageButton 클릭 <hr>"); } |
(소스)button.aspx
7. HyperLink 컨트롤
사용자가 다른 페이지로 이동할 수 있게 웹 페이지에 링크를 생성한다. 가장 큰 장점은 서버 코드 상에서 링크의 속성을 설정할 수 있다. 예를 들어 페이지에서 링크에 사용될 텍스트나 target 값을 변화시킬 수 있고, 데이터베이스와 연동해서 링크될 페이지나 기타 필요한 속성 값을 자동으로 생성할 수도 있다. HyperLink 컨트롤은 텍스트나 이미지 형태로 출력될 수 있으며 다른 컨트롤처럼 사용자가 클릭했을때 이벤트를 발생시키지는 않지만 내비게이션을 쉽게 구성할 수 있게 해준다.
HyperLink 컨트롤의 주요 프로퍼티
-. ImageUrl : 하이퍼링크에 사용할 이미지 경로
-. NavigateUrl : 이동할 페이지나 북마크 경로
-. Target : 사용자가 클릭했을 때 대상이 되는 HTML 프레임 키워드, 예를 들어 _top, _search, _self, _blank, _parent 등
-. Text : 하이퍼링크에 사용할 텍스트
hyperlink.aspx
<form id="Form1" method="post" runat="server">
<P><FONT face="굴림">텍스트 링크 :
<asp:HyperLink id="HyperLink1" runat="server" NavigateUrl="http://www.noenemy.pe.kr" Target="_self" BackColor="#FFFF80" BorderColor="Lime">Noenemy's ASP.NET</asp:HyperLink></FONT></P>
<P><FONT face="굴림">이미지 링크 :
<asp:HyperLink id="HyperLink2" runat="server" NavigateUrl="http://www.noenemy.pe.kr" Target="_blank" ImageUrl="../image/top_banner.gif">HyperLink</asp:HyperLink></FONT></P>
</form>
8. Table 컨트롤
웹 폼 페이지에서 서버 코드에 의한 테이블을 생성하는 컨트롤이다. Table 컨트롤의 실제 내용의 출력은 TableRow와 TableCell 컨트롤이 담당한다. Table 컨트롤은 TableRow 컨트롤의 부모 컨트롤 역할을 하며 TableRow 컨트롤은 TableCell 컨트롤의 부모 컨트롤 역할을 한다. 웹 폼 페이지가 내부적으로 컨트롤 트리(Control Tree)라는 컬렉션 구조를 통해 HTML로 렌더링 된다. Table 컨트롤의 구조 또한 이와 동일한 개념이다.
Table 컨트롤의 주요 프로퍼티
-. BackImageUrl : 배경으로 사용할 이미지 경로
-. CellPadding : 셀 사이의 간격 (픽셀 단위)
-. CellSpacing : 셀과 셀 내부의 컨트롤 사이의 간격
-. GirdLines : 테이블에사용할 라인의 여부, 기본 값은 None
-. HorizontalAlign : 주변 텍스트와의 정렬 방법
-. Rows : Table을 구성하는 TableRow 객체의 컬렉션
TableRow 컨트를의 주요 프로퍼티
-. Cells : Row를 구성하는 TableCell 객체의 컬렉션
TableCell 컨트롤의 주요 프로퍼티
-. ColumnSpan : 수평방향으로 병합할 컬럼의 수
-. HorizontalAlign : 셀 내용의 수평 정렬 방법
-. RowSpan : 수직방향으로 병할할 컬럼의 수
-. VerticalAlgin : 셀 내용의 수직 정렬 방법
Table 컨트롤의 속성 차에서 Rows 컬렉션을 추가하기 위한 확정 버튼을 클릭하면 'TableRow 컬렉션 편집기'라는 창이 뜬다. '추가' 버튼을 클릭함으로써 TableRow를 손쉽게 추가할 수 있다. TableCell을 추가하기 위해선 Cells 프로퍼티의 확장 버튼을 클릭하여 동일하게 추가 할 수 있다.
| <form id="Form1" method="post" runat="server">
<P><FONT face="굴림">주소록 <asp:Button id="Button1" runat="server" Text="Button"></asp:Button></FONT></P> <P> <asp:Table id="Table1" runat="server" GridLines="Both" Width="500px"> <asp:TableRow> <asp:TableCell VerticalAlign="Middle" BackColor="#FFFFC0" HorizontalAlign="Center" Text="이름"></asp:TableCell> <asp:TableCell VerticalAlign="Bottom" BackColor="#FFFFC0" HorizontalAlign="Center" Text="메일주소"></asp:TableCell> <asp:TableCell VerticalAlign="Middle" BackColor="#FFFFC0" HorizontalAlign="Center" Text="전화번호"></asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="안재우"></asp:TableCell> <asp:TableCell Text="lancers@dotnetxpert.com"></asp:TableCell> <asp:TableCell Text="010-123-4567"></asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="이동범"></asp:TableCell> <asp:TableCell Text="funnyfox@dotnetxpert.com"></asp:TableCell> <asp:TableCell Text="099-234-1392"></asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="김유철"></asp:TableCell> <asp:TableCell Text="nettalk@dotnetxpert.com"></asp:TableCell> <asp:TableCell Text="080-111-222"></asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="김현승"></asp:TableCell> <asp:TableCell Text="puzzle@dotnetxpert.com"></asp:TableCell> <asp:TableCell Text="098-765-5432"></asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Text="김순근"></asp:TableCell> <asp:TableCell Text="noenemy@dotnetxpert.com"></asp:TableCell> <asp:TableCell Text="075-234-1234"></asp:TableCell> </asp:TableRow> </asp:Table></P> </form> |
(소스) table.aspx
버튼을 클릭하여 Table 컨트롤에 TableRow 컨트롤 추가하는 코드이다.
|
private void Button1_Click(object sender, System.EventArgs e) { TableRow Row = new TableRow(); TableCell Cell1 = new TableCell(); TableCell Cell2 = new TableCell(); TableCell Cell3 = new TableCell(); Cell1.Text = "홍길동"; Row.Cells.Add(Cell1); Cell2.Text = "younho@dotnetxpert.com"; Row.Cells.Add(Cell2); Cell3.Text = "016-358-3652"; Row.Cells.Add(Cell3); Table1.Rows.Add(Row); } |
9. Panel 컨트롤
웹 폼 페이지에 다른 컨트롤이나 텍스트를 포함하기 위한 컨테이너 역할을 하는 컨트롤이다.
-. 그룹핑 : 여러 컨트롤들을 Panel 컨트롤 내부에 삽입함으로써 하나의 그룹 단위로 관리할 수 있다. 예를 들어 Panel 컨트롤의 Visible 프로퍼티 값의
설정으로 내부의 모든 컨트롤을 보이게 하거나 숨길 수 있다.
-. 동적 컨트롤 추가 : 런타임시에 Panel 컨트롤 내부에 컨트롤을 추가할 수 있다.
-. 디자인 : Panel의 BackColor나 BorderWidth 속성을 이용해서 페이지 내에서 강조를 통한 시선을 집중 시키는 역할을 할 수 있다.
Panel 컨트롤의 주요 프로퍼티
-. BackImageUrl : 배경으로 사용할 이미지의 경로
-. HorizontalAlign : 주변 테스트와 Panel 컨트롤의 정렬 방법
(소스) panel.aspx
|
<form id="Form1" method="post" runat="server"> <asp:Panel id="Panel1" runat="server" Height="104px" Width="320px"> <BR> <asp:TextBox id="TextBox1" runat="server"></asp:TextBox><BR> <asp:TextBox id="TextBox2" runat="server"></asp:TextBox><BR> </asp:Panel> <br> <asp:Button id="btnShow" runat="server" Text="보이기"></asp:Button> <asp:Button id="btnHide" runat="server" Text="숨기기"></asp:Button> <asp:Button id="btnAdd" runat="server" Text="컨트롤추가"></asp:Button> </form> |
Panel을 숨기거나 보이게 하는 작업을 Visible 프로퍼티를 활용하여 실행할 것이며, Panel 컨트롤내에 TextBox 컨트롤를 추가 한다.
|
private void btnShow_Click(object sender, System.EventArgs e) { Panel1.Visible = true; } private void btnHide_Click(object sender, System.EventArgs e) { Panel1.Visible = false; } private void btnAdd_Click(object sender, System.EventArgs e) { TextBox txtNew = new TextBox(); txtNew.Text = "추가된 TextBox"; Panel1.Controls.Add(txtNew); Panel1.Visible = true; }
|
10. Literal 컨트롤
Literal은 정적인 텍스트를 페이지에 출력하기 위한 컨트롤 이다. Lable 컨트롤은 <span> 요소로 렌터링되었으나 Literal 컨트롤은 일반 텍스트로 렌더링 된다.
literal.aspx
|
<form id="Form1" method="post" runat="server"> <FONT face="굴림">Literal 컨트롤 : </FONT> <asp:Literal id="Literal2" runat="server" Text="Literal 컨트롤"></asp:Literal> <asp:Button id="Button1" runat="server" Text="Button"></asp:Button> </form> |
Button 컨트롤을 클릭하여 Literal의 텍스트를 변경한다.
|
private void Button1_Click(object sender, System.EventArgs e) { Literal2.Text = "정적인 텍스트 입니다"; } |
11. XML 컨트롤
이 컨트롤은 XML 문서 또는 XSL 스타일을 지정한 형태로 웹 페이지 상에 출력하는 역할을 수행한다.
XML 문서를 표시하기 위해서 Document, DocumentContent, DocumentSource주에서 하나의 속성이 반드시 지정되어야 한다. Document는 XML 문서를
지정하고 DocumentContent는 XML 문자열을 지정하고, DocumentSource에는 XML 문서의 주소를 지정한다.
그리고 표시할 스타일에 대한 속성으로 Transform과 TransformSource가 있는데 별도의 XSL 파일이 있다면 TransformSource 속성으로 지정하면
해당 XML문서에 스타일이 적용된 형태로 페이지에 출력된다.
(소스) address.xml
|
<?xml version="1.0" encoding="utf-8" ?> <addressbook> <member> <name>안재우</name> <email>lancers@dotnetxpert.com</email> <phone>010-123-4567</phone> </member> <member> <name>이동범</name> <email>funnyfox@dotnetxpert.com</email> <phone>099-098-1298</phone> </member> <member> <name>김유철</name> <email>nettalk@dotnetxpert.com</email> <phone>080-111-2222</phone> </member> <member> <name>김현승</name> <email>puzzle@dotnetxpert.com</email> <phone>098-134-2642</phone> </member> <member> <name>김순근</name> <email>noenemy@dotnetxpert.com</email> <phone>075-234-1234</phone> </member> </addressbook>
|
(소스) address.xsl
| <?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> XML 주소록?br/> <table border="1" cellpadding="0" cellspacing="0" width="80%"> <tr bgcolor="beige"> <td align="center">이름</td> <td align="center">e-mail</td> <Td align="center">전화번호</Td> </tr> <xsl:for-each select="addressbook/member"> <tr> <td align="center"><xsl:value-of select="name"/></td> <td align="center"><xsl:value-of select="email"/></td> <td align="center"><xsl:value-of select="phone"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> xmltest.aspx <form id="Form1" method="post" runat="server"> <asp:Xml id="Xml1" runat="server" DocumentSource="address.xml" TransformSource="address.xsl"></asp:Xml> </form> |
트랙백 주소 : 'study' 카테고리의 다른 글
| zzzzzz (0) | 2012.10.01 |
|---|---|
| 자동 가입 방지 폼 구현하기 (0) | 2010.12.30 |
| ASP.NET With C Shap [hoons.kr] chapter 3 (0) | 2010.12.27 |
| ASP.net With C Shap Chapter 2 [훈스닷넷 강좌 펌] (0) | 2010.12.27 |
| ASP.NET Summary Chapter 1 ASP.NET 플랫홈(훈스닷넷 강좌) (0) | 2010.12.27 |
