작성자: 스콧 미첼
이 짧은 자습서에서는 RepeatColumns 및 RepeatDirection 속성을 통해 DataList의 레이아웃을 사용자 지정하는 방법을 살펴봅니다.
소개
지난 두 자습서에서 살펴본 DataList 예제는 데이터 원본의 각 레코드를 단일 열 HTML <table>의 행으로 렌더링했습니다. 기본 DataList 동작이지만 데이터 원본 항목이 여러 열의 다중 행 테이블에 분산되도록 DataList 표시를 사용자 지정하는 것은 매우 쉽습니다. 또한 모든 데이터 원본 항목을 단일 행의 다중 열 DataList에 표시할 수 있습니다.
DataList의 레이아웃과 RepeatColumns 속성을 통해 RepeatDirection 사용자 지정할 수 있습니다. 이 레이아웃은 각각 렌더링되는 열 수와 해당 항목이 세로 또는 가로로 배치되는지 여부를 나타냅니다. 예를 들어 그림 1은 세 개의 열이 있는 테이블에 제품 정보를 표시하는 DataList를 보여 줍니다.
그림 1: DataList는 행당 세 개의 제품을 보여 줍니다(전체 크기 이미지를 보려면 클릭).
행당 여러 데이터 원본 항목을 표시하여 DataList는 가로 화면 공간을 보다 효과적으로 활용할 수 있습니다. 이 짧은 자습서에서는 이러한 두 DataList 속성을 살펴보겠습니다.
1단계: DataList에 제품 정보 표시
RepeatColumns 및 RepeatDirection 속성을 검사하기 전에, 표준 단일 열 다중 행 테이블 레이아웃을 사용하여 제품 정보를 나열하는 DataList를 페이지에 만들어 봅시다. 이 예제에서는 다음 태그를 사용하여 제품 이름, 범주 및 가격을 표시해 보겠습니다.
<h4>Product Name</h4>
Available in the Category Name store for Price
이전 예제에서는 데이터를 DataList에 바인딩하는 방법을 살펴보았으므로 이 단계를 신속하게 진행하겠습니다. 먼저 RepeatColumnAndDirection.aspx 폴더에서 DataListRepeaterBasics 페이지를 열고, 도구 상자에서 DataList를 디자이너로 끌어옵니다. DataList의 스마트 태그에서 새 ObjectDataSource를 만들고, ProductsBLL 클래스의 GetProducts 메서드에서 데이터를 가져오도록 구성하며, 마법사의 INSERT, UPDATE, DELETE 탭에서 (없음) 옵션을 선택합니다.
새 ObjectDataSource를 만들고 DataList에 바인딩한 후 Visual Studio는 각 제품 데이터 필드의 이름과 값을 표시하는 개체를 자동으로 만듭니 ItemTemplate 다.
ItemTemplate을 위에 표시된 마크업을 사용하여 조정합니다. 이는 DataList 스마트 태그의 선언적 마크업을 통해 직접 또는 템플릿 편집 옵션을 사용하여 가능합니다. 그런 다음 제품 이름, 범주 이름, 가격 텍스트를 적절한 데이터 바인딩 구문을 사용하여 해당 Text 속성에 값을 할당하는 레이블 컨트롤로 변경합니다. 업데이트한 ItemTemplate후 페이지의 선언적 태그는 다음과 유사하게 표시됩니다.
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>'></asp:Label>
</h4>
Available in the
<asp:Label runat="server" ID="CategoryNameLabel"
Text='<%# Eval("CategoryName") %>' />
store for
<asp:Label runat="server" ID="UnitPriceLabel"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
반환된 값을 통화로 서식 지정하는 형식 지정자를 Eval 데이터 바인딩 구문에 UnitPrice포함했습니다. Eval("UnitPrice", "{0:C}").
잠시 브라우저에서 페이지를 방문하세요. 그림 2와 같이 DataList는 제품의 단일 열 다중 행 테이블로 렌더링됩니다.
그림 2: 기본적으로 DataList는 단일 열, 다중 행 테이블로 렌더링됩니다(전체 크기 이미지를 보려면 클릭).
2단계: DataList의 레이아웃 방향 변경
DataList의 기본 동작은 단일 열 다중 행 테이블에 항목을 세로로 배치하는 것이지만 이 동작은 DataList 속성을RepeatDirection 통해 쉽게 변경할 수 있습니다. 속성은 RepeatDirection 두 가지 가능한 값 Horizontal 중 하나 또는 Vertical (기본값) 중 하나를 허용할 수 있습니다.
RepeatDirection 속성을 Vertical에서 Horizontal로 변경함으로써 DataList는 레코드를 한 줄로 렌더링하여 데이터 원본 항목마다 하나의 열을 생성합니다. 이 효과를 보여 주려면 디자이너에서 DataList를 클릭하고, 속성 창에서 RepeatDirection 속성을 Vertical에서 Horizontal로 변경합니다. 이 작업을 수행하는 즉시 디자이너는 DataList의 레이아웃을 조정하여 단일 행 다중 열 인터페이스를 만듭니다(그림 3 참조).
그림 3: 속성에 RepeatDirection 따라 DataList 항목이 배치되는 방향이 결정됩니다(전체 크기 이미지를 보려면 클릭).
적은 양의 데이터를 표시할 때 단일 행 다중 열 테이블은 화면 공간을 최대화하는 이상적인 방법일 수 있습니다. 그러나 더 많은 양의 데이터의 경우 단일 행에는 수많은 열이 필요하며, 이 열은 화면에 맞지 않는 항목을 오른쪽으로 밀어 줍니다. 그림 4는 단일 행 DataList에서 렌더링될 때의 제품을 보여 줍니다. 많은 제품(80개 이상)이 있으므로 사용자는 각 제품에 대한 정보를 보려면 오른쪽으로 멀리 스크롤해야 합니다.
그림 4: 충분히 큰 데이터 원본의 경우 단일 열 DataList에 가로 스크롤이 필요합니다(전체 크기 이미지를 보려면 클릭).
3단계: 다중 열 다중 행 테이블에 데이터 표시
다중 열과 행으로 구성된 DataList를 만들기 위해 RepeatColumns 속성은 0으로 설정되므로 DataList는 속성 값 RepeatDirection 에 따라 모든 항목을 단일 행 또는 열에 표시합니다.
이 예제에서는 테이블 행당 세 개의 제품을 표시해 보겠습니다. 따라서 속성을 3으로 설정합니다 RepeatColumns . 이 변경을 수행한 후 잠시 시간을 내어 브라우저에서 결과를 봅니다. 그림 5에서 알 수 있듯이 제품은 이제 3열의 다중 행 테이블에 나열됩니다.
그림 5: 행당 세 개의 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).
이 속성은 RepeatDirection DataList의 항목이 배치되는 방식에 영향을 줍니다. 그림 5는 속성이 RepeatDirection로 설정된 Horizontal의 결과를 보여줍니다. 처음 세 가지 제품인 차이, 장, 아니세드 시럽은 왼쪽에서 오른쪽으로, 위에서 아래로 배치됩니다. 다음 세 가지 제품(안톤 케이준 시즈닝 셰프부터 시작)이 처음 3개 아래에 연속으로 표시됩니다.
RepeatDirection 그러나 속성을 다시 변경Vertical하면 그림 6에서 알 수 있듯이 이러한 제품이 위에서 아래로, 왼쪽에서 오른쪽으로 배치됩니다.
그림 6: 여기서 제품은 세로로 배치됩니다(전체 크기 이미지를 보려면 클릭).
결과 테이블에 표시되는 행 수는 DataList에 바인딩된 총 레코드 수에 따라 달라집니다. 정확하게, 총 데이터 원본 항목 수의 최대값을 속성 값으로 RepeatColumns 나눈 값입니다.
Products 테이블에는 현재 3으로 나눌 수 있는 84개의 제품이 있으므로 28개의 행이 있습니다. 데이터 원본의 항목 수와 RepeatColumns 속성 값을 나눌 수 없는 경우 마지막 행 또는 열에 빈 셀이 있습니다.
RepeatDirection 값이 Vertical로 설정되면 마지막 열에 빈 셀이 있으며, RepeatDirection가 Horizontal로 설정되면 마지막 행에 빈 셀이 있습니다.
요약
기본적으로 DataList는 단일 TemplateField를 사용하여 GridView의 레이아웃을 모방하는 단일 열 다중 행 테이블에 해당 항목을 나열합니다. 이 기본 레이아웃은 허용되지만 행당 여러 데이터 원본 항목을 표시하여 화면 공간을 최대화할 수 있습니다. 이 작업을 수행하는 것은 DataList의 RepeatColumns 속성을 행당 표시할 열 수로 설정하는 문제일 뿐입니다. 또한 DataList의 RepeatDirection 속성을 사용하여 다중 열, 다중 행 테이블의 내용을 왼쪽에서 오른쪽으로, 위에서 아래로 또는 위에서 아래로, 왼쪽에서 오른쪽으로 세로로 배치해야 하는지 여부를 나타낼 수 있습니다.
작성자 정보
7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 Sams Teach Yourself ASP.NET 2.0 in 24 Hours입니다. 그에게 mitchell@4GuysFromRolla.com으로 연락할 수 있습니다.
특별히 감사드립니다.
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 John Suru였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 mitchell@4GuysFromRolla.com으로 메시지를 보내 주세요.