반응형
'ASP.NET & Core를 다루는 기술'이라는 책을 통해서 ASP.NET 공부를 하기 시작했다. 아직 많이 읽어보질 못해 평가하기는 좀 그렇지만 예제랑 설명이 적절하게 섞여서 나온 책인 것 같다. 위의 책을 바탕으로 공부한 내용을 글로 쓰려한다.
HTML 대체 컨트롤
ASP.NET에서 제공하는 표준 컨트롤 중에는 하이퍼링크, 이미지, 이미지맵, 테이블 등 기존에 HTML 태그로 정적으로 표현하던 내용을 서버 컨트롤을 사용해 동적으로 HTML 태그를 만들어 내는 컨트롤 등을 제공한다.
HyperLink 컨트롤
HyperLink 컨트롤은 HTML의 <a>와 같이 일반적인 링크를 만드는 데 사용한다.
실습 ( HyperLink 컨트롤을 사용해 링크 만들기 )
'FrmHyperLink.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:HyperLink ID="lnkDotNetKorea" runat="server" NavigateUrl="http://www.dotnetkorea.com/">닷넷코리아(<u>D</u>)</asp:HyperLink>
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
lnkDotNetKorea.AccessKey = "D";
}
... 생략 ...
- 페이지가 로드될 때 컨트롤에 동적으로 AccessKey 속성을 주었다.
- AccessKey는 단축키 역할을 하고 보통 Alt + 'AccessKey에 저장한 단어' 로 접근이 가능하다. 위와 같은 경우에는 대문자 D이기 때문에 Alt+Shift+'D'를 누르게 되면 해당 링크로 이동하게 된다.
Image 컨트롤
이미지 컨트롤은 웹 폼에 간단한 이미지를 동적으로 보여주고자 할 때 사용한다.
실습 ( Image 컨트롤을 사용해 이미지 표시하기 )
'FrmImage.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:Image ID="imgChange" runat="server" ImageUrl="~/Day0122/pic1.png"
AlternateText="대체텍스트" Width="100px" Height="100px" />
<hr />
<asp:Button Text="이미지 순환" runat="server" ID="btnChange"
OnClick="btnChange_Click" />
</div>
... 생략 ...... 생략 ...
protected void btnChange_Click(object sender, EventArgs e)
{
if (DateTime.Now.Second % 2 == 0)
imgChange.ImageUrl = "~/Day0122/pic1.png";
else
imgChange.ImageUrl = "~/Day0122/pic2.png";
}
... 생략 ...
버튼을 클릭할 때 현재 시간의 초 값을 가져와서 짝수면 첫 번째 이미지를 출력하고, 홀수면 두 번째 이미지를 출력하는 예제 코드다.
ImageMap 컨트롤
ImageMap 컨트롤은 HTML의 이미지맵 기능을 좀 더 사용하기 편하게 만들어 놓은 ASP.NET 서버 컨트롤이다.
실습 ( ImageMap 컨트롤을 사용해 이미지맵 구현하기 )
'FrmImageMap.aspx' 웹 폼을 만들고 aspx 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<img src="pic1.png" alt="이미지맵 테스트용 이미지" />
<hr />
<asp:ImageMap ID="mapImage" runat="server" ImageUrl="~/Day0122/pic1.png">
<asp:RectangleHotSpot NavigateUrl="~/Day0122/FrmLinkButton.aspx" Top="0" Left="0" Bottom="128" Right="256" />
<asp:RectangleHotSpot NavigateUrl="~/Day0122/FrmImage.aspx" Top="128" Left="0" Bottom="256" Right="256" />
</asp:ImageMap>
</div>
... 생략 ...
- 이미지를 외부 주소에서 가져오는거기 때문에 이미지를 못불러오는 경우가 발생한다. 그때 엑박이 뜨는데 엑박과 함께 이미지를 설명하는 문구를 alt 속성을 이용해서 나타낼 수 있다.
- 이미지맵 컨트롤을 사용하면 특정 이미지를 읽어 와 이미지에 좌표를 사용해 영역을 구분한 뒤 서로 다른 URL로 이동할 수 있다.
- 위의 이미지같은 경우는 '256X256' 크기의 이미지인데 반씩 나눠서 각각의 구역을 클릭하게 되면 서로 다른 URL로 이동할 수 있게 만들어놓았다.
Table 컨트롤
Table 컨트롤은 동적으로 HTML의 테이블을 생성하고자 할 때 사용하는 서버 컨트롤이다. HTML에서 테이블을 만들 때 사용하는 <table>, <tr>, <td> 태그에 대한 서버 측 표현 방식은 다음과 같다.
- Table 컨트롤 : <table> 태그
- TableRow 컬렉션 : <tr> 태그
- TableCell 컬렉션 : <td> 태그
실습 ( Table 컨트롤을 사용해 표 만들기 )
'FrmTable.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:Table ID="Table1" runat="server" BorderWidth="1px">
<asp:TableRow>
<asp:TableCell>
1행 1열 테이블
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<hr />
<asp:Table ID="ctlMyTable" runat="server"></asp:Table>
</div>
... 생략 ...... 생략 ...
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);
// 테이블 컨트롤에 행 추가
ctlMyTable.BorderWidth = 1;
ctlMyTable.Rows.Add(tr);
}
... 생략 ...
- aspx 코드에서 정적으로 '1행 1열 테이블' 이라는 데이터 값이 들어있는 테이블을 만들었고 cs 코드에서 동적으로 1행 1열 테이블을 만들고 값을 '안녕'이라는 값을 집어넣어주었다.
BulletedList 컨트롤
BulletedList 컨트롤은 HTML의 목록, 즉 글머리 기호에 해당하는 리스트 형식의 텍스트를 표현할 때 사용한다.
실습 ( BulletedList 컨트롤을 사용해 목록 만들기 )
'FrmBulletedList.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:BulletedList ID="lstFavorite" runat="server" BulletStyle="Numbered" DisplayMode="LinkButton" OnClick="lstFavorite_Click">
<asp:ListItem>Windows Server</asp:ListItem>
<asp:ListItem Text="SQL Server" Value="시퀄서버"></asp:ListItem>
<asp:ListItem Value="비주얼스튜디오">Visual Studio</asp:ListItem>
</asp:BulletedList>
</div>
... 생략 ...... 생략 ...
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());
}
... 생략 ...
- BulletedList 컨트롤은 BulletStyle 속성에 따라서 순서 있는 목록과 순서 없는 목록을 구분해서 출력할 수 있다. 그리고 DisplayMode를 통해 링크로 이동할 수 있게 'LinkButton'으로 설정해놓았다.
- e.Index 속성을 통해 현재 선택된 항목의 인덱스를 가져올 수 있다.
DropDownList 컨트롤
드롭다운리스트 컨트롤은 HTML의 <select><option> 태그의 조합을 ASP.NET 서버 컨트롤로 구현한 컨트롤이다.
실습 ( DropDownList 컨트롤을 사용해 콤보박스 만들기 )
'FrmDropDownList.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:DropDownList ID="lstJob" runat="server" AutoPostBack="true" OnSelectedIndexChanged="lstJob_SelectedIndexChanged">
<asp:ListItem>회사원</asp:ListItem>
<asp:ListItem>공무원</asp:ListItem>
<asp:ListItem Selected="True">개발자</asp:ListItem>
</asp:DropDownList>
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack && lstJob.Items.Count > 1)
lstJob.SelectedIndex = 1;
}
protected void lstJob_SelectedIndexChanged(object sender, EventArgs e)
{
// 문자열 변수 선언과 동시 초기화
string strMsg = String.Empty;
strMsg = lstJob.SelectedItem.Text + "을(를) 선택하셨습니다.";
// 레이블에 현재 선택된 값 출력
lblDisplay.Text = strMsg;
}
... 생략 ...
- 웹 페이지가 로드될 때 DropDownList의 항목이 한 개 이상이라면 1의 인덱스에 위치한 '공무원'을 선택한 상태로 보여준다.
- 'lstJob_SelectedIndexChanged' 함수같은 경우에는 DropDownList 컨트롤의 항목이 변경되었을 때마다 호출되는 함수다.
ListBox 컨트롤
ListBox 컨트롤은 DropDownList 컨트롤의 기능과 같지만, DropDownList를 펼쳐 놓은 모양으로 출력된다. 또한, Ctrl과 마우스 왼쪽 버튼의 조합으로 여러 항목을 선택할 수 있다.
실습 ( ListBox 컨트롤을 사용해 리스트박스 만들기 )
'FrmListBox.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:ListBox ID="lstHobby" runat="server" SelectionMode="Multiple"></asp:ListBox>
<hr />
<asp:Button ID="btnPrint" runat="server" Text="선택한 값 출력" OnClick="btnPrint_Click" />
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
// 처음 로드할 때만 항목 추가
if (!Page.IsPostBack)
{
// 동적으로 항목 추가
lstHobby.Items.Add("축구");
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;
}
... 생략 ...
- 처음 웹 페이지가 로드될 때 ListBox에 값을 채워넣고 ListBox 항목을 선택하면 선택된 내용을 문자열로 묶어서 출력하도록 구현했다.
CheckBox 컨트롤
CheckBox 컨트롤은 HTML의 <input type="CheckBox">와 같은 체크박스를 만든다.
실습 ( CheckBox 컨트롤을 사용해 체크박스 만들기 )
'FrmCheckBox.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:CheckBox ID="chkCSharp" runat="server" Text="C#" />
<br />
<asp:CheckBox ID="chkAspNet" runat="server" Text="ASP.NET" />
<br />
<asp:CheckBox ID="chkHTML" runat="server" Text="HTML" />
<hr />
<asp:Button ID="btnCheck" runat="server" Text="확인" OnClick="btnCheck_Click" />
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
... 생략 ...... 생략 ...
protected void btnCheck_Click(object sender, EventArgs e)
{
string strMsg = "선택한 값 : <br />";
if (chkCSharp.Checked)
strMsg += chkCSharp.Text + "<br />";
if (chkAspNet.Checked)
strMsg += chkAspNet.Text + "<br />";
if (chkHTML.Checked)
strMsg += chkHTML.Text + "<br />";
lblDisplay.Text = strMsg;
}
... 생략 ...
- '확인' 버튼을 누르게 되면 CheckBox에 체크된 값을 문자열에 저장해서 출력하는걸 만들어보았다.
CheckBoxList 컨트롤
CheckBoxList 컨트롤은 같은 주제에 대해서 여러 항목을 선택하고자 할 때 사용한다.
실습 ( CheckBoxList 컨트롤을 사용해 여러 개의 체크박스 만들기 )
'FrmCheckBoxList.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:CheckBoxList ID="lstHobby" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow" RepeatColumns="2">
<asp:ListItem Selected="True">축구</asp:ListItem>
<asp:ListItem>농구</asp:ListItem>
<asp:ListItem>배구</asp:ListItem>
</asp:CheckBoxList>
<hr />
<asp:LinkButton ID="btnOK" runat="server" OnClick="btnOK_Click">확인</asp:LinkButton>
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
... 생략 ...... 생략 ...
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;
}
... 생략 ...
- CheckBoxList 컨트롤은 체크박스를 여러 개 만드는 것과 같으나 보여줄 모양에 대한 레이아웃을 설정해줄 수 있고, 하나의 이름으로 묶어서 관리할 수 있다는 장점이 있다.
- CheckBoxList 컨트롤 안에 있는 체크박스들을 배열로 불러올 수 있기 때문에 편리하다.
RadioButton 컨트롤
RadioButton 컨트롤은 HTML의 <input type="radio">와 같은 라디오버튼을 만든다.
실습 ( RadioButton 컨트롤을 사용해 라디오버튼 만들기 )
'FrmRadioButton.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:RadioButton ID="rdoMan" runat="server" GroupName="Gender" />
<asp:RadioButton ID="optWomen" runat="server" GroupName="Gender" />
<asp:Button ID="btnOK" runat="server" Text="확인" OnClick="btnOK_Click" />
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
rdoMan.Text = "남자";
optWomen.Text = "여자";
}
protected void btnOK_Click(object sender, EventArgs e)
{
string strMsg = "당신은 ";
if (rdoMan.Checked)
strMsg += "남자입니다. <br />";
else
strMsg += "여자입니다. <br />";
lblDisplay.Text = strMsg;
}
... 생략 ...
- 같은 그룹으로 묶여있는 RadioButton은 하나만 선택이 가능하다.
HiddenField 컨트롤
HiddenField 컨트롤을 사용하는 가장 큰 목적은 눈에 보이지 않게 어떤 값을 웹 폼에 보관하는 것이다. 게시글의 글 번호나 페이지 번호 등 굳이 웹 폼에 보일 필요가 없는 내용에는 히든필드를 사용한다.
실습 ( HiddenField 컨트롤을 사용해 폼 로드 시간 저장하기 )
'FrmHiddenField.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:HiddenField ID="ctlHidden" runat="server" />
<asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="히든필드에 저장된 값 출력" />
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
// 히든필드는 눈에 보이지 않게 어떤 값을 임시로 저장할 때 사용
ctlHidden.Value = DateTime.Now.ToShortTimeString();
}
protected void btnOK_Click(object sender, EventArgs e)
{
// 히든필드에 저장된 문자열 출력
Response.Write(ctlHidden.Value);
}
... 생략 ...
- Hidden 컨트롤은 '디자인 보기'에서는 보이지만, 웹 브라우저 보기에서는 보이지 않는다. 위의 실습 예제는 버튼을 클릭해 페이지를 처음 로드 시 Hidden Field에 저장되었던 시간 값이 출력되는 예제다.
반응형
