DataList 컨트롤을 사용하여 행마다 여러 레코드 표시(VB)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

이 짧은 자습서에서는 RepeatColumns 및 RepeatDirection 속성을 통해 DataList의 레이아웃을 사용자 지정하는 방법을 살펴봅니다.

소개

지난 두 자습서에서 살펴본 DataList 예제는 데이터 원본의 각 레코드를 단일 열 HTML <table>의 행으로 렌더링했습니다. 기본 DataList 동작이지만 데이터 원본 항목이 여러 열의 다중 행 테이블에 분산되도록 DataList 디스플레이를 쉽게 사용자 지정할 수 있습니다. 또한 모든 데이터 원본 항목을 단일 행의 다중 열 DataList에 표시할 수 있습니다.

및 속성을 통해 DataList 레이아웃을 RepeatColumnsRepeatDirection 사용자 지정할 수 있습니다. 각각 렌더링되는 열 수와 해당 항목이 세로 또는 가로로 배치되는지 여부를 나타냅니다. 예를 들어 그림 1은 세 개의 열이 있는 테이블에 제품 정보를 표시하는 DataList를 보여 줍니다.

DataList는 행당 세 개의 제품을 표시합니다.

그림 1: DataList는 행당 세 개의 제품을 표시합니다(전체 크기 이미지를 보려면 클릭).

행당 여러 데이터 원본 항목을 표시하면 DataList가 가로 화면 공간을 보다 효과적으로 활용할 수 있습니다. 이 짧은 자습서에서는 이러한 두 DataList 속성을 살펴보겠습니다.

1단계: DataList에 제품 정보 표시

및 RepeatDirection 속성을 검사 RepeatColumns 하기 전에 먼저 표준 단일 열, 여러 행 테이블 레이아웃을 사용하여 제품 정보를 나열하는 DataList를 페이지에 만들어 보겠습니다. 이 예제에서는 다음 태그를 사용하여 제품의 이름, 범주 및 가격을 표시해 보겠습니다.

<h4>Product Name</h4>
Available in the Category Name store for Price

이전 예제에서 DataList에 데이터를 바인딩하는 방법을 살펴보았으므로 이러한 단계를 신속하게 진행하겠습니다. 먼저 폴더에서 RepeatColumnAndDirection.aspxDataListRepeaterBasics 페이지를 열고 도구 상자에서 Designer 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>

반환된 값의 형식을 통화로 지정하는 의 데이터 바인딩 구문에 UnitPrice형식 지정자를 Eval 포함했습니다.Eval("UnitPrice", "{0:C}").

잠시 시간을 내어 브라우저에서 페이지를 방문하세요. 그림 2에서 알 수 있듯이 DataList는 제품의 단일 열 다중 행 테이블로 렌더링됩니다.

기본적으로 DataList는 단일 열 다중 행 테이블로 렌더링됩니다.

그림 2: 기본적으로 DataList는 단일 열, 다중 행 테이블로 렌더링됩니다(전체 크기 이미지를 보려면 클릭).

2단계: DataList 레이아웃 방향 변경

DataList의 기본 동작은 단일 열 다중 행 테이블에 항목을 세로로 배치하는 것이지만 이 동작은 DataList의 RepeatDirection 속성을 통해 쉽게 변경할 수 있습니다. 속성은 RepeatDirection 또는 Vertical (기본값) 두 가지 Horizontal 가능한 값 중 하나를 허용할 수 있습니다.

속성을 에서 Vertical 로 Horizontal변경 RepeatDirection 하여 DataList는 해당 레코드를 단일 행으로 렌더링하여 데이터 원본 항목당 하나의 열을 만듭니다. 이 효과를 설명하려면 Designer DataList를 클릭한 다음, 속성 창 속성을 에서 Vertical 로 Horizontal변경 RepeatDirection 합니다. 이 작업을 수행하는 즉시 Designer DataList의 레이아웃을 조정하여 단일 행 다중 열 인터페이스를 만듭니다(그림 3 참조).

RepeatDirection 속성은 DataList 항목이 배치되는 방향을 지정합니다.

그림 3: 속성은 RepeatDirection DataList 항목이 배치되는 방향을 지정합니다(전체 크기 이미지를 보려면 클릭).

소량의 데이터를 표시할 때 단일 행 다중 열 테이블은 화면 공간을 최대화하는 이상적인 방법일 수 있습니다. 그러나 더 많은 양의 데이터의 경우 단일 행에는 화면에 맞지 않는 항목을 오른쪽으로 푸시하는 수많은 열이 필요합니다. 그림 4는 단일 행 DataList에서 렌더링될 때의 제품을 보여 줍니다. 많은 제품(80개 이상)이 있으므로 사용자는 각 제품에 대한 정보를 보려면 오른쪽으로 멀리 스크롤해야 합니다.

충분히 큰 데이터 원본의 경우 단일 열 DataList에는 가로 스크롤이 필요합니다.

그림 4: 충분히 큰 데이터 원본의 경우 단일 열 DataList에 가로 스크롤이 필요합니다(전체 크기 이미지를 보려면 클릭).

3단계: 다중 열 다중 행 테이블에 데이터 표시

다중 열, 여러 행 DataList를 만들려면 속성을 표시할 열 수로 설정 RepeatColumns 해야 합니다. 기본적으로 RepeatColumns 속성은 0으로 설정되므로 DataList는 속성 값 RepeatDirection 에 따라 모든 항목을 단일 행 또는 열에 표시합니다.

이 예제에서는 테이블 행당 세 개의 제품을 표시해 보겠습니다. 따라서 속성을 3으로 설정합니다 RepeatColumns . 이 변경 후 잠시 시간을 내어 브라우저에서 결과를 봅니다. 그림 5에서 알 수 있듯이 제품은 이제 3열의 여러 행 테이블에 나열됩니다.

행당 세 개의 제품이 표시됩니다.

그림 5: 행당 세 개의 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).

속성은 RepeatDirection DataList의 항목을 배치하는 방법에 영향을 줍니다. 그림 5는 속성이 로 RepeatDirection 설정된 Horizontal결과를 보여줍니다. 처음 세 가지 제품 차이, 장, 아니세드 시럽은 왼쪽에서 오른쪽으로, 위에서 아래로 배치됩니다. 다음 세 가지 제품(안톤 케이준 시밍 셰프부터 시작)이 처음 3개 아래에 연속으로 표시됩니다. RepeatDirection 그러나 속성을 로 다시 Vertical변경하면 그림 6과 같이 이러한 제품이 위에서 아래로, 왼쪽에서 오른쪽으로 배치됩니다.

여기서 제품은 수직으로 배치됩니다.

그림 6: 여기에서 제품은 세로로 배치됩니다(전체 크기 이미지를 보려면 클릭).

결과 테이블에 표시되는 행 수는 DataList에 바인딩된 총 레코드 수에 따라 달라집니다. 정확하게는 총 데이터 원본 항목 수의 최대값을 속성 값으로 나눈 값입니다 RepeatColumns . Products 테이블에는 현재 84개의 제품이 있으므로 3으로 나눌 수 있으므로 28개의 행이 있습니다. 데이터 원본의 항목 수와 RepeatColumns 속성 값을 나눌 수 없는 경우 마지막 행 또는 열에 빈 셀이 있습니다. 가 RepeatDirection 로 Vertical설정되면 마지막 열에 빈 셀이 있습니다. 가 이Horizontal면 RepeatDirection 마지막 행에 빈 셀이 있습니다.

요약

기본적으로 DataList는 단일 TemplateField를 사용하여 GridView의 레이아웃을 모방하는 단일 열 다중 행 테이블에 해당 항목을 나열합니다. 이 기본 레이아웃은 허용되지만 행당 여러 데이터 원본 항목을 표시하여 화면 공간을 최대화할 수 있습니다. 이 작업을 수행하는 것은 DataList의 RepeatColumns 속성을 행당 표시할 열 수로 설정하는 문제일 뿐입니다. 또한 DataList의 RepeatDirection 속성을 사용하여 다중 열, 여러 행 테이블의 내용을 왼쪽에서 오른쪽으로, 위에서 아래로 또는 세로로, 위에서 아래로, 왼쪽에서 오른쪽으로 배치해야 하는지 여부를 나타낼 수 있습니다.

저자 정보

7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 2.0 24 시간. 그는 에서 찾을 수있는 그의 블로그를 통해 또는 에 mitchell@4GuysFromRolla.comhttp://ScottOnWriting.NET도달 할 수 있습니다.

특별 감사

이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 John Suru였습니다. 예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.

이전다음