3. Repeater 구성 요소를 사용하여 데이터 세트를 표시합니다.
관련 소개
ASP.NET에서는 데이터를 표시하는 방법이 다양하며 그 중 Repeater도 기존 구성 요소 중 하나입니다. DataGrid는 항상 "테이블"에 데이터를 표시합니다. 보다 자유로운 방식으로 데이터를 표시하려면 반드시 Repeater 컨트롤을 사용합니다.
데이터 출력 형식을 템플릿 형식으로 정의합니다.
STEP 1. 페이지 만들기 원본 페이지를 변경하여 데이터를 표시하는 Repeater 구성 요소를 만들 수 있습니다. Location1.htm의 이름을 Location1.aspx로 바꿉니다. 페이지의 원래 부분을 삭제하고 이전 장에서와 같이 Region_IDEnterValue=1을 필터링하여 데이터 세트를 만듭니다. Repeater 컨트롤을 사용하여 동적 페이지를 만들어 보겠습니다.
j템플릿을 사용하여 출력 형식을 정의하려면 먼저 테이블을 생성합니다. ApplicationàDatabases 페이지를 통해 확인할 수 있습니다.
데이터베이스의 구조.
[그림 3-1 데이터베이스 구조]
데이터베이스의 구조를 기반으로 다음 테이블을 디자인합니다.
[그림 3-2 템플릿 다이어그램]
k데이터는 아래 테이블에 바인딩되어야 합니다. 애플리케이션 패널의 바인딩에서 데이터 항목을 해당 위치로 드래그합니다.
[그림 3-3 바인딩 대화상자]
데이터 바인딩 후에는 다음 페이지가 표시됩니다.
[그림 3-4 데이터 바인딩 후 페이지]
Dreamwaver MX가 데이터를 강조하는 UltraDev의 전통을 이어가기 때문에 약간 데자뷰 같은 느낌이 듭니다. ③ 데이터 표현 형태는 바인딩 대화상자에서도 선택할 수 있으며, 해당 페이지의 데이터 항목을 클릭하면 바인딩에서 해당 데이터에 대한 데이터 표현 형태를 선택할 수 있습니다.
[그림 3-5 데이터 표현 형태]
이 테이블을 템플릿으로 사용하여 모든 데이터 항목을 표시하려면 이 테이블을 모두 선택해야 합니다. 응용 프로그램 패널의 서버 동작 항목에서 "+"를 클릭하고 반복 영역 항목을 선택합니다. 
[그림 3-6 반복영역 선택] [그림 3-7 반복방법 선택]
반복 영역에서 반복할 방법을 결정하고 확인을 클릭합니다. 이제 "F12"를 눌러 페이지를 미리 볼 수 있습니다.
STEP 2 코드 분석 (참고: 코드를 표시하기 위해 다음 코드는 모두 "<" 뒤와 ">" 앞에 공백이 있습니다. 불편을 끼쳐드려 죄송합니다!)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<항목 템플릿>
< 테이블 너비="75%" 테두리="0" >
<tr>
< td width="18%" >위치 이름< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", 컨테이너) % > </ /td >
< /tr >
<tr>
< td >시< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", 컨테이너) % > </ /td >
< td width="19%" >주소< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", 컨테이너) % > </ /td >
< /tr >
<tr>
< td >상태</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", 컨테이너) % > < /td >
< td >코드< /td >
< td > < %# DataSet1.FieldValue("CODE", 컨테이너) % > < /td >
< /tr >
<tr>
< td >전화</ /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", 컨테이너) % > < /td >
< td >팩스< /td >
< td > < %# DataSet1.FieldValue("FAX", 컨테이너) % > < /td >
< /tr >
< /테이블 >
< /ItemTemplate >
< /ASP:리피터 >
ASP.net에서는 ItemTemple 템플릿을 생성하여 모든 데이터를 반복적으로 표시하므로, Repeater 스타일을 설정하려는 경우 템플릿을 설정하면 됩니다.
원하는 효과를 얻기 위해 다른 템플릿을 추가할 수도 있습니다.
AlternatingItemTemplate: 교차 디스플레이 데이터를 구현합니다. 원본 ItemTemplate의 템플릿을 사용하여 데이터 교차 표시
SeptorTemplate: 구분 기호 템플릿입니다. 데이터 행을 구분하는 데 사용할 수 있습니다.
HeaderTemplate: 헤더 템플릿입니다. 모든 데이터와 함께 상단에 표시됩니다.
FooterTemplate: 바닥글 템플릿입니다. 모든 데이터와 함께 하단에 표시됩니다.
디자인 형태는 ItemTemplate과 동일합니다. 템플릿을 만들고 싶은 부분을 마커로 둘러싸기만 하면 됩니다.
Dreamwaver MX를 통해 코드를 삽입하는 단축키가 있습니다. 삽입 패널의 ASP.NET 탭을 클릭한 다음
마크를 추가하면 마크 추가 대화상자가 나타납니다. ASP.NET 태그에서 템플릿 프로젝트를 선택합니다. 그런 다음 추가하려는 코드를 선택할 수 있습니다. Dreamwaver MX는 원래 입력 커서가 있던 위치에 코드를 추가합니다.
[그림 2-1 마커 추가 대화상자]
다음은 < ASP:Repeater > < /ASP:Repeater >에 삽입할 수 있는 AlternatingItemTemplate, SeptorTemplate, HeaderTemplate, FooterTemplate에 대한 코드입니다.
< 헤더 템플릿 >< 글꼴 색상="#666666" 크기="4" >모두
위치< /font >< /headertemplate >
<교대 항목 템플릿>
< 테이블 너비="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >위치 이름< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", 컨테이너) % >
</ /td >
< /tr >
<tr>
< td >시< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", 컨테이너) % > </ /td >
< td width="24%" >주소< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", 컨테이너) % > </ /td >
< /tr >
<tr>
< td >상태</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", 컨테이너) % > < /td >
< td >코드< /td >
< td > < %# DataSet1.FieldValue("CODE", 컨테이너) % > < /td >
< /tr >
<tr>
< td >전화</ /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", 컨테이너) % > < /td >
< td >팩스< /td >
< td > < %# DataSet1.FieldValue("FAX", 컨테이너) % > < /td >
< /tr >
< /테이블 >
< /AlternatingItemTemplate >
< 구분 기호 템플릿 >< hr width="70%" align="left" >
< /separator템플릿 >
< footertemplate ><font color="#666666" size="4" >End< /font >< /footertemplate >
IIS는 코드를 구문 분석할 때 키워드를 기반으로 템플릿을 상대 위치에 배치하고 원래 요청한 페이지를 얻습니다.
위 프로그램으로 생성된 페이지는 다음과 같습니다.
[그림 2-1 마지막 페이지]
반복기 구성 요소는 더 많은 무료 페이지를 만들 수 있지만 각 행에는 하나의 데이터 집합만 표시할 수 있습니다. 좀 더 자유로운 페이지를 만들려면 다음 섹션으로 이동하여 DataList 컨트롤을 사용하여 데이터를 표시해 보겠습니다.