Repeater 컨트롤 2 - 태요펌

Taeyo's ASP.NET    강좌 최초 작성일 : 2003년 03월 20일    강좌 최종 수정일 : 2003년 03월 21일    강좌 읽음 수 : 27420 회    작성자 : Taeyo(김 태영)    편집자 : Taeyo(김 태영)    강좌 제목 : Repeater Control (II)

강좌 전 태오의 잡담> 5월 초(2003년)에는 잠시 미국에 나갔다 오게 되었습니다. 약간의 일이 생겨서요. 씨애틀을 경유해서 뉴욕쪽으로 갈 것 같네요. 혹시 씨애틀에 계시는 사이트 친구분 있으면 연락주세요 겸사 겸사 한번 뵙는 것도 좋을 것 같아요 ^^; 대상 : 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 이랍니다. 이제 여러분은 그러한 컨트롤들도 공부해 주어야 할 것입니다. 오늘의 강좌는 여기까지임이 안타깝긴 하지만요~~ ^^;