멤버 이름 설명
클래스 HyperLink System.Web.UI.WebControls.HyperLink 클래스
속성 NavigateUrl 링크를 클릭했을 때 이동할 경로
ImageUrl 텍스트 대신 이미지를 링크로 만들고자 할 때 사용
ASP.NET의 소스 부분
<asp:HyperLink id="HyperLink1" runat="server" Target="_blank"
NavigateUrl="http://www.dotnetkorea.com/">닷넷코리아</asp:HyperLink>
<asp:HyperLink id="HyperLink3" runat="server" Target="_self"
NavigateUrl="http://www.JeilStudy.com">비주얼아카데미</asp:HyperLink>
웹 브라우저 출력 부분
닷넷코리아비주얼아카데미
6.3 [실습] 하이퍼링크 컨트롤을 사용하여 링크 만들기
6.3.1 소개
하이퍼링크 컨트롤을 사용하여 HTML의 a 태그를 만들어 보겠습니다.
6.3.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmHyperLink.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmHyperLink.aspx
6.4 Image 컨트롤
6.4.1 소개
이미지 컨트롤은 웹 폼에 간단한 이미지를 동적으로 보여주고자 할 때 사용합니다.
6.4.2 Image 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 Image System.Web.UI.WebControls.Image 클래스
속성 AlternateText 이미지가 표시되지 않을 때 나타나는 대체 텍스트
ImageUrl 이미지 컨트롤에 보여질 이미지 경로
6.5 [실습] 이미지 컨트롤을 사용하여 이미지 표시하기
6.5.1 소개
이미지 컨트롤을 사용하여 HTML의 img 태그를 만들고, 추가 기능을 적용해보겠습니다.
6.5.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmImage.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmImage.aspx
③ FrmImage.aspx 페이지에 다음과 같이 입력합니다. 이미지를 출력하려면 이미지 컨트롤을 웹 폼에 등록하고 ImageUrl 속성 등을 설정합니다. 이미지 경로 등을 설정할 때 웹 폼에서는 ~/ 경로를 사용할 수 있는데 이는 프로젝트의 루트 경로를 의미합니다.
버튼을 클릭할 때 현재 시간의 초 값을 가져와서 짝수면 첫 번째 이미지를 출력하고, 홀수면 두번째 이미지를 출력하는 예제 코드입니다.
⑤ FrmImage.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 출력되면 이미지 순환 버튼을 클릭하여 다른 이미지가 나타나는 것을 확인합니다.
그림 6 2 이미지 컨트롤을 사용하여 버튼 클릭 시 동적으로 이미지 변경하기
6.5.3 마무리
이미지 컨트롤로 웹 페이지에 이미지를 출력해보았습니다.
6.6 ImageMap 컨트롤
6.6.1 소개
이미지맵 컨트롤은 HTML의 이미지맵 기능을 좀 더 사용하기 편하게 만들어 놓은 ASP.NET 서버 컨트롤입니다.
6.6.2 ImageMap 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 ImageMap System.Web.UI.WebControls.ImageMap 클래스
속성 ImageUrl 이미지맵에 사용할 이미지의 경로
NavigatorUrl 정해진 영역을 클릭했을 때 이동할 URL 경로
AlternateText 이미지가 표시되지 않을 때 나타나는 대체 텍스트
HotSpots 사각형, 원, 다각형으로 이미지맵 설정 시 좌표 지정
이벤트 Click 이미지맵 컨트롤을 클릭했을 때 발생
6.7 [실습] 이미지맵 컨트롤을 사용하여 이미지맵 구현하기
6.7.1 소개
이미지맵 컨트롤을 사용하여 HTML의 이미지맵 기능을 구현해보겠습니다.
6.7.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmImageMap.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmImageMap.aspx
이미지맵 컨트롤을 사용하면 특정 이미지를 읽어와 이미지에 좌표를 사용하여 영역을 구분한 뒤 서로 다른 URL로 이동할 수 있습니다. RectangleHotSpot 컨트롤을 사용하여 좌표 (0, 0)에서 (20, 120)까지 클릭하면 앞서 미리 작성한 FrmButton.aspx 페이지로 이동합니다. (20, 0)에서 (40, 120)까지 클릭하면 FrmLable.aspx 페이지로 이동하도록 설정합니다. 이렇게 사각형 영역에 대한 좌표를 설정합니다.
④ 이번 실습은 따로 코드 비하인드 파일을 사용하지 않고 바로 웹 브라우저로 실행합니다. FrmImageMap.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 출력된 그림 중 두 번째 이미지의 RadioButton 부분을 클릭하면 FrmButton.aspx 페이지로 이동하고, RadioButtonList 부분을 클릭하면 FrmLable.aspx 페이지로 이동하는 것을 확인합니다.
그림 6 3 이미지 맵 컨트롤 사용하기
6.7.3 마무리
이미지맵 컨트롤을 사용하여 웹 페이지의 이미지의 특정 부분에 따라서 서로 다른 링크를 제공하는 기능을 구현해보았습니다.
6.8 Table 컨트롤
6.8.1 소개
테이블 컨트롤은 동적으로 HTML의 테이블을 생성하고자 할 때 사용하는 서버 컨트롤입니다. HTML에서 테이블을 만들 때 사용하는
,
,
태그에 대한 서버 측 표현 방식은 다음과 같습니다.
Table 컨트롤 :
태그
TableRow 컬렉션 :
태그
TableCell 컬렉션 :
태그
<참고> 젠코딩(ZenCoding)
Visual Studio의 확장 기능인 Web Essentials를 설치하면 웹 개발에 필요한 유용한 기능을 제공하는데 그 중 하나가 젠코딩입니다. Web Essentials을 설치하려면 Visual Studio > 도구 > 확장 및 업데이트 > 온라인 > Web Essentials 2015 식으로 검색하여 가장 최신 버전을 내려받아서 설치할 수 있습니다.
Visual Studio에서 젠코딩으로 7행 8열짜리 테이블을 쉽게 만들려면 다음과 같이 입력 후 탭을 누르면 됩니다.
table>tr7>td8
6.9 [실습] 테이블 컨트롤을 사용하여 표 만들기
6.9.1 소개
테이블 컨트롤을 사용하여 웹 페이지에 테이블을 만들어 보겠습니다.
6.9.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmTable.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmTable.aspx
③ FrmTable.aspx 페이지에 다음과 같이 입력합니다. 테이블 컨트롤 두 개를 웹 폼에 등록하여 테이블을 만듭니다. 첫 번째 테이블은 선언적으로 직접 1행 1열짜리 테이블을 만들고, 두 번째 테이블은 기본 테이블 컨트롤만 등록한 후 코드 비하인드 파일에서 동적으로 테이블을 만들 것입니다.
④ FrmTable.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 페이지 로드 시 TableRow, TableCell, LiteralControl 클래스 등을 사용하여 테이블을 동적으로 생성한 후 이를 웹 폼에 등록된 테이블 컨트롤에 대입하여 테이블을 출력하는 코드입니다.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DevStandardControl
{
public partial class FrmTable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// [!] 동적으로 1행 1열 테이블 만들기
// [1] 행(Row)을 하나 추가
TableRow tr = new TableRow();
// [2] 열(Column)을 하나 추가
TableCell td = new TableCell();
// [3] 내용(Text)을 하나 추가 : 다른 컨트롤에 문자열 추가
LiteralControl lc = new LiteralControl();
lc.Text = "안녕";
// 열에 내용 추가
td.Controls.Add(lc);
// 행에 열 추가
tr.Cells.Add(td);
// 테이블 컨트롤에 행 추가
this.ctlMyTable.BorderWidth = 1;
this.ctlMyTable.Rows.Add(tr);
}
}
}
⑤ FrmTable.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 테이블이 두 개 출력됩니다. 하나는 선언적으로, 하나는 동적으로 만들어서 출력해보았습니다.
그림 6 4 테이블 컨트롤 사용하기
6.9.3 마무리
테이블 컨트롤은 웹 페이지에 동적으로 테이블을 생성할 때 사용됩니다.
6.10 BulletedList 컨트롤
6.10.1 소개
불릿리스트 컨트롤은 HTML의 목록, 즉 글머리 기호에 해당하는 리스트 형식의 텍스트를 표현할 때 사용합니다.
6.10.2 BulletedList 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 BulletedList System.Web.UI.WebControls.BulletedList 클래스
속성 DisplayMode 글머리 기호 목록에서 세 가지 형태의 모양 지정
BulletStyle 글머리 기호에 사용할 스타일 지정
FirstBulletNumber 순서 있는 목록의 시작 번호 값을 지정
6.11 [실습] BulletedList 컨트롤을 사용하여 목록 만들기
6.11.1 소개
BulletedList 컨트롤을 사용하여 순서 있는 목록을 만들어 보겠습니다.
6.11.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmBulletedList.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmBulletedList.aspx
③ FrmBulletedList.aspx 페이지에 다음과 같이 입력합니다. BulletedList 컨트롤은 HTML의 리스트를 출력하는 컨트롤입니다. BulletStyle 속성에 따라서 순서 있는 목록과 순서 없는 목록을 구분해서 출력할 수 있습니다. 그리고 각각의 항목을 클릭했을 때 클릭한 값을 가져올 수 있도록 Click 이벤트를 제공합니다. 다음 소스는 ListItem 컨트롤을 사용하여 세 항목을 세 가지 모양으로 등록합니다.
④ FrmBulletedList.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. BulletedList 컨트롤 클릭 시 Click 이벤트를 설정하여 두 번째 매개변수인 BulletedListEventArgs 개체를 통해서 선택한 항목의 텍스트(Text)와 값(Value)을 구분지어 가져오는 방식입니다. e.Index 속성을 통해 현재 선택된 항목의 인덱스를 가져올 수 있습니다.
using System;
using System.Web.UI.WebControls;
namespace DevStandardControl
{
public partial class FrmBulletedList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void lstFavorite_Click(object sender, BulletedListEventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("선택한 항목 : <br />");
sb.Append(lstFavorite.Items[e.Index].Text);
sb.Append("<br />");
sb.Append(lstFavorite.Items[e.Index].Value + "<br />");
Response.Write(sb.ToString());
}
}
}
⑤ FrmBulletedList.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 링크를 가진 리스트가 출력되는데 각 항목을 클릭하면 클릭한 내용이 문자열로 묶인 다음 출력됩니다.
그림 6 5 BulletedList 컨트롤
6.11.3 마무리
BulletedList 컨트롤은 순서 있는 목록 및 순서 없는 목록 등을 표현하는 데 사용됩니다.
6.12 [실습] HTML 대체 컨트롤을 사용하여 HTML 주요 요소 표현하기
6.12.1 소개
이번 실습에서는 기존의 HTML 코드로 표현할 수 있는 하이퍼링크, 이미지, 이미지맵, 테이블, 목록(리스트)을 ASP.NET 표준 컨트롤로 대체하여 표현해보겠습니다.
6.12.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmHtml.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmHtml.aspx
코드에서 사용하는 btn_home.gif 이미지 파일은 이 책의 소스에서 가져다가 images 폴더를 만들어 넣어두고 실습합니다.
④ 이번에는 단지 HTML 대체 컨트롤의 모양을 살펴보기 위한 실습이므로 따로 이벤트 처리기는 작성하지 않습니다.
⑤ FrmHtml.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 각각의 HTML 요소가 두 번씩 표시됩니다. 웹 브라우저로 보았을 때는 서버 측에서 순수한 HTML로 작업했는지, ASP.NET 표준 컨트롤로 작성했는지 구별할 수 없습니다.
그림 6 6 HTML 대체 컨트롤 사용하기
6.12.3 마무리
HTML 요소로 작업할 수 있는 부분은 HTML 요소로 작업하면 됩니다. 다만, ASP.NET 표준 컨트롤을 사용하면 해당 HTML 요소를 프로그래밍적으로 접근할 수 있다는 장점이 있습니다.
6.13 DropDownList 컨트롤: <select><option> 태그 대체
6.13.1 소개
드롭다운리스트 컨트롤은 HTML의 <select><option> 태그의 조합을 ASP.NET 서버 컨트롤로 구현한 컨트롤입니다.
드롭다운리스트 컨트롤에 전화번호 리스트를 선언적으로 출력하고자 할 때는 다음과 같은 방식으로 작성할 수 있다(이때 선언적으로 출력한다는 것은 태그(소스)로 직접 출력하는 것을 말합니다. C# 코드에서 만들어서 출력하는 프로그래밍적으로 출력하는 것과는 다르다). Value 속성과 Text 속성을 구분지어서 설정할 수 있는 여러 모양을 보여줍니다.
그리고 다음 코드 조각처럼 코드 비하인드 페이지에서 코드 기반으로 데이터를 추가할 수도 있습니다. 각 항목은 ListItem 개체를 사용합니다.
protected void Page_Load(object sender, EventArgs e)
{
// 현재 페이지가 포스트백(재전송)이 아닐 때만 바인딩, 즉 처음 로드 시에만 처리
if (!Page.IsPostBack)
{
ddlPhoneNumber.Items.Add("017");
ddlPhoneNumber.Items.Add(new ListItem("016", "016"));
}
}
추가 학습: DevStandardControl/FrmDropDownList_Year.aspx
6.13.2 드롭다운리스트로 년월 표시
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DevStandardControl
{
public partial class FrmDropDownList_Year : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindYear();
BindDropDownList();
}
}
private void BindYear()
{
for (int i = DateTime.Now.Year; i > DateTime.Now.Year - 5; i--)
{
ddlYear.Items.Add(
new ListItem() { Text = $"{i}년", Value = i.ToString() });
}
}
private void BindDropDownList()
{
for (int i = 1; i <= 12; i++)
{
ListItem li = new ListItem() {
Text = $"{i}월", Value = i.ToString() };
lstMonth.Items.Add(li);
}
}
}
}
<실행>
</실행>
6.14 [실습] 드롭다운리스트 컨트롤을 사용하여 콤보박스 만들기
6.14.1 소개
드롭다운리스트 컨트롤을 사용하여 select와 option 태그로 이루어진 드롭다운리스트를 만들어보겠습니다.
6.14.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmDropDowList.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmDropDowList.aspx
④ FrmDropDowList.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 페이지가 로드될 때 드롭다운리스트의 항목이 한 개 이상이라면 1의 인덱스에 위치한 공무원을 선택한 상태로 보여줍니다. 다음은 드롭다운리스트 컨트롤의 항목을 변경했을 때 SelectedIndexChanged 이벤트가 발생하고 그때 선택된 값을 가져오는 코드입니다.
using System;
namespace DevStandardControl
{
public partial class FrmDropDownList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack && lstJob.Items.Count > 1)
{
this.lstJob.SelectedIndex = 1;
}
}
protected void lstJob_SelectedIndexChanged(object sender, EventArgs e)
{
// 문자열 변수 선언과 동시 초기화
string strMsg = String.Empty;
strMsg =
lstJob.SelectedItem.Text
+ "을(를) 선택하셨습니다.";
// 레이블에 현재 선택된 값 출력
this.lblDisplay.Text = strMsg;
}
}
}
⑤ FrmDropDowList.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 웹 브라우저를 실행한 후 항목을 다른 값으로 변경하면 변경된 값을 읽어서 화면에 출력합니다.
그림 6 7 DropDownList 컨트롤
6.14.3 마무리
드롭다운리스트 컨트롤은 웹 페이지에 콤보박스 또는 드롭다운리스트라 불리는 선택 가능한 리스트를 출력하는 데 사용됩니다.
<참고> 동적으로 DropDownList 생성 및 선택된 값 가져오기
ASP.NET의 모든 서버 컨트롤은 동적으로 생성하고 이벤트 등을 줄 수 있습니다. 이 책의 수준을 넘어가기에 참고용으로 다음 코드 샘플을 제시합니다. 동적으로 드롭다운리스트를 생성하고 선택한 값을 가져오는 예다.
PlaceHolder 컨트롤을 하나 두고, 코드 비하인드 파일에서 동적으로 Controls.Add() 메서드를 사용하여 추가하고, 추가된 컨트롤을 가져올 때는 FindControl() 메서드를 사용해서 가져올 수 있습니다.
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i <= 2; i++)
{
DropDownList ddl = new DropDownList();
ddl.ID = String.Format("ddl{0}", i); // ddl1, ddl2
ddl.Items.Add(new ListItem("Text1", "Value1"));
ddl.Items.Add(new ListItem("Text2", "Value2"));
ddl.Items.Add(new ListItem("Text3", "Value3"));
PlaceHolder1.Controls.Add(ddl); // 동적으로 생성된 드롭다운리스트 추가
}
}
protected void btnGet_Click(object sender, EventArgs e)
{
Label1.Text = "선택된 값: ";
for (int i = 1; i <= 2; i++)
{
DropDownList ddl = PlaceHolder1.FindControl(String.Format("ddl{0}", i)) as DropDownList;
if (ddl != null)
{
Label1.Text += ddl.SelectedValue + ", ";
}
}
}
</참고>
6.15 ListBox 컨트롤
6.15.1 소개
리스트박스 컨트롤은 드롭다운 리스트와 기능이 같지만, 드롭다운 리스트를 펼쳐 놓은 모양으로 출력됩니다. 또한, [Ctrl] 키와 마우스 왼쪽 버튼의 조합으로 여러 항목을 선택할 수 있습니다.
6.16 [실습] ListBox 컨트롤을 사용하여 리스트박스 만들기
6.16.1 소개
리스트박스 컨트롤을 사용하여 select와 option 태그로 이루어진 리스트박스를 만들어 보겠습니다.
6.16.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmListBox.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmListBox.aspx
④ FrmListBox.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 다음 코드는 처음 로드할 때 세 항목을 리스트박스에 포함하고, 리스트 박스에서 항목을 선택하면 선택된 내용을 문자열로 묶어서 출력하도록 구현한 것입니다.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DevStandardControl
{
public partial class FrmListBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 처음 로드할 때만 항목 추가
if (!Page.IsPostBack)
{
// 동적으로 항목 추가
this.lstHobby.Items.Add("축구");
this.lstHobby.Items.Add("농구");
// ListItem 클래스
ListItem li = new ListItem();
li.Text = "배구";
li.Value = "Volleyball";
lstHobby.Items.Add(li);
}
}
protected void btnPrint_Click(object sender, EventArgs e)
{
string strMsg = String.Empty;
// 리스트박스 항목의 수만큼 반복
for (int i = 0; i < lstHobby.Items.Count; i++)
{
// 선택된 항목이면
if (lstHobby.Items[i].Selected)
{
// 출력 문자열에 묶음
strMsg += lstHobby.Items[i].Text;
if (i != lstHobby.Items.Count - 1)
{
strMsg += ", ";
}
}
}
lblDisplay.Text = strMsg;
}
}
}
⑤ FrmListBox.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 마우스로 항목 하나만 선택하거나, 마우스와 키보드의 [Shift] 또는 [Ctrl] 키를 함께 사용하여 여러 항목을 선택할 수 있습니다.
그림 6 8 ListBox 컨트롤
6.16.3 마무리
리스트박스 컨트롤은 드롭다운리스트와 비슷하나 펼쳐 놓은 상태에서 항목을 하나 이상 선택할 수 있습니다.
6.17 CheckBox 컨트롤
6.17.1 소개
CheckBox 컨트롤은 HTML의 와 같은 체크박스를 만듭니다.
6.17.2 CheckBox 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 CheckBox System.Web.UI.WebControls.CheckBox 클래스
속성 Checked 체크박스가 선택되면 true, 그렇지 않으면 false 값 반환
AutoPostBack 체크박스가 선택되거나 해제되는 순간에 자동으로 서버 측으로 포스트백(다시 게시)할 것인지 결정. true로 설정하면 매번 포스트백시킵니다.
Text 체크박스에 쓰여질 문구
TextAlign Text 속성의 위치(Right | Left)
이벤트 CheckedChanged 체크박스의 값이 변경될 때 발생
6.18 [실습] CheckBox 컨트롤을 사용하여 체크박스 만들기
6.18.1 소개
체크박스 컨트롤을 사용하여 하나의 항목을 선택할 수 있는 체크박스를 만들어보겠습니다.
6.18.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCheckBox.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmCheckBox.aspx
③ FrmCheckBox.aspx 페이지에 다음과 같이 입력합니다. 체크박스 두 개를 만드는 코드입니다.
⑤ FrmCheckBox.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 각 체크박스 컨트롤을 체크한 후 <확인> 버튼을 클릭하면 선택된 값이 출력됩니다.
그림 6 9 CheckBox 컨트롤
6.18.3 마무리
체크박스 컨트롤은 하나의 항목을 선택할 수 있는 HTML의 체크박스를 생성합니다.
6.19 CheckBoxList 컨트롤
6.19.1 소개
체크박스리스트 컨트롤은 같은 주제에 대해서 여러 항목을 선택하고자 할 때 사용합니다.
6.20 [실습] CheckBoxList 컨트롤을 사용하여 여러 개의 체크박스 만들기
6.20.1 소개
체크박스리스트 컨트롤을 사용하여 취미 정보를 선택하는 예제를 만들어보겠습니다. 따로 따로 체크박스를 만드는 체크박스 컨트롤과 달리 체크박스리스트 컨트롤은 컨트롤 하나에 ListItem을 여러 개 두어서 하나의 이름으로 관리하는 구조입니다.
6.20.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCheckBoxList.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmCheckBoxList.aspx
③ FrmCheckBoxList.aspx 페이지에 다음과 같이 입력합니다. 3개의 체크박스를 만들고 하나의 이름인 lstHobby로 관리할 수 있습니다.
④ FrmCheckBoxList.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 다음에 구현한 코드는 <확인> 버튼을 클릭했을 때 Selected 속성을 사용해 체크박스리스트 컨트롤에 체크된 항목을 가져와 문자열로 묶어서 출력하는 코드입니다.
using System;
namespace DevStandardControl
{
public partial class FrmCheckBoxList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Empty;
}
protected void btnOK_Click(object sender, EventArgs e)
{
string strMsg = "당신의 취미는 <br />";
for (int i = 0; i < lstHobby.Items.Count; i++)
{
if (lstHobby.Items[i].Selected)
{
strMsg += lstHobby.Items[i].Text + "<br />";
}
}
lblDisplay.Text = strMsg;
}
}
}
⑤ FrmCheckBoxList.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 체크박스리스트 컨트롤에서 원하는 항목을 선택 또는 선택 해제한 후 <확인> 버튼을 클릭하여 선택된 항목을 출력해보겠습니다.
그림 6 10 CheckBoxListList 컨트롤
6.20.3 마무리
체크박스리스트 컨트롤은 체크박스를 여러 개 만드는 것과 같으나 보여줄 모양에 대한 레이아웃을 설정해줄 수 있고, 하나의 이름으로 묶어서 관리할 수 있다는 장점이 있습니다.
6.21 RadioButton 컨트롤
6.21.1 소개
라디오버튼 컨트롤은 HTML의 와 같은 라디오버튼을 만듭니다.
6.21.2 RadioButton 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 RadioButton System.Web.UI.WebControls.RadioButton 클래스
속성 Checked 라디오버튼이 선택되면 true, 그렇지 않으면 false 값 반환
GroupName 라디오버튼 여러 개를 이름 하나로 그룹화하고자 할 때 사용하는 공통 이름 지정
Text 체크박스에 쓰여질 문구
TextAlign Text 속성의 위치(Right | Left)
이벤트 CheckedChanged 라디오버튼의 값이 변경될 때 발생
6.22 [실습] RadioButton 컨트롤을 사용하여 라디오버튼 만들기
6.22.1 소개
라디오버튼을 두 개 두고, 남자 또는 여자를 선택할 수 있는 기능을 구현합니다.
6.22.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmRadioButton.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmRadioButton.aspx
③ FrmRadioButton.aspx 페이지에 다음과 같이 입력합니다. 한 웹 페이지에서 라디오버튼을 그룹으로 묵어서 관리하려면 GroupName 속성 값을 같은 값으로 주어야 합니다.
④ FrmRadioButton.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 페이지 로드 시 프로그래밍적으로 텍스트를 설정하는 방법을 표현한 코드입니다. <확인> 버튼을 클릭하면 선택된 라디오 버튼의 텍스트에 해당하는 문자열을 묶어서 출력합니다. 라디오 버튼에 직접 Text 속성을 사용하여 텍스트를 미리 지정할 수도 있습니다.
⑤ FrmRadioButton.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. “남자”와 “여자”라는 두 라디오 버튼 중 하나를 선택한 후 <확인> 버튼을 누르면 해당 문자열이 출력됩니다.
그림 6 11 Radio 버튼
6.22.3 마무리
라디오버튼은 특성상 웹 페이지에서 그룹 단위로 단 하나의 항목만을 선택할 때 사용하는 컨트롤입니다.
6.23 RadioButtonList 컨트롤
6.23.1 소개
라디오버튼리스트 컨트롤은 라디오버튼 컨트롤의 확장된 모양으로 여러 항목 중에서 단일 데이터를 선택할 때 주로 사용합니다.
6.24 [실습] RadioButtonList 컨트롤을 사용하여 여러 개의 라디오버튼 만들기
6.24.1 소개
라디오버튼리스트를 사용하여 라디오버튼을 여러 개 만들고, 이를 한 이름으로 관리하는 예제를 만들어보겠습니다.
6.24.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmRadioButtonList.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmRadioButtonList.aspx
③ FrmRadioButtonList.aspx 페이지에 다음과 같이 입력합니다. 라디오버튼리스트 컨트롤도 체크박스리스트 컨트롤과 마찬가지로 ListItem 컨트롤을 사용하여 항목을 하나 이상 추가할 수 있습니다. 라디오버튼리스트 컨트롤의 RepeatDirection 속성 값을 Horizontal로 설정하면 가로로 나열되고, Vertical로 설정하면 세로로 나열됩니다.
④ FrmRadioButtonList.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. <확인> 버튼을 클릭하면 현재 선택된 값에 따라서 서로 다른 문자열을 출력하는 코드입니다. SelectedItem.Text 또는 SelectedValue 등의 속성을 사용하여 선택된 항목의 텍스트와 값을 읽어올 수 있습니다.
⑤ FrmRadioButtonList.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 라디오버튼을 선택한 후 <확인> 버튼을 클릭하면 선택된 값이 출력됩니다.
그림 6 12 Radio 버튼 리스트
6.24.3 마무리
RadioButtonList 컨트롤은 라디오버튼을 여러 개 생성하고 하나의 이름으로 관리할 수 있습니다. 라디오 버튼과 마찬가지로 웹 페이지에서 그룹 단위로 단 하나의 항목만을 선택할 때 사용합니다.
6.25 [실습] 입력 컨트롤을 사용하여 단일 또는 다중 항목 가져오기
6.25.1 소개
사용자에게 데이터를 입력 받는 여섯 가지 컨트롤을 사용하여 단일 또는 다중 데이터를 받아 오는 기능을 살펴보겠습니다.
6.25.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmInputControl.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmInputControl.aspx
코드에서 사용한 컨트롤의 속성과 속성값은 다음과 같이 설정했습니다.
컨트롤 속성 값
CheckBox ID chkAgree
Checked True
Text 동의합니다.
CheckBoxList ID lstHobby
RepeatColumns 2
RepeatDirection Horizontal
RepeatLayout Flow
Items (컬렉션 편집기 사용) : 축구, 배구, 농구
RadioButton ID rdoMan, rdoWomen
Text 남자, 여자
GroupName Gender
RadiobuttonList ID lstWedding
RepeatDirection Horizontal
RepeatLayout Flow
Items (컬렉션 편집기 사용) : 미혼, 기혼
DropDownList ID lstJob
Items (컬렉션 편집기 사용) : 회사원, 공무원, 백수
ListBox ID lstFavorite
SelectionMode Multiple
Button ID btnOK
Text 확인
④ FrmInputControl.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DevStandardControl
{
public partial class FrmInputControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Page.IsPostBack : 처음 로드하면 false, 포스트백(다시 게시)되면 true
if (!Page.IsPostBack) // 처음 로드할 때만...
{
BindFavorite();
}
}
private void BindFavorite()
{
// 동적으로 ListItem을 채우는 세 가지 방법
// 관심사 채우기(공통)
lstFavorite.Items.Add("C#");
this.lstFavorite.Items.Add("ASP.NET");
ListItem li = new ListItem();
li.Text = "JavaScript";
li.Value = "TypeScript";
this.lstFavorite.Items.Add(li);
ListItem listItem = new ListItem("닷넷", ".NET");
this.lstFavorite.Items.Add(listItem);
}
protected void btnOK_Click(object sender, EventArgs e)
{
// [0] 문자열 변수 선언 : StringBuilder 클래스 사용
StringBuilder sb = new StringBuilder();
// [1] 체크박스의 내용 가져오기 : 단일값
if (this.chkAgree.Checked)
{
sb.Append("[1] " + this.chkAgree.Text + "<br />");
}
// [2] 체크박스리스트의 내용 가져오기 : 다중값
if (this.lstHobby.Items[0].Selected) // 0번째 항목이 선택되었다면...
{
sb.Append("[2] " + this.lstHobby.Items[0].Value + "<br />");
}
if (this.lstHobby.Items[1].Selected)
{
sb.AppendFormat("[2] {0}<br/>", this.lstHobby.Items[1].Value);
}
if (this.lstHobby.Items[2].Selected)
{
sb.AppendFormat("[2] {0}<br/>", this.lstHobby.Items[2].Value);
}
// [3] 라디오버튼 값 받아오기 : 단일값
if (this.rdoMan.Checked)
{
sb.AppendFormat("[3] {0} 선택<br />", rdoMan.Text);
}
else
{
sb.AppendFormat("[3] {0} 선택<br />", rdoWomen.Text);
}
// [4] 라디오버튼리스트 값 받아오기 : 단일값
sb.AppendFormat("[4] {0}<br />", lstWedding.SelectedItem.Text);
// [5] 드롭다운리스트 값 받아오기 : 단일값
sb.AppendFormat("[5] {0}<br />",
lstJob.Items[lstJob.SelectedIndex].Value);
// [6] 리스트박스 : 다중값
for (int i = 0; i < lstFavorite.Items.Count; i++)
{
if (lstFavorite.Items[i].Selected)
{
sb.AppendFormat("[6] {0}<br />", lstFavorite.Items[i].Value);
}
}
// --OR--
foreach (ListItem li in lstFavorite.Items)
{
if (li.Selected)
{
sb.AppendFormat("[6] {0}<br />", li.Text);
}
}
// [!] 출력
this.lblDisplay.Text = sb.ToString();
}
}
}
⑤ FrmInputControl.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.
그림 6 13 FrmInputControl.aspx 페이지 실행 결과
⑥ 각각의 항목을 선택 후 확인 버튼을 클릭하면 선택한 결괏값이 레이블에 출력됩니다. 리스트박스의 여러 개의 항목을 선택할 때에는 Ctrl 버튼을 클릭한 후 마우스로 여러 개의 항목을 선택할 수 있습니다.
그림 6 14 확인 버튼 클릭 후 값 받아오기 확인
6.25.3 마무리
데이터 입력 컨트롤은 앞에서 살펴본 텍스트박스이나 버튼 컨트롤 다음으로 많이 쓰인다. 데이터 입력 컨트롤에 대해서는 MSDN 온라인 사이트에서 DropDownList 같은 각 컨트롤의 클래스 이름을 검색하여 내용을 읽어보는 것을 추천합니다.
MSDN 온라인 사이트 URL : http://www.microsoft.com/korea/msdn/
6.26 HiddenField 컨트롤
6.26.1 소개
히든필드 컨트롤을 사용하는 가장 큰 목적은 눈에 보이지 않게 어떤 값을 웹 폼에 보관하는 것입니다. 게시물의 글 번호나 페이지 번호 등 굳이 웹 폼에 보일 필요가 없는 내용에는 히든 필드를 사용합니다.
6.26.2 HiddenField 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 HiddenField System.Web.UI.WebControls.HiddenField 클래스
속성 Value 히든 필드에 임시로 저장한 값
Visible 히든 필드 컨트롤을 으로 표현할지 결정
이벤트 ValueChanged 히든 필드의 값이 변경될 때 발생
6.27 [실습] HiddenField 컨트롤을 사용하여 폼 로드 시간 저장하기
6.27.1 소개
현재 웹 폼이 처음 로드된 시간을 히든 필드에 저장한 후 페이지에 출력하는 기능을 알아보겠습니다.
6.27.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmHiddenField.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmHiddenField.aspx
코드에서 사용한 컨트롤의 속성과 속성값은 다음과 같습니다.
컨트롤 속성 값
HiddenField ID ctlHidden
Button ID btnOK
Text 히든필드에 저장된 값 출력
④ FrmHiddenField.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
<코드>
using System;
using System.Web.UI;
namespace DevStandardControl
{
public partial class FrmHiddenField : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// 히든필드는 눈에 보이지 않게 어떤 값을 임시로 저장할 때 사용
this.ctlHidden.Value =
DateTime.Now.ToShortTimeString();
}
}
protected void btnOK_Click(object sender, EventArgs e)
{
// 히든필드에 저장된 문자열 출력
Response.Write(ctlHidden.Value);
}
}
}
⑤ FrmHiddenField.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 히든 필드 컨트롤은 화면에 나타나지 않고 버튼 컨트롤만 보인다.
그림 6 15 FrmHiddenField.aspx 페이지 실행 결과
⑥ 히든 필드 컨트롤은 <디자인 보기>에서는 보이지만, 웹 브라우저 보기에서는 보이지 않습니다. 하지만 히든 필드에는 눈에 보이지 않게 어떤 값을 저장할 수 있습니다. 다음 그림은 버튼 클릭 시 페이지 처음 로드시 히든필드에 저장되었던 시간 값이 출력되는 모습입니다.
그림 6 16 버튼 클릭 시 히든 필드에 저장된 값 출력
6.27.3 마무리
웹 사이트 제작 시 내부적으로만 사용하는 데이터를 눈에 보이지 않게 담아 놓는 공간을 만드는 히든 필드 컨트롤을 사용해봤다.
6.28 Literal 컨트롤
6.28.1 소개
리터럴 컨트롤은 정적 텍스트(Static Text)를 페이지에 출력하는 컨트롤입니다. <span> 태그를 생성하는 Label 컨트롤과 달리 일반 텍스트만 출력하므로 좀 더 깔끔한 HTML 소스를 표현할 수 있는 것이 장점입니다.
ASP.NET의 소스 부분
<asp:Literal>
웹 브라우저 출력 부분
(일반텍스트)
6.28.2 Literal 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 Literal System.Web.UI.WebControls.Literal 클래스
속성 Text 리터럴 컨트롤 자리에서 표시될 문자열
Mode 텍스트의 내용을 어떻게 표현할지 결정
Encode를 사용하면 <br /> 태그를 <br />로 변환해서 출력
6.29 [실습] Literal 컨트롤을 사용하여 간단한 텍스트 출력
6.29.1 소개
리터럴 컨트롤을 사용하여 웹 브라우저에 텍스트를 표현하는 방법 중에서 태그를 사용하지 않고 깔끔하게 텍스트를 출력하는 방법을 살펴보겠습니다.
6.29.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmLiteral.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmLiteral.aspx
③ FrmLiteral.aspx 페이지에 다음과 같이 입력합니다.
```csharp FrmLiteral.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmLiteral.aspx.cs" Inherits="DevStandardControl.FrmLiteral" %>
<!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:Literal ID="ctlDate" runat="server"></asp:Literal><br />
현재 시간 :
<asp:Label ID="lblTime" runat="server"></asp:Label><br />
</div>
</form>
</body>
</html>
코드에서 사용된 컨트롤의 속성과 속성값은 다음과 같습니다.
컨트롤 속성 값
Literal ID ctlDate
Label ID lblTime
④ FrmLiteral.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
namespace DevStandardControl
{
public partial class FrmLiteral : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 리터럴에 날짜 출력
ctlDate.Text = DateTime.Now.ToShortDateString();
// 레이블에 시간 출력
lblTime.Text = DateTime.Now.ToShortTimeString();
}
}
}
⑤ FrmLiteral.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.
그림 6 17 FrmLiteral.aspx 페이지 실행 결과
⑥ 실행된 웹 브라우저에 마우스 오른쪽 버튼을 클릭하면 나타나는 메뉴에서 <소스 보기>를 클릭하여 실행된 소스를 살펴보겠습니다. 리터럴 컨트롤은 레이블과 달리 그 어떠한 태그도 사용하지 않고 값 자체만 출력합니다.
그림 6 18 페이지 소스 보기
다음과 같이 리터럴 컨트롤은 태그를 사용하지 않았고, 레이블 컨트롤은 태그를 사용했음을 알 수 있습니다.
<코드>
현재 날짜 :
2016-07-21
현재 시간 :
오전 11:13
```
6.29.3 마무리
리터럴 컨트롤은 이 밖에도 태그 사용을 제한하고자 할 때 등 더 많은 곳에서 사용됩니다. 리터럴 컨트롤은 따로 태그를 만들지 않고 입력한 데이터만 출력하는 컨트롤로 유용합니다.
VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다.
www.VisualAcademy.com