Taeyo's ASP.NET
|
|
강좌 최초 작성일 : 2003년 03월 20일|
강좌 전 태오의 잡담> 5월 초(2003년)에는 잠시 미국에 나갔다 오게 되었습니다. 약간의 일이 생겨서요. 씨애틀을 경유해서 뉴욕쪽으로 갈 것 같네요. 혹시 씨애틀에 계시는 사이트 친구분 있으면 연락주세요 겸사 겸사 한번 뵙는 것도 좋을 것 같아요 ^^;
대상 : ASP.NET의 기본적인 컨트롤 사용법을 뗀 이들. 이번 강좌는 저번 강좌에서 이야기한 부분에서 바루 이어집니다.... ^^; 하지만, 지금의 출력형태는 그다지 깔끔해 보이지 않습니다. 일반적으로 이러한 데이터는 표 형태로 출력하는 것이 보기에 더 나은 편이라는 것을 우리는 알고 있죠. 그렇다면, 템플릿 코드를 바꾸어서 표 형태로 출력하게끔 해 보도록 해요. 하지만, 그 전에 먼저 표(<table>)로 출력될 경우 어떤 식의 HTML이 만들어져야 할 지를 생각해 보는 것이 좋을 겁니다. 대략적으로 다음과 같으면 되지 않을까?
그렇다면, 이런 식으로 출력이 되려면 Repeater 컨트롤의 템플릿은 어떻게 꾸며야 할까요? 나름대로 고민해 보기 바랍니다. 그리고, 그 결과와 제 코드를 비교해 보기 바래요 (이 코드는 제 Taeyo's ASP.NET 책의 다운로드 소스 중에 RepeaterEx1plus.aspx 라는 이름으로 제공됩니다)
그리고, 컴파일하고 실행해 보도록 해요. 그러면, 다음과 같은 멋진 결과를 확인할 수 있을 겁니다.
그리고, 브라우저에서 [소스 보기]를 해서 생성된 HTML을 확인해 보세요. 각각의 템플릿이 제대로 완성된 것을 확인할 수 있을 겁니다.
Repeater 컨트롤은 이런 식으로 개발자가 템플릿에서 HTML 태그를 분할할 수 있는 컨트롤입니다. 이 컨트롤을 사용하여 테이블을 만들려면 위의 예와 같이 HeaderTemplate에 테이블 시작 태그(<table>)를 넣고, ItemTemplate에는 단일 테이블 행 태그(<tr>)와 셀 태그(<td>)를, 그리고 FooterTemplate에는 테이블 마침 태그(</table>)를 추가하는 식으로 작성하면 됩니다. 현재의 출력 결과만으로도 보기에 나쁘지 않지만, 뭔가 결과가 단조롭다는 생각이 든다면, 추가적으로 AlternatingItemTemplate을 사용해 보는 것도 나쁘지 않습니다. 이는 출력 시 2,4,6.. 번째 항목의 ItemTemplate을 대신하는 템플릿이니 말입니다. 그렇다면, 다음과 같은 코드를 Repeater 컨트롤의 템플릿 구역 안에 추가해 보도록 하죠.
템플릿 내부의 바인드 코드는 ItemTemplate의 경우와 동일합니다. 단지, TR의 배경색만이 차이가 있을 뿐이죠. 이제 페이지를 컴파일하고 다시금 실행해 보세요. AlternatingItemTemplate의 역할을 확실히 이해할 수 있을 겁니다. 좋습니다. 좋구요~~~ 이번에는 Eval 메서드를 사용하는 방법에 대해 알아보도록 해요. 그리고, Eval 메서드를 사용하는 방식으로 기존의 방식을 대체하면서, Eval 메서드 사용시의 장점인 포맷 문자열을 지정하여 출력하는 방법도 함께 알아 보도록 해여~ 이거 자주 쓰이는 방법이니 꼭 알아둘 필요가 있거든요. 다음과 같이 HeaderTemplate 구역과 ItemTemplate 구역, AlternatingItemTemplate 구역을 변경해 봅시다. (전체 소스를 반복해서 나열하는 것은 무의미하므로 여기서는 변경되는 부분만을 나타낼 거예요. 전체 소스는 다운로드 받은 페이지들 중 RepeaterEx1plus2.aspx라는 이름으로 제공되고 있으니까요)
코드를 변경하였으면, 먼저 컴파일하고 실행하여 결과가 어떻게 나오는지를 확인해 보도록 해요~ 가격이 $ 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와 같이 날짜에 대해서 사용할 수 있는 포맷 문자에는 다음과 같은 것들이 있어요.
혹은, {0:yyyy-MM-dd tt (hh:mm)} 와 같은 식으로 포맷을 직접 지정할 수도 있습니다. 연도를 의미하는 것은 소문자 yyyy이며, 월을 의미하는 것은 대문자 MM, 일은 dd, 오전과 오후의 구분은 tt, 시간과 분은 각각 hh와 mm 을 사용하면 되거든요. 해서, 예제의 소스를 이와 같은 식으로 변경하면 날짜 부분이 다음과 같이 출력되는 것을 확인할 수 있을 겁니다.
또한, 숫자 값을 출력하고자 할 경우 사용할 수 있는 포맷 문자로는 다음과 같은 것들이 있습니다.
Repeater 컨트롤의 사용방법이 매우 간단하지 않은가요? 비록 출력을 위해 많은 코드를 직접 작성해야 하긴 했지만, 그것은 달리 생각하면 출력 형태를 우리의 구미대로 자유롭게 꾸밀 수 있다는 것을 의미하는 것이기도 합니다. 힘든만큼 보람있는 컨트롤인 것이죠. 하지만, Repeater 컨트롤은 단순히 데이터를 목록 형태로 출력하고자 할 경우에만 유용합니다. 다시 말해, 컨트롤 내부에 버튼이나 DropDownList와 같은 컨트롤을 올려서 어떤 상호작용을 해야 할 경우에는 그다지 효과적이지 못하다는 것이죠. 불가능하지는 않습니다만, 좀 처리하기가 피곤합 편이랍니다. 해서, ASP.NET에서는 Repeaer 컨트롤을 더 확장하여 그러한 기능들까지 포함시킨 또 다른 컨트롤도 제공하는 데, 그 컨트롤들은 DataList와 DataGrid 이랍니다.
이제 여러분은 그러한 컨트롤들도 공부해 주어야 할 것입니다.
|
