DreamwaverMX 및 ASP.NET(4)
저자：Eve Cole
업데이트 시간：2009-05-31 21:06:17
4. DataList 구성 요소를 사용하여 데이터 세트를 표시합니다.
관련 소개:
DataList는 향상된 Repeater 컨트롤로, Repeater의 원래 기능 외에도 한 줄에 표시되는 데이터 수(RepeatColumn), 선택한 템플릿(SelectedItemTemple) 및 편집된 항목 템플릿(EditTemplate)을 설정할 수 있습니다. 그러나 DataList는 출력 데이터를 테이블로 정렬하여 출력하는 반면, Repeater는 템플릿 정의에 더 충실하며 HTML 태그를 추가하지 않습니다. (참고: 코드를 표시하기 위해 다음 모든 코드에는 "<" 뒤와 ">" 앞에 공백이 있습니다. 불편을 끼쳐드려 죄송합니다!)
1단계페이지 생성
우리가 만들고자 하는 페이지는 아래와 같습니다. Detail의 하이퍼링크를 클릭하면 첫 번째 항목과 같이 상세정보가 팝업됩니다. 닫기를 클릭하면 세부정보가 닫히고 원래 모습으로 복원됩니다.
[그림 1-1 페이지 데모]
표시하려는 데이터를 선택하여 시작하십시오. 유럽의 데이터(예: Region_ID=3)를 표시하기 위해 데이터 세트 설정에서 Region_ID=3의 데이터를 필터링하도록 선택할 수 있습니다.
[그림 1-2 데이터 스크리닝]
Datalist 컨트롤을 사용하여 데이터를 간략하게 표시하는 페이지를 만듭니다. 먼저 데이터가 없는 페이지를 만들어 보겠습니다. 그런 다음 응용 프로그램 패널에서 서버 동작을 선택합니다. "+"를 클릭하고 DataList를 선택합니다.
[그림 1-3 DataList 선택 페이지]
팝업 대화 상자에서 필요한 곳에 페이지 템플릿을 추가할 수 있습니다.
u 헤더: 헤더 템플릿
u 항목: 데이터 항목 템플릿
u 대체 항목: 교차 디스플레이 템플릿
u Edit Item: 템플릿을 수정합니다. ((기본적으로 표시되지 않으며, 이벤트 응답을 통해 표시되어야 함)
u 선택한 항목: 선택 후 표시되는 템플릿(이벤트 응답을 통해서도 표시되어야 함)
u 구분 기호: 별도의 템플릿
u 바닥글: 테이블 하단 템플릿
[그림 1-4 DataList 편집 대화상자]
Contents에 HTML 코드를 추가하여 필요한 템플릿을 만들 수 있고,
버튼을 눌러 데이터 항목을 추가하세요. 버튼을 클릭하면 필요한 데이터를 선택할 수 있는 데이터 항목 대화 상자가 나타납니다. 그리고 Contents 입력란에 추가해주세요.
< %# DataBinder.Eval(Container.DataItem, "데이터 항목") % >
코드는 데이터를 표시하는 데 사용됩니다.
[그림 1-5 데이터 항목 추가]
미리보기 효과를 얻으려면 먼저 헤더에 Location Name 코드를 추가하세요. 제목을 표시하는 데 사용됩니다. 항목에 코드 추가:
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, 각 항목의 제목으로 Location_name을 사용합니다.
대체 항목에 코드 추가
<fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >
다양한 글꼴 색상으로 데이터를 표시합니다.
선택한 항목이 즉시 표시될 수는 없지만 나중에 호출할 수 있도록 코드도 적어 두어야 합니다. 다음과 같이:
주소:
< %# DataSet1.FieldValue("ADDRESS", 컨테이너) % >
<BR>
도시:
< %# DataSet1.FieldValue("CITY", 컨테이너) % >
<BR>
전화:
< %# DataSet1.FieldValue("TELEPHONE", 컨테이너) % >
<BR>
확인을 클릭한 다음 페이지를 미리 봅니다. 아래 그림은 위 코드의 효과입니다. 잠시 후에 선택된 항목이 표시되는 효과를 구현해 보겠습니다.
[그림 1-6 초기 미리보기]
DataList와 Repeater의 한 가지 차이점은 단일 행을 설정하여 여러 데이터를 표시할 수 있다는 점이며, 이는 DataList 편집 창에서 설정할 수 있습니다.
[그림 1-7 여러 데이터를 표시하기 위해 한 줄로 설정]
줄 바꿈 사용 옵션을 선택하면 데이터를 구분하는 <BR> 태그만 사용됩니다. 테이블 형식으로 출력하려면 테이블 사용을 선택하고 테이블 열을 설정하여 단일 행에 표시되는 데이터 수를 결정할 수 있습니다.
STEP2 코드 작성
선택한 항목은 이벤트를 통해 표시되어야 하므로 이벤트를 시작하기 위한 버튼을 생성해야 합니다.
j LinkButton을 추가하여 이벤트를 생성합니다. 소스코드 창에서 <ItemTemplate>과 </ItemTemplate> 사이에 커서를 이동한 후, 더 많은 태그를 클릭하세요.
, 팝업 대화 상자에서 asp:LinkButton 컨트롤을 선택합니다.
[그림 2-1 태그 선택기 대화상자]
LinkButton 편집 대화 상자에서 LinkButton의 속성을 설정합니다. ID 입력란에 이름:상세정보를 입력하세요.
이벤트를 생성하는 명령은 Command Name에 "Detail"을 입력하고, Text 대화 상자(표시됨)에 Detail을 입력합니다.
[그림 2-2 LinkButton 편집 상자]
그런 다음 레이아웃에서 원하는 색상을 선택하고 확인을 클릭하여 코드를 생성합니다.
< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >
교차 표시에서 이 효과를 가지려면 <AlternatingItemTemplate> 및 </AlternatingItemTemplate>에 동일한 코드를 삽입해야 합니다.
동시에 팝업 선택 템플릿을 닫으려면 명령도 생성해야 하므로 LinkButton을 하나 더 추가해야 합니다. 이를 위해서는 <SelectedItemTemplate></SelectedItemTemplate>에 코드를 삽입해야 합니다.
< asp:LinkButton BackColor="#FFFFFF" CommandName="닫기" ForeColor="#000000" ID="닫기" runat="서버" Text="닫기" >< /asp:LinkButton >
k명령과 함께 우리는 또한 명령을 해석하는 프로그램을 사용해야 합니다. 실제로 프로세스는 복잡하지 않으며 약간의 코드만 추가하면 됩니다. < head ></ /head >에 다음 코드를 추가합니다.
< 스크립트 언어="VB" runat="서버" >
하위 DataList_ItemCommand(발신자는 개체, e는 DataListCommandEventArgs)
e.CommandSource.CommandName="Detail"인 경우
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" 그런 다음
DataList1.SelectedIndex=-1
종료 조건
DataList1.DataBind()
하위 종료
</ /스크립트 >
실행할 프로그램을 결정하기 위해 LinkButton을 클릭하면 프로그램이 명령(CommandName)을 얻을 수 있습니다. DataList의 SelectedIndex 속성을 e.Item.ItemIndex로 설정하면 SelectedItemTemplate 페이지가 열립니다. 명령이 Close이고 DataList의 SelectedIndex 속성이 -1로 설정된 경우(즉, 데이터 항목이 선택되지 않음) DataList는 ItemTemplate 항목 템플릿을 사용하여 이 데이터 항목을 표시합니다.
또한 < asp:DataList >에 코드 조각을 추가합니다.
OnItemCommand="DataList_ItemCommand"
프로그램 세그먼트 DataList_ItemCommand와의 관계를 선언합니다.
미리 보려면 "F12"를 누르면 페이지에 예상되는 효과가 표시됩니다.
[그림 2-3 최종 프리뷰 버전]
첨부된 내용은 주요 프로그램 세그먼트의 소스 코드입니다.
하위 DataList_ItemCommand(발신자는 개체, e는 DataListCommandEventArgs)
e.CommandSource.CommandName="Detail"인 경우
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" 그런 다음
DataList1.SelectedIndex=-1
종료 조건
DataList1.DataBind()
하위 종료
< 형식 runat="서버" >
< asp:DataList id="DataList1"
runat="서버"
반복열="1"
반복방향="수직"
RepeatLayout="흐름"
DataSource="< %# DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand" >
<헤더템플릿>
위치 이름 < /HeaderTemplate >
<항목 템플릿>
< %# DataSet1.FieldValue("LOCATION_NAME", 컨테이너) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >
< /ItemTemplate >
< AlternatingItemTemplate >< 글꼴 색상="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", 컨테이너) % >
< /글꼴 >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
<SelectedItemTemplate>주소:
< %# DataSet1.FieldValue("ADDRESS", 컨테이너) % >
<BR>
도시:
< %# DataSet1.FieldValue("CITY", 컨테이너) % >
<BR>
전화:
< %# DataSet1.FieldValue("TELEPHONE", 컨테이너) % >
<BR>
< asp:LinkButton BackColor="#FFFFFF" CommandName="닫기" ForeColor="#000000" ID="닫기" runat="서버" Text="닫기" >< /asp:LinkButton >
< /SelectedItemTemplate >
< /asp:데이터목록 >
< /양식>
DataList에는 주로 데이터 업데이트에 사용되는 Edit Item용 템플릿도 있습니다. 이 책은 다음 섹션에서 소개하겠습니다.
