Repeater Control (II)

대상 : ASP.NET의 기본적인 컨트롤 사용법을 뗀 이들.
선수지식 : ADO.NET 기본 지식.

이번 강좌는 저번 강좌에서 이야기한 부분에서 바루 이어집니다.... ^^;

하지만, 지금의 출력형태는 그다지 깔끔해 보이지 않습니다. 일반적으로 이러한 데이터는 표 형태로 출력하는 것이 보기에 더 나은 편이라는 것을 우리는 알고 있죠. 그렇다면, 템플릿 코드를 바꾸어서 표 형태로 출력하게끔 해 보도록 해요. 하지만, 그 전에 먼저 표(<table>)로 출력될 경우 어떤 식의 HTML이 만들어져야 할 지를 생각해 보는 것이 좋을 겁니다. 대략적으로 다음과 같으면 되지 않을까?

<table cellpadding="5" cellspacing="1" bgcolor="gray"> <tr> <td><font color="white">제목</font></td> <td><font color="white">가격</font></td> </tr> <tr bgcolor="white"> <td>The Busy Executive's Database Guide</td> <td>19.99</td> </tr> <tr bgcolor="white"> <td>The Busy Executive's Database Guide</td> <td>19.99</td> </tr> … … … </table>

그렇다면, 이런 식으로 출력이 되려면 Repeater 컨트롤의 템플릿은 어떻게 꾸며야 할까요? 나름대로 고민해 보기 바랍니다. 그리고, 그 결과와 제 코드를 비교해 보기 바래요 (이 코드는 제 Taeyo's ASP.NET 책의 다운로드 소스 중에 RepeaterEx1plus.aspx 라는 이름으로 제공됩니다)

<asp:Repeater id="Repeater1" runat="server">     <HeaderTemplate>         <table cellpadding="5" cellspacing="1" bgcolor="gray">             <tr>                 <td><font color="white">제목</font></td>                 <td><font color="white">가격</font></td>             </tr>     </HeaderTemplate>     <ItemTemplate>             <tr bgcolor="white">                 <td><%# ((DataRowView)Container.DataItem)["title"] %></td>                 <td><%# ((DataRowView)Container.DataItem)["Price"] %></td>             </tr>     </ItemTemplate>     <FooterTemplate>         </table>     </FooterTemplate> </asp:Repeater>

그리고, 컴파일하고 실행해 보도록 해요. 그러면, 다음과 같은 멋진 결과를 확인할 수 있을 겁니다.

그리고, 브라우저에서 [소스 보기]를 해서 생성된 HTML을 확인해 보세요. 각각의 템플릿이 제대로 완성된 것을 확인할 수 있을 겁니다.

Repeater 컨트롤은 이런 식으로 개발자가 템플릿에서 HTML 태그를 분할할 수 있는 컨트롤입니다. 이 컨트롤을 사용하여 테이블을 만들려면 위의 예와 같이 HeaderTemplate에 테이블 시작 태그(<table>)를 넣고, ItemTemplate에는 단일 테이블 행 태그(<tr>)와 셀 태그(<td>)를, 그리고 FooterTemplate에는 테이블 마침 태그(</table>)를 추가하는 식으로 작성하면 됩니다.

현재의 출력 결과만으로도 보기에 나쁘지 않지만, 뭔가 결과가 단조롭다는 생각이 든다면, 추가적으로 AlternatingItemTemplate을 사용해 보는 것도 나쁘지 않습니다. 이는 출력 시 2,4,6.. 번째 항목의 ItemTemplate을 대신하는 템플릿이니 말입니다. 그렇다면, 다음과 같은 코드를 Repeater 컨트롤의 템플릿 구역 안에 추가해 보도록 하죠.

<AlternatingItemTemplate>             <tr bgcolor="#efefef">                 <td><%# ((DataRowView)Container.DataItem)["title"] %></td>                 <td><%# ((DataRowView)Container.DataItem)["Price"] %></td>             </tr>     </AlternatingItemTemplate>

템플릿 내부의 바인드 코드는 ItemTemplate의 경우와 동일합니다. 단지, TR의 배경색만이 차이가 있을 뿐이죠. 이제 페이지를 컴파일하고 다시금 실행해 보세요. AlternatingItemTemplate의 역할을 확실히 이해할 수 있을 겁니다.

좋습니다. 좋구요~~~ 이번에는 Eval 메서드를 사용하는 방법에 대해 알아보도록 해요. 그리고, Eval 메서드를 사용하는 방식으로 기존의 방식을 대체하면서, Eval 메서드 사용시의 장점인 포맷 문자열을 지정하여 출력하는 방법도 함께 알아 보도록 해여~ 이거 자주 쓰이는 방법이니 꼭 알아둘 필요가 있거든요.

다음과 같이 HeaderTemplate 구역과 ItemTemplate 구역, AlternatingItemTemplate 구역을 변경해 봅시다. (전체 소스를 반복해서 나열하는 것은 무의미하므로 여기서는 변경되는 부분만을 나타낼 거예요. 전체 소스는 다운로드 받은 페이지들 중 RepeaterEx1plus2.aspx라는 이름으로 제공되고 있으니까요)

…     <HeaderTemplate>         <table cellpadding="5" cellspacing="1" bgcolor="gray">             <tr>                 <td><font color="white">제목</font></td>                 <td><font color="white">가격</font></td>                 <td><font color="white">출간일</font></td>             </tr>     </HeaderTemplate>     <ItemTemplate>             <tr bgcolor="white">                 <td><%# DataBinder.Eval(Container.DataItem, "title") %></td>                 <td><%# DataBinder.Eval(Container.DataItem, "Price", "$ {0}") %></td>                 <td><%# DataBinder.Eval(Container.DataItem, "pubdate", "{0:d}") %></td>             </tr>     </ItemTemplate>     <AlternatingItemTemplate>             <tr bgcolor="#dddddd">                 <td><%# DataBinder.Eval(Container.DataItem, "title") %></td>                 <td><%# DataBinder.Eval(Container.DataItem, "Price", "$ {0}") %></td>                 <td><%# DataBinder.Eval(Container.DataItem, "pubdate", "{0:d}") %></td>             </tr>     </AlternatingItemTemplate>     …

코드를 변경하였으면, 먼저 컴파일하고 실행하여 결과가 어떻게 나오는지를 확인해 보도록 해요~

가격이 $ 19.99와 같이 출력되는 것을 볼 수 있고, 날짜는 년-월-일 형태로 출력되는 것을 볼 수 있을 겁니다. DataBinder.Eval 메서드의 3번째 인자로 적절한 포맷 문자열을 지정해주면 그 형식에 따라 이와 같이 데이터는 출력됩니다. 3번째 포맷 문자열 중에 {0} 라는 것이 실제로 값이 들어오는 부분을 나타내며, 그렇기에 다음과 같은 코드는 Price 값의 앞에 $라는 문자를 더해서 출력하게 되는 것이죠.

<%# DataBinder.Eval(Container.DataItem, "Price", "$ {0}") %>

혹은, 포맷 문자를 사용하여 특정 형식으로 출력되도록 할 수도 있는데, 위의 예에서는 날짜를 출력하는 부분을 그렇게 처리해 보았습니다.

<%# DataBinder.Eval(Container.DataItem, "pubdate", "{0:d}") %>

{0}라는 문자가 실제 값을 의미하는데, 그 내부에 : 를 구분자로 포맷 문자를 {0:d}라고 지정하게 되면 이것은 d 라는 특정 날짜 포맷으로 데이터를 출력하라는 의미가 됩니다. d와 같이 날짜에 대해서 사용할 수 있는 포맷 문자에는 다음과 같은 것들이 있어요.

포맷문자	설명	설명
d	짧은 날짜	2002-06-09
D	긴 날짜	2002년 6월 12일 수요일
f	긴 날짜와 짧은 시간	2002년 6월 12일 수요일 오전 12:00
F	긴 날짜와 긴 시간	2002년 6월 9일 일요일 오전 12:00:00
t	짧은 시간	오전 12:00
T	긴 시간	오전 12:00:00
Y 와 y	년도와 월	2002년 6월

혹은, {0:yyyy-MM-dd tt (hh:mm)} 와 같은 식으로 포맷을 직접 지정할 수도 있습니다. 연도를 의미하는 것은 소문자 yyyy이며, 월을 의미하는 것은 대문자 MM, 일은 dd, 오전과 오후의 구분은 tt, 시간과 분은 각각 hh와 mm 을 사용하면 되거든요. 해서, 예제의 소스를 이와 같은 식으로 변경하면 날짜 부분이 다음과 같이 출력되는 것을 확인할 수 있을 겁니다.

또한, 숫자 값을 출력하고자 할 경우 사용할 수 있는 포맷 문자로는 다음과 같은 것들이 있습니다.

포맷문자	설명	설명
C 혹은 c	통화 포맷	$1,234.60, \2,000
D 혹은 d	십진수	235, -50
E 혹은 e	과학 계산용 지수	1.23E+21, -1.4e+3
F 혹은 f	고정소수점	34.500, -0.1230
G 혹은 g	일반	값에 따라 다름
N 혹은 n	숫자	3,456.23, -5.432
P 혹은 p	퍼센트	50%, 35.5%
X 혹은 x	16진수	&H3f46, 0x4618 (값에 따라 다름)

Repeater 컨트롤의 사용방법이 매우 간단하지 않은가요? 비록 출력을 위해 많은 코드를 직접 작성해야 하긴 했지만, 그것은 달리 생각하면 출력 형태를 우리의 구미대로 자유롭게 꾸밀 수 있다는 것을 의미하는 것이기도 합니다. 힘든만큼 보람있는 컨트롤인 것이죠.

하지만, Repeater 컨트롤은 단순히 데이터를 목록 형태로 출력하고자 할 경우에만 유용합니다. 다시 말해, 컨트롤 내부에 버튼이나 DropDownList와 같은 컨트롤을 올려서 어떤 상호작용을 해야 할 경우에는 그다지 효과적이지 못하다는 것이죠. 불가능하지는 않습니다만, 좀 처리하기가 피곤합 편이랍니다. 해서, ASP.NET에서는 Repeaer 컨트롤을 더 확장하여 그러한 기능들까지 포함시킨 또 다른 컨트롤도 제공하는 데, 그 컨트롤들은 DataList와 DataGrid 이랍니다.