5 ASP.NET 표준 컨트롤
ASP.NET 웹 폼은 컨트롤 기반으로 프로그래밍을 할 수 있도록 많은 양의 서버 컨트롤을 제공합니다. 이번 강의는 ASP.NET에서 제공하는 서버 컨트롤 중에서 가장 기본이 되고 많이 사용되는 표준 컨트롤에 대해서 설명합니다.
5.1 ASP.NET 표준 컨트롤이란?
5.1.1 표준 컨트롤이란?
ASP.NET으로 웹 페이지를 제작할 때 만들어지는 모든 UI를 가리켜 ASP.NET 서버 컨트롤이라 하고, 일반적으로 많이 사용되는 컨트롤을 그룹으로 묶어서 표준 컨트롤(Standard Control)이라고 합니다. 표준 컨트롤은 HTML에서 제공하는 태그들을 좀 더 사용하기 편하고 프로그래밍과 연동이 가능하도록 다시 작성된 프로그래밍 단위 하나를 말합니다. Visual Studio에서 제공하는 표준 컨트롤은 상당히 많다. 이번 강의를 통해서 ASP.NET 표준 컨트롤의 여러 가지 기능들을 살펴보겠습니다.
아울러 이번 강의는 상당히 지루한 장이 될 수도 있습니다. 왜냐하면, 표준 컨트롤을 한 번씩은 다 사용해보고자 각각의 컨트롤마다 실습 예제를 두었기 때문입니다. 비록 컨트롤의 종류가 많더라도 반드시 실습을 따라 해봐야 나중에 실제 웹 사이트를 제작할 때 필요한 기능들을 끄집어 낼 수 있으니 신경 써서 학습하기 바랍니다.
5.1.2 System.Web.UI.Control 클래스
Control 클래스는 모든 ASP.NET 서버 컨트롤의 부모 컨트롤이므로 서버 컨트롤은 Control 클래스가 가지는 멤버들을 똑같이 사용할 수 있습니다. 따라서 컨트롤 간의 멤버 이름이 비슷합니다.
5.2 [실습] 웹 프로젝트 생성 및 웹 폼 출력하기 5.2.1 소개 ASP.NET 웹 폼의 서버 컨트롤에서 가장 기본이 되고 많이 사용되는 표준 컨트롤 학습을 위한 웹 프로젝트를 생성해보겠습니다.
<참고> 이번 내용을 "표준 컨트롤 학습을 위한 웹프로젝트 생성 및 기본 웹페이지 테스트"라는 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.
https://youtu.be/WhX55LDST7g </참고>
5.2.2 따라하기 ① Visual Studio를 실행하고 ASP.NET 웹 응용 프로그램을 다음과 같이 생성합니다. 이름 위치 ASP.NET 템플릿 선택 폴더 및 핵심 참조 추가 DevStandardControl C:\ASP.NET ASP.NET 4.6 템플릿-Empty Web Forms
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 추가 학습: 새 항목> 메뉴를 클릭한 후 다음과 같이 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmStandardControl.aspx
③ FrmStandardControl.aspx 파일에 다음과 같이 입력합니다. <코드>FrmStandardControl.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmStandardControl.aspx.cs"
Inherits="DevStandardControl.FrmStandardControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>표준 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>표준 컨트롤(Standard Control)</h1>
<h2>[1] 순수 HTML 사용해서 버튼 만들기</h2>
<input type="button" value="버튼1" id="btnInput" />
<h2>[2] runat 속성을 추가해서 서버 컨트롤 버튼 만들기</h2>
<input type="button" value="버튼2" runat="server" id="btnHtml" />
<h2>[3] ASP.NET 표준 컨트롤을 사용해서 버튼 만들기</h2>
<asp:Button Text="버튼3" runat="server" ID="btnServer" />
</div>
</form>
</body>
</html>
이 코드는 내용 그대로 ASP.NET 웹 폼에서 순수 HTML 태그를 사용해서 버튼 하나를 만들 수 있습니다. 코드에 runat=”server” 속성값을 주어서 서버 측 버튼 컨트롤로 변경할 수 있습니다. 그리고 아예 처음부터 이번 강의에서 다루게 될 ASP.NET 표준 컨트롤을 사용하여 서버 측 버튼을 만들어 사용할 수도 있습니다.
④ FrmStandardControl.aspx.cs 파일을 열고 다음과 같이 입력합니다.
using System;
namespace DevStandardControl
{
public partial class FrmStandardControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btnHtml.Value = "HTML 서버 컨트롤 - 버튼";
btnServer.Text = "표준 컨트롤 - 버튼";
}
}
}
코드 비하인드 파일에서는 순수 HTML에 접근할 수 없습니다. runat=”server”를 붙인 input 요소에 대해서는 Value 속성으로 접근이 가능합니다. ASP.NET 표준 컨트롤은 Text 속성을 통해 버튼의 텍스트를 변경할 수 있는 것이 특징입니다.
⑤ FrmStandardControl.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 5 1 FrmStandardControl.aspx 페이지 실행 결과
5.2.3 마무리 DevStandardControl 웹 프로젝트를 만들었습니다. DevStandardControl 웹 프로젝트는 ASP.NET 표준 컨트롤 학습을 위한 모든 웹 페이지를 포함합니다. 각 컨트롤에 대한 내용을 하나씩 페이지를 만들어가면서 연습합니다.
5.3 Label 컨트롤 레이블 컨트롤은 웹 폼에 편집이 불가능한 문자열을 출력하고자 할 때 사용합니다.
ASP.NET의 소스 부분 <asp:Label ID="lblDateTime" runat="server" /> 웹 브라우저 출력 부분
레이블 컨트롤의 주요 구성 요소는 다음과 같습니다. 멤버 이름 설명 클래스 Label System.Web.UI.WebControls.Label 클래스 속성 Text 레이블 컨트롤에 들어갈 문자열 지정 ForeColor 글자색: color:blue; BackColor 배경색: background-color:yello; BoderColor 테두리 색상: border-color:red; BorderStyle 테두리 스타일: border-style:solid; BorderWidth 테두리 두께: border-width:1px;
5.4 [실습] Label 컨트롤을 사용한 현재 날짜와 시간 출력하기 5.4.1 소개 웹 페이지에 레이블을 떨어뜨려 놓고 해당 레이블에 웹 브라우저가 로드되는 순간의 서버 측 시간을 구해서 출력해보겠습니다.
5.4.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. 또는 다른 ASP.NET 웹프로젝트를 하나 만들고, 각 컨트롤의 웹 폼 페이지를 구성해 연습해도 됩니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 다음 FrmLabel.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmLabel.aspx
③ FrmLabel.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmLabel.aspx.cs" Inherits="DevStandardControl.FrmLabel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>레이블 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
현재 시간 :
<asp:Label ID="lblDateTime" runat="server"
BackColor="#FFFFC0" BorderColor="Red"
BorderStyle="Solid" BorderWidth="1px"
ForeColor="Blue" />
</div>
</form>
</body>
</html>
④ FrmLabel.aspx.cs 파일에 다음과 같이 코드를 작성합니다.
using System;
namespace DevStandardControl
{
public partial class FrmLabel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 레이블에 현재 날짜와 시간을 출력
this.lblDateTime.Text = DateTime.Now.ToString();
}
}
}
⑤ FrmLabel.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 5 2 FrmLabel.aspx 페이지 실행 결과
5.4.3 마무리 레이블 컨트롤은 단지 웹 브라우저 화면에 프로그래밍 방식으로 문자열을 출력하고자 할 때 사용하는 컨트롤입니다.
5.5 TextBox 컨트롤 텍스트박스 컨트롤은 사용자에게 어떤 값을 입력 받을 때 사용합니다. 종류는 크게 세 가지다.
SingleLine 텍스트박스 : <input type="text">와 같으며 일반적인 텍스트 값을 입력 받을 때 사용됩니다.
Password 텍스트박스 : <input type="password">와 같으며 입력 되는 텍스트 값을 보여주지 않습니다. 비밀번호 입력 양식으로 사용됩니다.
MultiLine 텍스트박스 : <textarea></textarea>와 같으며 여러 줄을 입력 받을 때 사용됩니다.
ASP.NET의 소스 부분
<asp:TextBox ID="txtSingleLine" runat="server" />
웹 브라우저 출력 부분
<input name="txtSingleLine" type="text" id="txtSingleLine" />
TextBox 컨트롤의 주요 구성 요소는 다음과 같습니다. 멤버 이름 설명 클래스 TextBox System.Web.UI.WebControls.Text 클래스 속성 Text 텍스트박스 컨트롤에 쓰여질 문자열 지정 TextMode 텍스트, 암호, 멀티라인 텍스트 결정 HTML5의 주요 텍스트박스(Color, Email, DateTime, Phone 등) 모양을 제공 ReadOnly 읽기 전용 텍스트박스 생성
5.6 [실습] TextBox 컨트롤을 사용하여 사용자 정보 얻어오기 5.6.1 소개 사용자에게 어떤 값을 입력 받고자 할 때 사용하는 텍스트박스 컨트롤의 세 가지 유형을 살펴보겠습니다.
5.6.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmTextBox.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmTextBox.aspx
③ FrmTextBox.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmTextBox.aspx.cs" Inherits="DevStandardControl.FrmTextBox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>텍스트박스 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>SingleLine:</h2>
이름 :
<asp:TextBox ID="txtSingleLine" runat="server" CssClass="myTextAlign" />
<h2>MultiLine:</h2>
소개 :
<asp:TextBox ID="txtMultiLine" runat="server" TextMode="MultiLine" />
<br />
<h2>Password:</h2>
암호 :
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
<hr />
<asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="확인" />
</div>
</form>
</body>
</html>
④ FrmTextBox.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
namespace DevStandardControl
{
public partial class FrmTextBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Empty
}
protected void btnOK_Click(object sender, EventArgs e)
{
// 이름 받아오기
string strName = this.txtSingleLine.Text;
// 소개 받아오기
string strIntro = this.txtMultiLine.Text;
// 암호 받아오기
string strPassword = this.txtPassword.Text;
// 출력
Response.Write(
strName + "<br />"
+ strIntro + "<br />"
+ strPassword + "<br />");
}
}
}
⑤ FrmTextBox.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 5 3 FrmTextBox.aspx 페이지 실행 결과
세 텍스트박스에 데이터를 입력 후 <확인> 버튼을 누르면 상단에 해당 데이터가 출력됩니다. 그림 5 4 버튼 클릭 후 값 받아서 처리하기
5.6.3 마무리 <디자인 보기>에서 텍스트박스 컨트롤을 선택한 후 속성 창에 나타나는 여러 가지 속성을 눈여겨 보기 바랍니다. 처음부터 모든 속성을 알고 프로그램을 작성하기는 힘들다. 시간을 두고 하나씩 익혀나가는 것을 추천합니다.
추가 학습: 암호 텍스트박스는 포스트백될 때 기본적으로 값이 사라진다. 아래 코드를 Page_Load 이벤트 처리기에 넣어두면 값을 유지할 수 있습니다. <코드> // <포스트백 때 암호 텍스트박스 값 사라지는 것 방지> if (Page.IsPostBack) { if (!string.IsNullOrEmpty(txtPassword.Text.Trim())) { txtPassword.Attributes["value"] = txtPassword.Text; } if (!string.IsNullOrEmpty(txtPasswordConfirm.Text.Trim())) { txtPasswordConfirm.Attributes["value"] = txtPasswordConfirm.Text; } } // </포스트백 때 암호 텍스트박스 값 사라지는 것 방지>
5.7 Button 컨트롤
버튼(단추) 컨트롤은 사용자가 어떤 명령을 서버 측에 전달할 때 사용합니다.
ASP.NET의 소스 부분
<asp:Button id="btnSubmit" runat="server" Text="데이터 전송" BorderStyle="Groove"></asp:Button>
웹 브라우저 출력 부분
<input type="submit" name="btnSubmit" value="데이터 전송" id="btnSubmit" style="border-style:Groove;" />
Button 컨트롤의 주요 구성 요소는 다음과 같습니다.
멤버 이름 설명
클래스 Button System.Web.UI.WebControls.Button 클래스
속성 Text 버튼 컨트롤에 쓰여질 문자열 지정
PostBackUrl 현재 버튼에 대한 이벤트 처리기를 다른 웹 폼에서 처리하고자 할 때 웹 폼의 경로 지정
5.8 [실습] Button 컨트롤을 사용하여 명령어 실행하기
5.8.1 소개
버튼 컨트롤은 사용 빈도가 꽤 높다. 이 실습에서는 버튼을 클릭할 때마다 텍스트박스에 있는 숫자 값을 1 증가시키거나 1 감소시키는 코드를 작성해보겠습니다.
5.8.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmButton.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmButton.aspx
③ FrmButton.aspx 페이지에 다음과 같이 입력합니다.
```csharp FrmButton.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmButton.aspx.cs" Inherits="DevStandardControl.FrmButton" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>버튼 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtNum" runat="server" />
<asp:Button ID="btnUp" runat="server"
OnClick="btnUp_Click" Text=" 증가 " />
<asp:Button ID="btnDown" runat="server"
OnClick="btnDown_Click" Text=" 감소 " />
</div>
</form>
</body>
</html>
④ FrmButton.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. <코드> using System;
namespace DevStandardControl { public partial class FrmButton : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { txtNum.Text = "0"; // 처음 로드할 때만 0으로 초기화 } } protected void btnUp_Click(object sender, EventArgs e) { txtNum.Text = Convert.ToString(Convert.ToInt32(txtNum.Text) + 1); } protected void btnDown_Click(object sender, EventArgs e) { txtNum.Text = Convert.ToString(int.Parse(txtNum.Text) - 1); } } }
⑤ FrmButton.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. <증가> 또는 <감소> 버튼을 클릭하면 텍스트박스의 숫자가 증가 또는 감소합니다.
그림 5 5 FrmButton.aspx 페이지 실행 결과
5.8.3 마무리
텍스트박스의 숫자 값을 1을 증가시키거나 감소시키는 기능을 버튼 컨트롤의 클릭 이벤트를 활용하여 구현해보았습니다. 버튼 컨트롤은 ASP.NET 서버 컨트롤 중에서 많이 사용하는 컨트롤 중 하나다.
<참고> 코드 비하인드 파일의 네임스페이스 선언
앞으로 나오는 모든 C# 코드(cs 파일)의 네임스페이스 선언부에서 추가되지 않고 Visual Studio에서 자동적으로 만들어지는 코드는 지면 관계상 생략합니다. 만약 System.IO와 같이 해당 C# 코드에 추가되어야 하는 코드는 네임스페이스 선언부에 포함시킵니다.
</참고>
<참고> 서버 컨트롤의 이름 짓는 규칙
나는 컨트롤의 이름을 지을 때 접두사에 다음과 같은 규칙을 주로 사용합니다.
레이블: lbl
텍스트박스: txt
버튼: btn, cmd
콤보박스(드롭다운리스트): cmb
</참고>
5.9 LinkButton 컨트롤
LinkButton 컨트롤은 Button 컨트롤과 마찬가지로 사용자가 어떤 명령을 서버 측에 전달할 때 사용합니다. 이때 웹 브라우저에 보여주는 모양은 <a>로 출력됩니다.
ASP.NET의 소스 부분
<asp:LinkButton id="lnkSubmit" runat="server">링크버튼</asp:LinkButton>
웹 브라우저 출력 부분
<a id="lnkSubmit" href="javascript:__doPostBack('lnkSubmit','')">링크버튼</a>
5.10 [실습] LinkButton 컨트롤을 사용하여 링크 모양의 버튼 만들기
5.10.1 소개
링크 버튼 컨트롤은 하이퍼링크와 같은 모양이지만, 버튼 컨트롤과 마찬가지로 Click 이벤트를 사용하여 코드 비하인드 파일에서 특정 기능을 구현할 수 있습니다.
5.10.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmLinkButton.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmLinkButton.aspx
③ FrmLinkButton.aspx 페이지에 다음과 같이 입력합니다.
```csharp FrmLinkButton.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmLinkButton.aspx.cs" Inherits="DevStandardControl.FrmLinkButton" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>링크 버튼 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LinkButton ID="lnkDotNetKorea" runat="server"
OnClick="lnkDotNetKorea_Click">닷넷코리아로 이동
</asp:LinkButton>
</div>
</form>
</body>
</html>
④ FrmLinkButton.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 링크 버튼을 클릭했을 때 실행되는 이벤트 처리기에 특정 사이트로 이동하는 코드를 입력합니다.
using System;
namespace DevStandardControl
{
public partial class FrmLinkButton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Empty
}
protected void lnkDotNetKorea_Click(object sender, EventArgs e)
{
// 닷넷코리아 이동
Response.Redirect("http://www.dotnetkorea.com/");
}
}
}
⑤ FrmLinkButton.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. a 태그로 이루어진 링크다. 그림 5 6 링크 버튼 컨트롤
5.10.3 마무리 링크 버튼 컨트롤은 모양은 하이퍼링크이지만, 기능은 버튼과 같습니다.
5.11 ImageButton 컨트롤 5.11.1 소개 ImageButton 컨트롤은 LinkButton 컨트롤과 마찬가지로 사용자가 어떤 명령을 서버 측에 전달할 때 사용합니다. 이때 웹 브라우저에서 실행되는 모양은 로 출력됩니다.
ASP.NET의 소스 부분 <asp:ImageButton id="ImageButton1" runat="server" ImageUrl= "http://dotnetkorea.com/common/images/logo/dotnetkoreaLogo1.gif"> </asp:ImageButton> 웹 브라우저 출력 부분 <input type="image" name="ImageButton1" id="ImageButton1" src="http://dotnetkorea.com/common/images/logo/dotnetkoreaLogo1.gif" border="0 />
5.12 [실습] 이미지 버튼 컨트롤을 사용하여 명령어 실행하기 5.12.1 소개 단순한 버튼이 아닌 원하는 이미지를 사용하여 버튼의 기능을 수행하는 이미지 버튼 컨트롤을 만들어보겠습니다.
5.12.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmImageButton.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmImageButton.aspx
③ FrmImageButton.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrmImageButton.aspx.cs"
Inherits="DevStandardControl.FrmImageButton" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>이미지 버튼 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageButton ID="imgWrite" runat="server"
AlternateText="글쓰기"
OnClick="imgWrite_Click" ToolTip="글쓰기" />
<asp:ImageButton ID="imgList" runat="server"
AlternateText="리스트"
OnClick="imgList_Click" ToolTip="리스트" />
</div>
</form>
</body>
</html>
④ FrmImageButton.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Web.UI;
namespace DevStandardControl
{
public partial class FrmImageButton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.imgWrite.ImageUrl =
"/images/btn_post.gif";
this.imgList.ImageUrl =
"./images/btn_list.gif";
}
protected void imgWrite_Click(
object sender, ImageClickEventArgs e)
{
Response.Write("글쓰기 버튼 클릭됨.<br />");
}
protected void imgList_Click(
object sender, ImageClickEventArgs e)
{
Response.Write("리스트 버튼 클릭됨.<br />");
}
}
}
페이지를 로드할 때 각 이미지를 ImageUrl 속성에서 지정할 수 있습니다. 여기서 사용하는 이미지는 이 책의 소스에서 DevStandardControle 프로젝트의 images 폴더에 있는 이미지를 참고하거나 다른 이미지로 테스트해도 상관 없다.
⑤ FrmImageButton.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 5 7 이미지 버튼 컨트롤
버튼을 클릭하면 텍스트가 화면에 출력됩니다.
5.12.3 마무리 이미지 버튼 컨트롤은 버튼 컨트롤과 마찬가지로 클릭할 때 명령어를 실행합니다.
5.13 [실습] 세 가지 버튼 컨트롤을 사용하여 명령어 실행하기 5.13.1 소개 버튼 컨트롤, 링크 버튼 컨트롤, 이미지 버튼 컨트롤, 세 가지 컨트롤을 사용하여 이미지 모양의 버튼 기능을 작성해보겠습니다.
5.13.2 따라하기 ⑥ DevStandardControl 프로젝트를 실행합니다. ⑦ 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCommandControl.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmCommandControl.aspx
⑧ FrmCommandControl.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCommandControl.aspx.cs" Inherits="DevStandardControl.FrmCommandControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>명령 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
버튼 컨트롤:
<asp:Button ID="btnButton" runat="server" Text="버튼"
OnClick="btnCommand_Click" /><br />
<br />
링크버튼 컨트롤:
<asp:LinkButton ID="btnLink" runat="server"
OnClick="btnCommand_Click">링크버튼</asp:LinkButton><br />
<br />
이미지버튼 컨트롤:
<asp:ImageButton ID="btnImage" runat="server"
ImageUrl="./images/btn_home.gif" ToolTip="홈으로..."
AlternateText="홈으로..." OnClick="btnImage_Click" /><br />
<br />
<asp:Label ID="lblDisplay" runat="server"></asp:Label><br />
</div>
</form>
</body>
</html>
위 코드에서 OnClick 같은 클릭 이벤트 처리기는 <디자인 보기>에서 마우스로 btnButton 버튼, btnLink 링크버튼, btnImage 이미지버튼을 각각 더블 클릭하여 btnButton_Click, btnLink_Click, btnImage_Click, 세 가지 이벤트 처리기를 생성할 수도 있습니다.
⑨ FrmCommandControl.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. <코드> using System; using System.Web.UI;
namespace DevStandardControl
{
public partial class FrmCommandControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 레이블의 배경색 변경
this.lblDisplay.ForeColor = System.Drawing.Color.Red;
}
protected void btnCommand_Click(object sender, EventArgs e)
{
// sender(전달자): 현재 이벤트핸들러를 호출한 객체(이름으로 접근 가능)
// 버튼 컨트롤인지 링크버튼 컨트롤인지 구분
if (sender == btnButton)
{
this.lblDisplay.Text = "버튼 클릭됨.";
}
else if (sender == btnLink)
{
this.lblDisplay.Text = "링크버튼 클릭됨.";
}
}
protected void btnImage_Click(object sender, ImageClickEventArgs e)
{
// XXXEventArgs 클래스형 매개변수는 현재 시점에서 필요한 추가 정보 제공
// 클릭된 이미지의 좌표 출력
this.lblDisplay.Text = String.Format(
"이미지 버튼 클릭됨.
X좌표:{0}, Y좌표: {1}"
, e.X, e.Y
);
// 해당 이미지의 가로 20픽셀, 세로 20픽셀 이상 클릭하면 이동
if (e.X > 20 && e.Y > 20) // IE에 최적화
{
Response.Redirect("http://dotnetkorea.com/");
}
}
}
}
⑩ FrmCommandControl.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 이미지버튼을 클릭하면 이미지의 좌표가 레이블에 출력됩니다.
그림 5 8 명령 컨트롤 페이지 웹 브라우저로 실행 결과
5.13.3 마무리
버튼, 링크버튼, 이미지버튼 컨트롤은 모두 버튼을 클릭할 때 명령어를 실행합니다.