DataList 컨트롤을 사용하여 행마다 여러 레코드 표시(VB)Showing Multiple Records per Row with the DataList Control (VB)

Scott Mitchellby Scott Mitchell

샘플 앱 다운로드 또는 PDF 다운로드Download Sample App or Download PDF

이 간단한 자습서에서는 RepeatColumns 및 RepeatDirection 속성을 통해 DataList의 레이아웃을 사용자 지정 하는 방법을 알아봅니다.In this short tutorial we'll explore how to customize the DataList's layout through its RepeatColumns and RepeatDirection properties.

소개Introduction

이전 두 자습서에서 살펴본 DataList 예제는 데이터 원본의 각 레코드를 단일 열 HTML <table>의 행으로 렌더링 했습니다.The DataList examples we ve seen in the past two tutorials have rendered each record from its data source as a row in a single-column HTML <table>. 이는 기본 DataList 동작 이지만 데이터 원본 항목이 다중 열 다중 행 테이블에 분산 되도록 DataList 표시를 쉽게 사용자 지정할 수 있습니다.While this is the default DataList behavior, it is very easy to customize the DataList display such that the data source items are spread across a multi-column, multi-row table. 또한 모든 데이터 원본 항목이 단일 행, 다중 열 DataList에 표시 될 수 있습니다.Moreover, it s possible to have all of the data source items displayed in a single-row, multi-column DataList.

RepeatColumnsRepeatDirection 속성을 통해 DataList s 레이아웃을 사용자 지정할 수 있으며,이 속성은 렌더링 되는 열 수와 해당 항목이 세로 또는 가로로 배치 되는지 여부를 나타냅니다.We can customize the DataList s layout through its RepeatColumns and RepeatDirection properties, which, respectively, indicate how many columns are rendered and whether those items are laid out vertically or horizontally. 예를 들어 그림 1에는 세 개의 열이 있는 테이블에 제품 정보를 표시 하는 DataList가 표시 됩니다.Figure 1, for example, shows a DataList that displays product information in a table with three columns.

DataList 행당 세 가지 제품을 표시 합니다.The DataList Shows Three Products per Row

그림 1: DataList는 행당 세 가지 제품을 보여 줍니다 (전체 크기 이미지를 보려면 클릭).Figure 1: The DataList Shows Three Products per Row (Click to view full-size image)

DataList는 행당 여러 데이터 원본 항목을 표시 하 여 가로 화면 공간을 보다 효율적으로 활용할 수 있습니다.By showing multiple data source items per row, the DataList can more effectively utilize horizontal screen space. 이 간단한 자습서에서는 이러한 두 DataList 속성을 살펴봅니다.In this short tutorial we'll explore these two DataList properties.

1 단계: DataList에서 제품 정보 표시Step 1: Displaying Product Information in a DataList

RepeatColumnsRepeatDirection 속성을 검사 하기 전에 먼저 표준 단일 열 다중 행 테이블 레이아웃을 사용 하 여 제품 정보를 나열 하는 DataList를 페이지에 만듭니다.Before we examine the RepeatColumns and RepeatDirection properties, let s first create a DataList on our page that lists product information using the standard single-column, multi-row table layout. 이 예에서는 다음 태그를 사용 하 여 제품 이름, 범주 및 가격을 표시 합니다.For this example, let s display the product s name, category, and price using the following markup:

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

이전 예제에서 DataList에 데이터를 바인딩하는 방법을 알아보았습니다. 따라서 이러한 단계를 빠르게 진행 합니다.We ve seen how to bind data to a DataList in previous examples, so I'll move through these steps quickly. 먼저 DataListRepeaterBasics 폴더에서 RepeatColumnAndDirection.aspx 페이지를 열고 DataList를 도구 상자에서 디자이너로 끌어 옵니다.Start by opening the RepeatColumnAndDirection.aspx page in the DataListRepeaterBasics folder and drag a DataList from the Toolbox onto the Designer. DataList s 스마트 태그에서 새 ObjectDataSource를 만들어 ProductsBLL 클래스 s GetProducts 메서드에서 데이터를 가져오도록 구성 하 고 마법사의 삽입, 업데이트 및 삭제 탭에서 (없음) 옵션을 선택 합니다.From the DataList s smart tag, opt to create a new ObjectDataSource and configure it to pull its data from the ProductsBLL class s GetProducts method, choosing the (None) option from the wizard s INSERT, UPDATE, and DELETE tabs.

새 ObjectDataSource를 만들어 DataList에 바인딩한 후 Visual Studio에서 각 제품 데이터 필드의 이름과 값을 표시 하는 ItemTemplate을 자동으로 만듭니다.After creating and binding the new ObjectDataSource to the DataList, Visual Studio will automatically create an ItemTemplate that displays the name and value for each of the product data fields. 위에 표시 된 태그를 사용 하도록 해당 데이터 바인딩 구문을 사용 하 여 해당 Text 속성에 값을 할당 하는 레이블 컨트롤로 Product name, Category NamePrice 텍스트를 대체 하 여 선언적 태그를 통해 직접 ItemTemplate를 조정 하거나 DataList s 스마트 태그의 템플릿 편집 옵션을 사용 합니다.Adjust the ItemTemplate either directly through the declarative markup or from the Edit Templates option in the DataList s smart tag so that it uses the markup shown above, replacing the Product Name, Category Name, and Price text with Label controls that use the appropriate databinding syntax to assign values to their Text properties. ItemTemplate를 업데이트 한 후 페이지의 선언적 태그가 다음과 같이 표시 됩니다.After updating the ItemTemplate, your page s declarative markup should look similar to the following:

<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}"). 통화로 서식 지정 합니다.Notice that I ve included a format specifier in the Eval databinding syntax for the UnitPrice, formatting the returned value as a currency - Eval("UnitPrice", "{0:C}").

잠시 시간을 들 여 브라우저에서 페이지를 방문 하세요.Take a moment to visit your page in a browser. 그림 2에 나와 있는 것 처럼 DataList는 단일 열 다중 행 테이블로 렌더링 됩니다.As Figure 2 shows, the DataList renders as a single-column, multi-row table of products.

기본적으로 DataList는 단일 열 다중 행 테이블로 렌더링 됩니다.By Default, the DataList Renders as a Single-Column, Multi-Row Table

그림 2: 기본적으로 DataList는 단일 열 다중 행 테이블로 렌더링 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 2: By Default, the DataList Renders as a Single-Column, Multi-Row Table (Click to view full-size image)

2 단계: DataList s 레이아웃 방향 변경Step 2: Changing the DataList s Layout Direction

DataList의 기본 동작은 단일 열 다중 행 테이블에서 항목을 세로로 레이아웃 하는 것 이지만이 동작은 DataList s RepeatDirection 속성을 통해 쉽게 변경할 수 있습니다.While the default behavior for the DataList is to lay out its items vertically in a single-column, multi-row table, this behavior can easily be changed through the DataList s RepeatDirection property. RepeatDirection 속성은 Horizontal 또는 Vertical (기본값)의 두 가지 가능한 값 중 하나를 사용할 수 있습니다.The RepeatDirection property can accept one of two possible values: Horizontal or Vertical (the default).

DataList는 RepeatDirection 속성을 Vertical에서 Horizontal으로 변경 하 여 데이터 원본 항목당 하나의 열을 만들어 해당 레코드를 단일 행으로 렌더링 합니다.By changing the RepeatDirection property from Vertical to Horizontal, the DataList renders its records in a single row, creating one column per data source item. 이러한 효과를 보여 주려면 디자이너에서 DataList를 클릭 한 다음 속성 창에서 RepeatDirection 속성을 Vertical에서 Horizontal로 변경 합니다.To illustrate this effect, click on the DataList in the Designer and then, from the Properties window, change the RepeatDirection property from Vertical to Horizontal. 이렇게 하면 디자이너에서 DataList s 레이아웃을 조정 하 여 단일 행의 다중 열 인터페이스를 만듭니다 (그림 3 참조).Immediately upon doing so, the Designer adjusts the DataList s layout, creating a single-row, multi-column interface (see Figure 3).

RepeatDirection 속성 DataList 항목의 레이아웃 방향을 결정 합니다.The RepeatDirection Property Dictates How the Direction the DataList s Items are Laid Out

그림 3: RepeatDirection 속성은 DataList 항목의 레이아웃 방향을 결정 합니다 (전체 크기 이미지를 보려면 클릭).Figure 3: The RepeatDirection Property Dictates How the Direction the DataList s Items are Laid Out (Click to view full-size image)

적은 양의 데이터를 표시할 때 단일 행의 다중 열 테이블이 화면 부동산을 최대화 하는 이상적인 방법일 수 있습니다.When displaying small amounts of data, a single-row, multi-column table might be an ideal way to maximize screen real estate. 그러나 큰 데이터 볼륨의 경우 단일 행에는 여러 열이 필요 하며,이는 화면에 맞출 수 있는 항목을 오른쪽으로 밀어 넣는 것입니다.For larger volumes of data, however, a single row will require numerous columns, which pushes those items that can t fit on the screen off to the right. 그림 4는 단일 행 DataList에서 렌더링 되는 제품을 보여 줍니다.Figure 4 shows the products when rendered in a single-row DataList. 많은 제품이 있으므로 (80 초과) 사용자는 각 제품에 대 한 정보를 보기 위해 오른쪽으로 스크롤해야 합니다.Since there are many products (over 80), the user will have to scroll far to the right to view information about each of the products.

충분 한 크기의 데이터 원본에 대 한 단일 열 DataList는 가로 스크롤이 필요 합니다.For Sufficiently Large Data Sources, a Single Column DataList Will Require Horizontal Scrolling

그림 4: 충분 한 큰 데이터 원본의 경우 단일 열 DataList에 가로 스크롤이 필요 합니다 (전체 크기 이미지를 보려면 클릭).Figure 4: For Sufficiently Large Data Sources, a Single Column DataList Will Require Horizontal Scrolling (Click to view full-size image)

3 단계: 다중 열 다중 행 테이블에서 데이터 표시Step 3: Displaying Data in a Multi-Column, Multi-Row Table

다중 열 다중 행 DataList를 만들려면 RepeatColumns 속성 을 표시할 열 수로 설정 해야 합니다.To create a multi-column, multi-row DataList, we need to set the RepeatColumns property to the number of columns to display. 기본적으로 RepeatColumns 속성은 0으로 설정 됩니다. 그러면 DataList가 RepeatDirection 속성의 값에 따라 단일 행 이나 열에 모든 항목을 표시 합니다.By default, the RepeatColumns property is set to 0, which will cause the DataList to display all of its items in a single row or a column (depending on the value of the RepeatDirection property).

이 예에서는 테이블 행당 세 가지 제품을 표시 합니다.For our example, let s display three products per table row. 따라서 RepeatColumns 속성을 3으로 설정 합니다.Therefore, set the RepeatColumns property to 3. 이렇게 변경한 후에는 잠시 후 브라우저에서 결과를 확인 합니다.After making this change, take a moment to view the results in a browser. 그림 5와 같이 이제 제품이 3 개의 열로 된 다중 행 테이블에 나열 됩니다.As Figure 5 shows, the products are now listed in a three-column, multi-row table.

3 개 제품이 행당 표시 됩니다.Three Products are Displayed per Row

그림 5: 행 마다 세 개의 제품이 표시 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 5: Three Products are Displayed per Row (Click to view full-size image)

RepeatDirection 속성은 DataList의 항목이 배치 되는 방법에 영향을 줍니다. 그림 5는 RepeatDirection 속성이 Horizontal로 설정 된 결과를 보여 줍니다.The RepeatDirection property affects how the items in the DataList are laid out. Figure 5 shows the results with the RepeatDirection property set to Horizontal. 처음 세 개 제품 Chai, 파일과 및 Aniseed Syrup은 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 배치 됩니다.Note that the first three products Chai, Chang, and Aniseed Syrup are laid out from left to right, top to bottom. 다음 세 가지 제품 (Chef Anton s Cajun Seasoning부터 시작)은 처음 3 개의 행 아래에 나타납니다.The next three products (starting with Chef Anton s Cajun Seasoning) appear in a row beneath the first three. 그러나 RepeatDirection 속성을 다시 Vertical으로 변경 하면 그림 6에서 보여 주는 것 처럼 위에서 아래로, 왼쪽에서 오른쪽으로 이러한 제품을 레이아웃 합니다.Changing the RepeatDirection property back to Vertical, however, lays out these products from top to bottom, left to right, as Figure 6 illustrates.

여기 제품은 세로로 배치 됩니다.Here, the Products are Laid Out Vertically

그림 6: 여기에서 제품이 세로로 배치 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 6: Here, the Products are Laid Out Vertically (Click to view full-size image)

결과 테이블에 표시 되는 행 수는 DataList에 바인딩된 총 레코드 수에 따라 달라 집니다.The number of rows displayed in the resulting table depends on the number of total records bound to the DataList. 정확 하 게,이 값은 RepeatColumns 속성 값으로 나눈 총 데이터 원본 항목 수의 상한입니다.Precisely, it s the ceiling of the total number of data source items divided by the RepeatColumns property value. Products 테이블에는 현재 3으로 나눌 수 있는 84 제품이 있으므로 28 개 행이 있습니다.Since the Products table currently has 84 products, which is divisible by 3, there are 28 rows. 데이터 원본의 항목 수와 RepeatColumns 속성 값을 나눌 수 없는 경우 마지막 행 또는 열에 빈 셀이 포함 됩니다.If the number of items in the data source and the RepeatColumns property value are not divisible, then the last row or column will have blank cells. RepeatDirectionVertical로 설정 하면 마지막 열에 빈 셀이 포함 됩니다. RepeatDirection Horizontal되 면 마지막 행에 빈 셀이 포함 됩니다.If the RepeatDirection is set to Vertical, then the last column will have empty cells; if RepeatDirection is Horizontal, then the last row will have the empty cells.

요약Summary

기본적으로 DataList는 단일 열 다중 행 테이블에 항목을 나열 하며이는 단일 Templatefield로 변환를 사용 하 여 GridView의 레이아웃을 모방 합니다.The DataList, by default, lists its items in a single-column, multi-row table, which mimics the layout of a GridView with a single TemplateField. 이 기본 레이아웃은 허용 되지만 행 마다 여러 데이터 원본 항목을 표시 하 여 화면 부동산을 최대화할 수 있습니다.While this default layout is acceptable, we can maximize screen real estate by displaying multiple data source items per row. 이를 수행 하려면 DataList s RepeatColumns 속성을 행당 표시할 열 수로 설정 하면 됩니다.Accomplishing this is simply a matter of setting the DataList s RepeatColumns property to the number of columns to display per row. 또한 DataList s RepeatDirection 속성을 사용 하 여 여러 열로 된 다중 행 테이블의 콘텐츠를 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로, 왼쪽에서 오른쪽으로 왼쪽에서 오른쪽으로 배치 해야 하는지 여부를 나타낼 수 있습니다.Additionally, the DataList s RepeatDirection property can be used to indicate whether the contents of the multi-column, multi-row table should be laid out horizontally from left to right, top to bottom or vertically from top to bottom, left to right.

저자 정보About the Author

Scott Mitchell(7 개의 ASP/ASP. NET books 및 4GuysFromRolla.com창립자)은 1998부터 Microsoft 웹 기술을 사용 하 여 작업 했습니다.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott은 독립 컨설턴트, 강사 및 기록기로 작동 합니다.Scott works as an independent consultant, trainer, and writer. 최신 책은 24 시간 이내에 ASP.NET 2.0을 sams teach yourself것입니다.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.com에 도달할 수 있습니다 .He can be reached at mitchell@4GuysFromRolla.com. 또는 블로그를 통해 http://ScottOnWriting.NET에서 찾을 수 있습니다.or via his blog, which can be found at http://ScottOnWriting.NET.

특별히 감사 합니다.Special Thanks To

이 자습서 시리즈는 많은 유용한 검토자가 검토 했습니다.This tutorial series was reviewed by many helpful reviewers. 이 자습서의 리드 검토자는 John Suru입니다.Lead reviewer for this tutorial was John Suru. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.