7 ASP.NET 리치(Rich) 표준 컨트롤
컨트롤 중에는 단순한 기능 이외에 달력과 광고 기능처럼 복합적인 모양을 제공하는 컨트롤이 있습니다. 이러한 컨트롤을 리치 컨트롤이라고 하는데 표준 컨트롤 중에서 리치 컨트롤을 모아서 그 기능들을 살펴보겠습니다.
7.1 리치 컨트롤이란? ASP.NET 표준 컨트롤 중에는 단순한 HTML 태그를 출력하는 대신 달력, 광고 등 복합적인 모양을 제공하는 컨트롤이 있는데 이러한 컨트롤을 리치 컨트롤이라고 합니다. 이번 강의에서는 표준 컨트롤에서 제공하는 리치 컨트롤을 다뤄보겠습니다.
7.2 Calendar 컨트롤 7.2.1 소개 캘린더 컨트롤은 웹 폼에 손쉽게 달력 기능을 추가하고 해당 달력에 대해서 다음과 같은 기능을 구현할 수 있습니다.
일정 관리를 만들고 해당 일에 일정을 출력하고 배경색을 달리 표현 일 단위 선택 또는 주 단위 선택의 기능 구현 달력의 모양을 사용자가 여러 가지로 설정 가능
7.2.2 Calendar 컨트롤의 주요 구성 요소 멤버 이름 설명 클래스 Calendar System.Web.UI.WebControls.Calendar 클래스 속성 DayNameFormat 요일 이름을 어떻게 보여줄지 선택(예: 월, 월요일) FirstDayOfWeek 한 주의 시작 요일을 선택(Default)
7.3 [실습] Calendar 컨트롤을 사용하여 달력 출력하기 7.3.1 소개 웹 페이지에 달력을 표현하는 것은 캘린더 컨트롤 덕분에 전혀 어렵지 않습니다. 캘린더 컨트롤을 사용하여 깔끔한 달력을 표현해보겠습니다.
7.3.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmCalendar.aspx와 FrmCalendarQueryString.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmCalendar.aspx 웹 폼 FrmCalendarQueryString
③ FrmCalendar.aspx 페이지에 다음과 같이 입력합니다. 참고로 두 번째 캘린더는 책과 똑같이 할 필요 없습니다. 해당 캘린더 소스에 마우스 커서를 두고 [Ctrl] + [.] 키를 눌러서(컨트롤 + 점) 스마트 태스크 창을 실행합니다. <자동 서식> 창에서 기본 설정된 디자인 중 원하는 것을 선택할 수 있습니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmCalendar.aspx.cs" Inherits="DevStandardControl.FrmCalendar" %>
<!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:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
<hr />
<asp:Calendar ID="Calendar2" runat="server" BackColor="#FFFFCC"
BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"
Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"
ShowGridLines="True" Width="220px">
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px">
</DayHeaderStyle>
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC"></NextPrevStyle>
<OtherMonthDayStyle ForeColor="#CC9966"></OtherMonthDayStyle>
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True"></SelectedDayStyle>
<SelectorStyle BackColor="#FFCC66"></SelectorStyle>
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"
ForeColor="#FFFFCC"></TitleStyle>
<TodayDayStyle BackColor="#FFCC66" ForeColor="White"></TodayDayStyle>
</asp:Calendar>
</div>
</form>
</body>
</html>
④ FrmCalendar.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 첫 번째 캘린더 컨트롤을 선택한 후 SelectionChanged 이벤트 처리기를 구현하였습니다. <코드> using System;
namespace DevStandardControl { public partial class FrmCalendar : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Empty }
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
// 선택된 날짜를 출력
Response.Write(Calendar1.SelectedDate.ToShortDateString() + "<hr />");
}
}
}
⑤ FrmCalendar.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.
그림 7 1 FrmCalendar.aspx 페이지 실행 결과
⑥ 첫 번째 캘린더에서 날짜를 클릭하면 해당 날짜가 웹 페이지에 표시됩니다.
그림 7 2 Calendar 컨트롤의 특정 날짜 선택하기
⑦ FrmCalendarQueryString.aspx 파일을 열고<body> 태그 안에 다음과 같이 코드를 추가합니다.
```csharp FrmCalendarQueryString.aspx
<body>
<form id="form1" runat="server">
<div>
넘겨온 값: <asp:Label ID="lblDate" runat="server" Text=""></asp:Label>
<asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
</div>
</form>
</body>
⑧ FrmCalendarQueryString.aspx.cs 파일을 열고 다음과 같이 코드를 추가합니다.
public partial class FrmCalendarQueryString : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!String.IsNullOrEmpty(Request.QueryString["Date"]))
{
lblDate.Text = Request.QueryString["Date"];
}
else
{
lblDate.Text = "없습니다.";
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
DateTime selectedDate = Calendar1.SelectedDate;
int year = selectedDate.Year;
int month = selectedDate.Month;
int day = selectedDate.Day;
// Request.ServerVariables["SCRIPT_NAME"] : 현재 스크립트 이름
string strUrl =
String.Format("{3}?Date={0}-{1}-{2}", year, month, day,
Request.ServerVariables["SCRIPT_NAME"]);
Response.Redirect(strUrl);
}
}
⑨ FrmCalendarQueryString.aspx 페이지를 실행합니다. 날짜를 클릭하면 해당 날짜를 쿼리스트링으로 현재 페이지에 전송하여 선택한 날짜 값을 출력하는 기능이 실행됩니다. 그림 7 3 선택한 날짜 값을 쿼리스트링으로 받기
7.3.3 마무리 일정 관리, 주문 예약 같은 응용 프로그램을 제작할 때 달력 컨트롤은 필수다. 달력 컨트롤은 달력을 아주 손쉽게 웹 페이지에 추가할 수 있고, 사용하는 데 필요한 많은 기능을 내포하고 있습니다. 앞서 밝혔듯이 지면 관계상 모든 내용을 설명할 수는 없으니 필요한 세부 내용은 MSDN을 참고하기 바랍니다.
7.4 AdRotator 컨트롤 7.4.1 소개 애드로테이터 컨트롤은 웹 페이지에 광고 기능을 구현하는 컨트롤로 특정 빈도수에 맞게 배너 광고를 띄우고자 할 때 주로 사용합니다. 최근에는 JavaScript 라이브러리가 광고 출력과 관련된 기능을 많이 제공해서 AdRotator 컨트롤의 사용 빈도가 감소했지만, XML 파일을 사용해보는 데 의미를 두고 한 번 다뤄보겠습니다.
7.4.2 AdRotator 컨트롤의 주요 구성 요소 멤버 이름 설명 클래스 AdRotator System.Web.UI.WebControls.AdRotator 클래스 속성 AdvertisementFile 광고에 대한 사항을 저장하고 있는 XML 파일의 URL Target 광고를 클릭했을 때 어느 프레임으로 띄울지 결정
7.5 [실습] AdRotator 컨트롤을 사용하여 광고 순환시키기 7.5.1 소개 크기가 같은 이미지 네 개를 서로 다른 빈도수로 웹 페이지에 출력한 후 각각의 이미지를 클릭하면 서로 다른 사이트로 이동하는 기능을 구현해보겠습니다.
7.5.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmAdRotator.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가하고, 같은 이름으로 XML 파일을 추가합니다. 템플릿 이름 이름 웹 폼 FrmAdRotator.aspx XML 파일 FrmAdRotator.xml
③ FrmAdRotator.xml 파일을 열고 다음과 같이 입력합니다. XML 파일도 대소문자를 구분하므로 주의해서 입력해야 합니다. 이 XML 파일은 AdRotator 컨트롤에서 각각의 배너에 대한 정보를 담고 있는 데이터라고 볼 수 있습니다.
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>~/images/ASP-NET-Banners-01.png</ImageUrl>
<NavigateUrl>http://www.devlec.com/</NavigateUrl>
<AlternateText>데브렉</AlternateText>
<Keyword>데브렉</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/ASP-NET-Banners-02.png</ImageUrl>
<NavigateUrl>http://www.VisualAcademy.com/</NavigateUrl>
<AlternateText>비주얼아카데미</AlternateText>
<Keyword>비주얼아카데미</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/Banner-01-Azure.png</ImageUrl>
<NavigateUrl>http://www.dotnetkorea.com/</NavigateUrl>
<AlternateText>닷넷코리아</AlternateText>
<Keyword>닷넷코리아</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/Banner-02-VS.png</ImageUrl>
<NavigateUrl>http://www.LicenseLand.com/</NavigateUrl>
<AlternateText>라이센스랜드</AlternateText>
<Keyword>라이센스랜드</Keyword>
<Impressions>25</Impressions>
</Ad>
</Advertisements>
XML에서 사용한 이미지 파일들은 이 책 소스에서 복사한 후 DevStandardControl 프로젝트의 images 폴더에 넣어놓고 연습하거나 다른 이미지 파일로 대체해도 됩니다.
작성한 XML 파일에 대해 간단히 설명하면 다음과 같습니다.
ImageUrl: 광고에 사용할 이미지 경로
NavigateUrl: 광고 이미지를 클릭했을 때 이동할 경로
AlternateText: 이미지가 표시되지 않을 때 보여주는 대체 텍스트
Keyword: 광고 내용을 구분할 때 사용할 키워드
Impressions: 광고를 보여줄 빈도수
④ FrmAdRotator.aspx 파일에 다음과 같이 코드를 작성합니다.
FrmAdRotator.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmAdRotator.aspx.cs" Inherits="DevStandardControl.FrmAdRotator" %>
<!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:AdRotator ID="ctlAdRotator" runat="server"
AdvertisementFile="~/FrmAdRotator.xml"
Width="960px" Height="360px" />
</div>
</form>
</body>
</html>
⑤ FrmAdRotator.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 웹 브라우저를 새로고침할 때마다 서로 다른 이미지가 순환되고, 각 이미지를 클릭하면 FrmAdRotator.xml 파일에서 설정한 경로로 이동합니다. 그림 7 4 FrmAdRotator.aspx 페이지 실행 결과
7.5.3 마무리 웹 사이트 메인에서 광고 이미지를 순환시키는 기법은 상당히 많이 사용합니다. 제작할 웹 사이트에 광고 이미지를 띄워보겠습니다.
7.6 FileUpload 컨트롤 7.6.1 소개 파일 업로드 컨트롤은 로컬 컴퓨터에 있는 데이터(파일)를 원격 서버에 올리고자 할 때 파일을 첨부해줍니다.
7.6.2 FileUpload 컨트롤의 주요 명령어
FileUpload.HasFile : 파일이 첨부되었는지 확인 FileUpload.SaveAs() : 서버 측 경로에 파일 저장 FileUpload.PostedFile.ContentLength : 첨부된 파일의 사이즈(Byte)
<참고> ASP.NET 4.5 이상 파일 업로드 컨트롤의 주요 속성 AllowMultiple FileBytes FileContent FileName HasFile HasFiles PostedFile PostedFiles </참고>
7.6.3 ASP.NET에서 대용량 파일 업로드 하기
ASP.NET에서는 기본값으로 4096Kbytes 밖에 업로드가 되지 않습니다. 업로드 용량을 제한하지 않으려면 .NET의 machine.config 파일 또는 웹 사이트의 web.config 파일의 <system.web> 섹션에 <httpRuntime /> 항목을 다음과 같이 추가하면 됩니다.
참고 사이트: http://support.microsoft.com/kb/815307/ko
코드 샘플
<system.web>
<httpRuntime maxRequestLength="2000000"/>
</system.web>
7.6.4 Balzor에서 파일 다운로드 코드 조각
@page "/FileDownLoadWithBase64"
@inject IJSRuntime JsRuntime
<h3>FileDownLoadWithBase64</h3>
<input type="button" @onclick="btnSave_Click" id="btnSave" value="파일 다운로드" />
@code {
async Task btnSave_Click()
{
await SaveAs("Filename.dat", new byte[] { });
}
async Task SaveAs(string filename, byte[] data)
{
await JsRuntime.InvokeAsync<object>("saveAsFile", filename, Convert.ToBase64String(data));
}
}
@*function saveAsFile(filename, bytesBase64) {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + bytesBase64;
document.body.appendChild(link); // Needed for Firefox
link.click();
document.body.removeChild(link);
}*@
7.7 [실습] FileUpload 컨트롤을 사용하여 파일 전송하기 7.7.1 소개 로컬 컴퓨터에 있는 파일을 웹 사이트에 업로드 해보겠습니다.
7.7.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmFileUpload.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가하고 프로젝트 루트에 files란 폴더를 생성하고 해당 files 폴더에 Windows 보안 권한의 “Everyone” 또는 “Network Service” 권한에 모든 권한을 부여합니다. 템플릿 이름 이름 웹 폼 FrmFileUpload.aspx 새 폴더 추가 /files/
<참고> 폴더에 쓰기 권한 설정 파일이 업로드되는 공간은 웹 앱에서 해당 폴더에 파일을 쓸 수 있는 쓰기 권한 이상이 있어야 업로드가 가능합니다. 파일 업로드 기능 구현시 코드에는 문제없는데 실행이 안된다면, 이러한 윈도 보안 권한에 쓰기 권한이 없기 때문일 수 있습니다. 폴더에 쓰기 권한을 부여하려면 다음 단계를 거치면 됩니다. (1) 파일 탐색기에서 업로드할 files 폴더에 마우스 오른쪽 버튼을 클릭합니다. 상황 메뉴가 나타나면 <속성>을 선택한 후 <보안> 탭을 선택합니다.
(2) 폴더 속성의 <보안> 탭에서 <편집> 버튼을 클릭한 후 추가 학습: 버튼을 클릭합니다. <선택할 개체 이름을 입력하십시오> 입력란에 다음 그림과 같이 Everyone을 입력한 후 <확인> 버튼을 클릭하여 추가합니다.
(3) 추가된 “Everyone” 권한을 선택한 후 아래 사용 권한 리스트에서 수정(쓰기) 권한에 <허용>을 체크하거나 모든 권한에 <허용>을 체크합니다.
(4) 다음은 최종적으로 files 폴더가 “Everyone” 권한에 수정 권한이 추가로 설정된 상태를 보여줍니다.
</참고>
③ FrmFileUpload.aspx 파일에 다음과 같이 코드를 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmFileUpload.aspx.cs" Inherits="DevStandardControl.FrmFileUpload" %>
<!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:FileUpload ID="ctlFileUpload" runat="server" />
<br />
<asp:LinkButton ID="btnUpload" runat="server"
OnClick="btnUpload_Click">파일업로드</asp:LinkButton>
<br />
<asp:Label ID="lblResult" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
④ FrmFileUpload.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
namespace DevStandardControl
{
public partial class FrmFileUpload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Empty
}
protected void btnUpload_Click(object sender, EventArgs e)
{
// [1] 파일이 첨부되었다면
if (ctlFileUpload.HasFile)
{
// [2] App_Data 폴더로 파일 업로드
ctlFileUpload.SaveAs(Server.MapPath(".")
+ "\\files\\" + ctlFileUpload.FileName);
// [3] 다운로드 링크 만들기
lblResult.Text = String.Format("<a href='{0}{1}'>{1}</a>"
, "./files/"
, Server.UrlEncode(ctlFileUpload.FileName));
}
}
}
}
⑤ FrmFileUpload.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 파일업로드의 <찾아보기> 또는 <파일선택> 버튼을 클릭해서 업로드 하려는 파일을 선택합니다. 그림 7 5 FrmFileUpload.aspx 페이지 실행 결과
⑥ <파일업로드> 링크 버튼을 클릭하면 다음과 같이 파일이 업로드되고 업로드된 파일에 대한 직접 연결 링크가 하단에 출력됩니다. <찾아보기> 버튼을 클릭하여 로컬 컴퓨터에 있는 파일을 선택 후 <파일업로드> 링크 버튼을 클릭하면 해당 파일이 files 폴더에 업로드됩니다. 업로드 후 만들어지는 링크를 클릭하면 해당 파일을 내려받을 수 있습니다. 그림 7 6 파일 업로드 결과
파일이 업로드된 폴더를 찾아가려면 첫 번째, 솔루션 탐색기에서 files 폴더에 마우스 오른쪽 버튼을 클릭한 후 <파일 탐색기에서 폴더 열기> 메뉴를 사용합니다. 두 번째, 다음 그림과 같이 솔루션 탐색기의 상단 메뉴 아이콘 중에서 <모든 파일 표시> 메뉴 아이콘을 클릭하여 해당 폴더에 있는 모든 파일 목록을 봅니다. 그림 7 7 솔루션 탐색기의 모든 파일 표시
7.7.3 마무리 자료실, 앨범, 음악 게시판 같은 기능을 구현하려면 파일업로드 컨트롤은 필수다. 참고로 파일을 서버의 공간에 업로드하는 방식 외에도 최근 많이 사용하는 클라우드 서비스를 이용해 클라우드의 BLOB 스토리지 공간에 업로드할 수도 있는데, 이때는 현재 실습에서의 코드가 아니라 클라우드 서비스의 저장소 공간에 업로드하는 코드를 따로 사용해야 합니다.
<참고> 다중 파일 업로드
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmFileUpload_Multiple.aspx.cs"
Inherits="DevStandardControl.FrmFileUpload_Multiple" %>
<!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:FileUpload ID="txtFiles" runat="server"
AllowMultiple="true" />
<asp:Button ID="btnUpload" runat="server"
Text="파일 업로드" OnClick="btnUpload_Click" />
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
using System;
using System.IO;
using System.Web;
using System.Web.UI;
namespace DevStandardControl
{
public partial class FrmFileUpload_Multiple : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnUpload_Click(object sender, EventArgs e)
{
// 업로드된 파일이 있는지 확인
if (txtFiles.HasFiles)
{
string path = Server.MapPath("~/files/");
foreach (HttpPostedFile file in txtFiles.PostedFiles)
{
try
{
// 파일명
string fileName =
Path.GetFileName(file.FileName);
file.SaveAs(Path.Combine(path, fileName));
lblDisplay.Text += fileName + "<br />";
}
catch (Exception ex)
{
lblDisplay.Text = "에러 발생: " + ex.Message;
}
}
}
}
}
}
</참고>
7.8 Wizard 컨트롤 위저드 컨트롤은 프로그램을 설치하는 절차처럼 순서가 있는 작업을 진행할 때 이를 손쉽게 구현하도록 만들어 놓은 컨트롤입니다.
7.9 [실습] Wizard 컨트롤을 사용하여 단계별 페이지 실행 7.9.1 소개 여러 페이지에 걸쳐서 작성해야 할 사항을 컨트롤 하나로 해결하는 방법을 알아봅니다. 위저드 컨트롤은 단계가 많은 작업에서 유용합니다.
7.9.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmWizard.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmWizard.aspx
③ FrmWizard.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmWizard.aspx.cs" Inherits="DevStandardControl.FrmWizard" %>
<!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:Wizard ID="Wizard1" runat="server"
Width="600px" Height="200px" BorderWidth="1px"
OnFinishButtonClick="Wizard1_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="0. 처음"
StepType="Start">
마법사를 시작합니다. <br />
0: <asp:TextBox ID="txtStart" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="1. 단계 1"
StepType="Step">
첫 번째 단계입니다. <br />
1: <asp:TextBox ID="txtStep1" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="2. 단계 2"
StepType="Step">
두 번째 단계입니다. <br />
2: <asp:TextBox ID="txtStep2" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" Title="3. 마지막"
StepType="Finish">
마지막 단계입니다. <br />
3: <asp:TextBox ID="txtFinish" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep5" runat="server" Title="4. 완료"
StepType="Complete">
완료되었습니다. <hr />
<asp:Label ID="lblComplete" runat="server"></asp:Label>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</div>
</form>
</body>
</html>
④ FrmWizard.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. <코드> using System; using System.Web.UI.WebControls;
namespace DevStandardControl { public partial class FrmWizard : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) {
}
protected void Wizard1_FinishButtonClick(
object sender, WizardNavigationEventArgs e)
{
string s = "";
s += this.txtStart.Text + "<br />";
s += this.txtStep1.Text + "<br />";
s += this.txtStep2.Text + "<br />";
s += this.txtFinish.Text + "<br />";
this.lblComplete.Text = s;
}
}
}
⑤ FrmWizard.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 각 단계별로 텍스트박스에 값을 입력 후 <마침> 버튼을 클릭하면 입력한 전체 내용이 완료 창에 나타난다.
그림 7 8 FrmWizard.aspx 페이지 실행 및 단계별 진행 결과
폼이 로드되면 위저드 컨트롤에 의해서 각 단계가 이어진다.
각 단계마다 나타나는 텍스트박스에 항목을 입력하면 완료 단계에서 모아서 출력됩니다.
7.9.3 마무리
위저드 컨트롤을 사용하면 여러 단계에 걸쳐서 진행되는 내용을 쉽게 구현할 수 있습니다.
7.10 XML 컨트롤
7.10.1 소개
XML 컨트롤은 닷넷에서 XML의 사용 빈도가 높아지면서 XML 문서를 웹 페이지에 표현하기 쉽게 XML과 관련된 주요 기능을 제공하는 컨트롤입니다.
7.10.2 Xml 컨트롤의 주요 구성 요소
멤버 이름 설명
클래스 Xml System.Web.UI.WebControls.Xml 클래스
속성 DocumentSource Xml 컨트롤에 출력될 XML 파일의 경로
TransformSource Xml 컨트롤의 디자인을 담고 있는 XSLT 파일의 경로
7.11 [실습] Xml 컨트롤을 사용하여 회사 소개 페이지 구현
7.11.1 소개
XML 파일에 데이터베이스처럼 일정한 형식으로 회사 소개 내용을 저장합니다. 그리고 XSLT 파일에 해당 XML 파일에 대해 디자인한 후 XML 컨트롤을 사용하여 웹 페이지에 출력해보겠습니다. 이번 예제는 XML과 XSLT 파일을 한 번 사용해본다는 생각으로 가볍게 진행하기 바랍니다.
7.11.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmXml.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 또 XML 파일과 XSLT 파일도 다음과 같이 추가합니다. 참고로 XSLT 파일은 확장자를 XSL로 변경합니다.
템플릿 이름 이름
웹 폼 FrmXml.aspx
XML 파일 FrmXml.xml
XSLT 파일 FrmXml.xsl
③ 생성된 FrmXml.xml 파일을 열고 다음과 같이 입력합니다.
```csharp FrmXml.xml
<?xml version="1.0" encoding="utf-8" ?>
<Company>
<CompanyName>비주얼아카데미</CompanyName>
<CompanyNumber>1234-5678</CompanyNumber>
<CompanyAddress>세종시</CompanyAddress>
<CompanyAddressDetail>우리 동네</CompanyAddressDetail>
<Name>홍길동</Name>
<CompanyType>서비스</CompanyType>
<CompanyStyle>온라인 교육</CompanyStyle>
<Operator>임꺽정</Operator>
<Phone>114</Phone>
<Fax>114</Fax>
<Email>ceo@visualacademy.com</Email>
</Company>
④ 생성된 FrmXml.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="/Company">
<html>
<body>
<h1>회사소개</h1>
<table border="1" style="width:500px;">
<tr>
<td width="180">
사업자명
</td>
<td>
<xsl:value-of select="CompanyName"></xsl:value-of>
</td>
</tr>
<tr>
<td width="180">
사업자번호
</td>
<td>
<xsl:value-of select="CompanyNumber"></xsl:value-of>
</td>
</tr>
<tr>
<td>
소재지
</td>
<td>
<xsl:value-of select="CompanyAddress"></xsl:value-of>
<xsl:value-of select="CompanyAddressDetail"></xsl:value-of>
</td>
</tr>
<tr>
<td>
전화번호
</td>
<td>
<xsl:value-of select="Phone"></xsl:value-of>
</td>
</tr>
<tr>
<td>
팩스번호
</td>
<td>
<xsl:value-of select="Fax"></xsl:value-of>
</td>
</tr>
<tr>
<td>
이메일
</td>
<td>
<xsl:value-of select="Email"></xsl:value-of>
</td>
</tr>
<tr>
<td>
통신 판매업무 책임자
</td>
<td>
<xsl:value-of select="Operator"></xsl:value-of>
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
⑤ FrmXml.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmXml.aspx.cs" Inherits="DevStandardControl.FrmXml" %>
<!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>XML 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Xml ID="xmlCompany" runat="server"
DocumentSource="~/FrmXml.xml"
TransformSource="~/FrmXml.xsl">
</asp:Xml>
</div>
</form>
</body>
</html>
⑥ FrmXml.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
⑦ FrmXml.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 폼이 로드되면 Xml 컨트롤 자리에서 회사 소개 페이지가 출력됩니다. 회사 소개 페이지의 디자인은 XSL 파일에서 설정된 스타일로 나타난다. 그림 7 9 FrmXml.aspx 페이지 실행 결과
7.11.3 마무리 닷넷에 XML을 많이 적용하여 사용하지만, 어렵다. 최근에는 XML보다 더 작은 용량으로 같은 표현을 할 수 있는 JSON(JavaScript Object Notation)을 많이 사용합니다. 이 책에서는 이렇게 XML 컨트롤을 한 번 다뤄보는 데 의의를 두기로 합니다.
7.12 MultiView 컨트롤과 View 컨트롤 7.12.1 소개 멀티뷰 컨트롤과 뷰 컨트롤은 일반적으로 같이 사용됩니다. View 컨트롤은 각각의 모양을 정의하고, MultiView 컨트롤은 여러 모양으로 정의된 View 컨트롤 중에서 하나를 출력하는 컨테이너 역할을 합니다. 두 컨트롤을 사용해서 지정된 공간에 여러 가지 내용을 동적으로 출력할 수 있습니다.
7.12.2 MultiView 컨트롤의 주요 구성 요소 멤버 이름 설명 클래스 MultiView System.Web.UI.WebControls.MultiView 클래스 속성 Visible 컨트롤을 표시할지 여부 선택 이벤트 ActiveViewChanged 활성화된 View 컨트롤을 변경할 때 발생 7.12.3 View 컨트롤의 주요 구성 요소 멤버 이름 설명 클래스 View System.Web.UI.WebControls.View 클래스 속성 Visible 컨트롤을 표시할지 여부 선택 이벤트 Activate 해당 View 컨트롤이 활성화될 때 발생 Deactivate 해당 View 컨트롤이 비활성화될 때 발생
7.13 [실습] MultiView 컨트롤과 View 컨트롤로 로그인 모듈 구성하기 7.13.1 소개 웹 사이트의 메인 페이지에서 주로 사용되는 로그인 및 로그아웃 모듈의 레이아웃을 만들어보겠습니다.
7.13.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmMultiView.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmMultiView.aspx
③ FrmMultiView.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmMultiView.aspx.cs" Inherits="DevStandardControl.FrmMultiView" %>
<!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:MultiView ID="ctlMultiView1" runat="server">
<asp:View ID="ctlView1" runat="server">
<asp:Button ID="btnLogin" runat="server" Text="로그인"
OnClick="btnLogin_Click" />
</asp:View>
<asp:View ID="ctlView2" runat="server">
<asp:Button ID="btnLogout" runat="server" Text="로그아웃"
OnClick="btnLogout_Click" />
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 MultiView ID ctlMultiView1 View ID ctlView1 View ID ctlView2 Button ID btnLogin Text 로그인 Button ID btnLogout Text 로그아웃
④ FrmMultiView.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
namespace DevStandardControl
{
public partial class FrmMultiView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// [1] 첫 번째(인덱스:0) 뷰 컨트롤을 활성화
ctlMultiView1.ActiveViewIndex = 0;
}
}
protected void btnLogin_Click(object sender, EventArgs e)
{
// [2] 두 번째 뷰 컨트롤 활성화
this.ctlMultiView1.ActiveViewIndex = 1;
}
protected void btnLogout_Click(object sender, EventArgs e)
{
// [3] 첫 번째 뷰 컨트롤 활성화
this.ctlMultiView1.ActiveViewIndex = 0;
}
}
}
⑤ FrmMultiView.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 같은 영역에 처음에는 로그인 버튼이 보이고, 이 버튼을 클릭하면 로그아웃 버튼이 보이기를 반복합니다. 그림 7 10 FrmMultiView.aspx 페이지 실행 결과
폼이 처음 로드되면 첫 번째 뷰 컨트롤이 활성화되어 로그인 버튼이 출력됩니다. 로그인 버튼을 클릭하면 두 번째 뷰 컨트롤이 활성화되어 로그아웃 버튼이 출력됩니다.
7.13.3 마무리 멀티뷰와 뷰 컨트롤을 사용하면 특정 영역에 보여지는 내용이 로그인 링크와 로그아웃 링크 기능처럼 같은 위치에서 서로 다른 UI를 보여줄 수 있습니다.
7.14 Panel 컨트롤 7.14.1 소개 패널 컨트롤은 HTML의
ASP.NET의 소스 부분 asp:Panel 웹 브라우저 출력 부분
7.14.2 Panel 컨트롤의 주요 구성 요소 멤버 이름 설명 클래스 Panel System.Web.UI.WebControls.Panel 클래스 속성 Visible 해당 패널을 보일지 안 보일지 결정 ScrollBars 패널에 스크롤바를 보일지 안 보일지 결정 BackImageUrl 배경 이미지 경로 Wrap 줄 바꿈 지정 설정 HorizontalAlign 패널 안에 있는 문자열의 정렬 설정 GroupingText 패널 상단에 텍스트 출력 DefaultButton 패널 컨트롤에서 엔터 키를 눌렀을 때 어떤 버튼을 자동으로 클릭할 것인지를 해당 버튼의 ID 속성으로 지정
다음은 Panel 컨트롤의 DefaultButton 속성을 사용한 샘플 코드 조각입니다. 이 코드는 특정 폼의 텍스트박스에 값을 넣은 뒤 엔터키를 입력했을 때 특정 버튼이 클릭되도록 설정합니다. txtSearchQuery 텍스트박스에서 값을 입력 후 엔터키를 누르면 btnSearch 버튼이 클릭됩니다.
<코드> <asp:Panel runat = "server" ID="frmSearchForm" DefaultButton="btnSearch"> <asp:TextBox ID = "txtSearchQuery" runat="server" BorderStyle="Solid" BorderWidth="1px" Width="200px" ValidationGroup="BoardSearchForm"></asp:TextBox> <asp:Button ID = "btnSearch" runat="server" BorderStyle="Solid" BorderWidth="1px" Text="검 색" OnClick="btnSearch_Click" ValidationGroup="BoardSearchForm"></asp:Button> </asp:Panel>
7.14.3 [참고] 특정 페이지만 정해진 크기안에서 스크롤바로 표시
<코드>
// SalesOrder 페이지라면
if (Request.RawUrl.Contains("SalesOrder"))
{
pnlMaster.Width = 1440;
pnlMaster.Height = 900;
pnlMaster.ScrollBars = System.Web.UI.WebControls.ScrollBars.Auto;
}
7.15 [실습] Panel 컨트롤을 사용하여 그룹으로 보이기 및 숨기기 7.15.1 소개 특정 부분을 스크롤바로 그룹화하거나 레이블로 그룹화하는 방법과 특정 영역에서 엔터키를 눌렀을 때 특정 버튼이 클릭되는 기능을 구현하는 방법을 살펴보겠습니다.
7.15.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmPanel.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmPanel.aspx
③ FrmPanel.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmPanel.aspx.cs" Inherits="DevStandardControl.FrmPanel" %>
<!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:Panel ID="pnlFirst" runat="server"
Height="50px" Width="200px" ScrollBars="Vertical">
안녕하세요.<br />
안녕하세요.<br />
안녕하세요.<br />
안녕하세요.<br />
</asp:Panel>
<asp:Panel ID="pnlSecond" runat="server"
Height="50px" Width="200px" GroupingText="그룹 상자">
반갑습니다.<br />
</asp:Panel>
<br />
<hr />
<asp:Panel ID="pnlCommand" runat="server"
Height="50px" Width="360px" DefaultButton="btnShowPanel2">
<asp:Button ID="btnShowPanel1" runat="server"
Text="첫 번째 패널 보이기" OnClick="btnShowPanel1_Click" />
<asp:Button ID="btnShowPanel2" runat="server"
Text="두 번째 패널 보이기" OnClick="btnShowPanel2_Click" /><br />
<asp:TextBox ID="txtMessage" runat="server"
Width="344px">여기에서 엔터키를 누르면 버튼이 클릭됩니다.</asp:TextBox>
</asp:Panel>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 Panel ID pnlFirst ScrollBars Vertical Panel ID pnlSecond GroupingText 그룹 상자 Panel ID pnlCommand DefaultButton btnShowPanel2 Button ID btnShowPanel1 Text 첫 번째 패널 보이기 Button ID btnShowPanel2 Text 두 번째 패널 보이기 TextBox ID txtMessage Text 엔터키를 누르면 버튼이 클릭됩니다.
④ FrmPanel.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다.
using System;
using System.Web.UI;
namespace DevStandardControl
{
public partial class FrmPanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// 텍스트박스에 포커스 두기
Page.SetFocus(txtMessage);
}
// 로드될 때 첫 번째 패널만 보이기
this.pnlFirst.Visible = true;
this.pnlSecond.Visible = false;
// 첫 번째 패널 -> 두 번째 버튼 보이기
btnShowPanel1.Visible = false;
btnShowPanel2.Visible = true;
}
protected void btnShowPanel1_Click(object sender, EventArgs e)
{
this.pnlFirst.Visible = true;
this.pnlSecond.Visible = false;
btnShowPanel1.Visible = false;
btnShowPanel2.Visible = true;
// 텍스트박스에 포커스
SetFocus(txtMessage);
pnlCommand.DefaultButton = "btnShowPanel2";
}
protected void btnShowPanel2_Click(object sender, EventArgs e)
{
this.pnlFirst.Visible = false;
this.pnlSecond.Visible = true;
btnShowPanel1.Visible = true;
btnShowPanel2.Visible = false;
// 텍스트박스에 포커스
SetFocus(txtMessage);
pnlCommand.DefaultButton = "btnShowPanel1";
}
}
}
⑤ FrmPanel.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 폼이 로드된 뒤 엔터키를 누르거나 버튼을 클릭하면 두 패널이 서로 번갈아 가며 출력되고, 각 패널의 모양이 서로 다르게 출력됩니다. 그림 7 11 FrmPanel.aspx 페이지 실행 결과
7.15.3 마무리 CSS 또는 JavaScript와 같은 클라이언트 기술을 사용해도 이 실습의 예제를 구현할 수 있습니다. 하지만 Panel 컨트롤은 이러한 기능을 동적으로 서버에서 구현해 클라이언트에게 보이도록 여러 가지 편리한 기능을 제공하는 데 그 목적이 있습니다.
7.16 PlaceHolder 컨트롤 7.16.1 소개 틀(플레이스홀더) 컨트롤은 앞서 살펴본 패널 컨트롤과 비슷한 역할이나 특정한 태그로 묶이지 않는 것이 특징입니다. 말로 설명하기보다는 실습 예제를 통해 알아보겠습니다.
7.17 [실습] PlaceHolder 컨트롤에 동적으로 버튼 컨트롤 추가하기 7.17.1 소개 이번 실습을 통해서 PlaceHolder 컨트롤 위치에 프로그래밍 방식으로 버튼 컨트롤을 추가하는 기능에 대해서 학습합니다.
7.17.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmPlaceHolder.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmPlaceHolder.aspx
③ FrmPlaceHolder.aspx 페이지에 다음과 같이 입력합니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmPlaceHolder.aspx.cs" Inherits="DevStandardControl.FrmPlaceHolder" %>
<!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:PlaceHolder ID="ctlPlaceHolder" runat="server"></asp:PlaceHolder>
<hr />
<asp:Label ID="lblDisplay" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
웹 폼에 등록된 컨트롤의 주요 속성은 다음과 같습니다. 컨트롤 속성 값 PlaceHolder ID ctlPlaceHolder LinkButton ID btnGetText Text 생성된 버튼의 텍스트 가져오기 Label ID lblDisplay Text (빈 문자열)
④ FrmPlaceHolder.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. ASP.NET을 사용하면 동적으로 컨트롤을 생성해서 특정 영역에 삽입해서 사용할 수 있고, 관련된 이벤트 처리기도 구현할 수 있습니다. <코드> using System; using System.Web.UI.WebControls;
namespace DevStandardControl { public partial class FrmPlaceHolder : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // [1] 버튼 개체 하나 생성 Button btn1 = new Button(); btn1.ID = "btn1"; btn1.Text = "버튼 1"; btn1.Click += btn_Click; // [2] PlaceHolder에 프로그래밍 방식으로 버튼 추가 ctlPlaceHolder.Controls.Add(btn1);
Literal ltr = new Literal();
ltr.Text = "<br />";
ctlPlaceHolder.Controls.Add(ltr);
Button btn2 = new Button();
btn2.ID = "btn2";
btn2.Text = "버튼 2";
btn2.Click += btn_Click;
ctlPlaceHolder.Controls.Add(btn2);
}
private void btn_Click(object sender, EventArgs e)
{
lblDisplay.Text =
(sender as Button).Text + " 버튼이 클릭되었습니다.<br />";
Button btnCurrent = sender as Button;
lblDisplay.Text += btnCurrent.ID + " 버튼입니다.<br />";
// 부모 컨트롤(컨테이너)로부터 자식 컨트롤을 읽어오는 교과서다운 코드
lblDisplay.Text +=
((Button)ctlPlaceHolder.FindControl(btnCurrent.ID)).Text
+ " 버튼이겠죠?";
}
}
}
⑤ FrmPlaceHolder.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. <버튼 1> 컨트롤을 클릭하면 그림과 같이 관련 텍스트가 레이블 영역에 출력됩니다. 페이지가 로드될 때 PlaceHolder 컨트롤 영역에 동적으로 버튼 1과 버튼 2, 버튼 두 개가 추가됩니다.
그림 7 12 FrmPlaceHolder.aspx 페이지 실행 결과
7.17.3 마무리
웹 브라우저로 표현되는 어떤 개체를 해당 개체만 깔끔하게 출력하려면 Panel 컨트롤보다는 PlaceHolder 컨트롤이 적격입니다. 또한, 컨테이너 격인 컨트롤에 다른 컨트롤을 추가하는 Controls.Add() 코드도 자주 쓰이는 명령어이므로 기억해 두기 바랍니다.
7.18 Substitution 컨트롤
7.18.1 소개
Substitution(대체) 컨트롤은 나중에 배우게 될 캐싱(성능 향상) 기능과 연관된 컨트롤입니다. 전체 페이지가 캐싱되는 상황에서 특정 문자열 부분은 캐싱되지 않은 최신 자료를 출력하고자 할 때 이 컨트롤을 사용합니다.
7.19 [실습] Substitution 컨트롤을 사용하여 매번 최신 정보로 출력하기
7.19.1 소개
Substitution 컨트롤은 캐싱(Caching) 기능에 영향을 받지 않고자 할 때 사용합니다. 캐싱이란 웹 페이지를 매번 실행하는 대신 서버의 메모리에 지정된 시간 동안 내용을 담아 놓고 메모리에 담긴 내용을 출력하는 기능입니다.
<참고>
이번 내용을 "ASP.NET 웹 폼 - 표준 컨트롤 - Substitution 컨트롤" 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.
https://youtu.be/4kYmS7qDYI4
</참고>
7.19.2 따라하기
① DevStandardControl 프로젝트를 실행합니다.
② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmSubstitution.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다.
템플릿 이름 이름
웹 폼 FrmSubstitution.aspx
③ FrmSubstitution.aspx 페이지에 다음과 같이 입력합니다. 다음 코드의 Page 지시문 아래에 있는 OutputCache 지시문은 60초 동안 현재 페이지를 캐싱하겠다는 의미다.
```csharp FrmSubstitution.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmSubstitution.aspx.cs" Inherits="DevStandardControl.FrmSubstitution" %>
<%@ OutputCache Duration="60" VaryByParam="None" %>
<!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>Substitution(대체) 컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<h3>실제 IIS 웹 서버에서만 실행되는 예제임</h3>
<div>
캐싱 적용됨: <asp:Label ID="lblCachedLabel" runat="server"></asp:Label>
<hr />
캐싱 비적용: <asp:Substitution ID="Substitution1" runat="server" MethodName="GetCurrentTime" />
</div>
</form>
</body>
</html>
④ FrmSubstitution.aspx.cs 파일을 열고 다음과 같이 코드를 작성합니다. 페이지 로드 시 lblCachedLabel 컨트롤에 현재 시간을 출력하는 코드입니다. 현재 시간을 반환해주는 GetCurrentTime 메서드를 작성합니다. GetCurrentTime 메서드는 FrmSubstitution.aspx 페이지의 Substitution1 이름의 컨트롤의 MethodName 속성으로 호출됩니다. 페이지를 새로고침할 때 레이블은 캐싱의 영향을 받아서 60초에 한 번만 변경되고, Substitution 컨트롤은 캐싱의 영향을 받지 않아서 매번 현재 시간이 출력됩니다.
using System;
using System.Web;
namespace DevStandardControl
{
public partial class FrmSubstitution : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 캐싱되어 출력
lblCachedLabel.Text = DateTime.Now.ToLongTimeString();
}
// Substitution 컨트롤에 현재 시간 출력
public static string GetCurrentTime(HttpContext context)
{
return DateTime.Now.ToLongTimeString();
}
}
}
⑤ FrmSubstitution.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 에러가 발생합니다. Substitution 컨트롤을 Visual Studio에 내장되어 있는 IIS Express 웹 서버를 사용해서 테스트했기 때문입니다. 그림 7 13 IIS Express에서는 실행 시 모듈 충돌로 에러 발생
참고로 현재 프로젝트 소스를 IIS Express가 아닌 Microsoft Azure의 웹 앱과 같은 곳에 업로드하여 실제 서버(IIS 웹 서버)에서 실행하면 정상적으로 동작합니다. 다음 그림과 같이 캐싱이 적용되는 레이블은 한 번 실행 후 페이지를 새로고침해도 60초 동안 변경되지 않고, Substitution 컨트롤 부분은 캐싱과 상관없이 레이블의 값이 새로고침할 때마다 계속 바뀐다. 그림 7 14 정식 IIS 웹 서버에서는 정상 동작
7.19.3 마무리 캐싱 기능은 자주 호출되는 부분을 서버 메모리에 보관하고, 매번 호출하는 게 아니라 정해진 시간동안 한 번만 실행하여 성능을 향상시킵니다. 경우에 따라서는 매번 최신의 정보를 보여주어야 할 때가 있는데 이럴 때 Substitution 컨트롤을 사용합니다.
7.20 Localize 컨트롤 7.20.1 소개 Localize 컨트롤은 Literal 컨트롤과 마찬가지로 정적인 텍스트를 웹 페이지에 표시하기 위한 컨트롤입니다. Literal 컨트롤과 기능이 거의 비슷하나 Mode 속성을 통해서 특정 태그를 인코드(Encode)해서 보여주는 기능이 가능합니다. Literal 컨트롤과 사용법에서 거의 차이가 없기 때문에 Localize 컨트롤과 Literal 컨트롤 중에서 어떤 것을 사용해도 상관 없습니다.
7.21 [실습] Localize 컨트롤을 사용하여 텍스트 출력하기 7.21.1 소개 Localize 컨트롤은 Literal 컨트롤과 마찬가지로 정적인 텍스트를 웹 페이지에 표시합니다. Literal 컨트롤과 기능이 비슷하나 Mode 속성을 통해서 특정 태그를 인코드해서 보여줄 수 있습니다.
7.21.2 따라하기 ① DevStandardControl 프로젝트를 실행합니다. ② 솔루션 탐색기에서 DevStandardControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmLocalize.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmLocalize.aspx
③ FrmLocalize.aspx 페이지에 다음과 같이 입력합니다. 다음 소스처럼 로컬라이즈 컨트롤은 레이블 컨트롤처럼 사용할 수 있습니다. 다만, Mode 속성을 Encode로 지정하면 Text 속성에 지정된 코드의 < 기호를 < 처럼 인코드해서 보여줍니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmLocalize.aspx.cs" Inherits="DevStandardControl.FrmLocalize" %>
<!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:Localize ID="lblLocalize1" runat="server"
Text="안녕하세요."></asp:Localize>
<hr />
<asp:Localize ID="lblLocalize2" runat="server"
Text="<hr /><em>안녕하세요.</em>" Mode="Encode"></asp:Localize>
</div>
</form>
</body>
</html>
④ FrmLocalize.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 웹 브라우저로 실행해보면 태그가 실행되지 않고 인코드되어 태그 자체가 화면에 출력됩니다. 그림 7 15 Localize 컨트롤을 사용하여 태그를 실행하지 않고 인코드해서 보여주기
⑤ 웹 브라우저에서 문서에 마우스 오른쪽 버튼을 클릭한 후 <소스 보기>로 들어가면 다음 그림과 같이 태그가 < 과 > 기호로 변환되어 출력됩니다. 그림 7 16 Localize 컨트롤 사용 결과 페이지의 소스 보기
7.21.3 마무리 웹 페이지에 출력되는 태그가 실행되지 않고 순수 텍스트로 표현하고자 할 때 Localize 컨트롤 사용하면 도움이 됩니다.