DataList 및 반복기 컨트롤을 사용하여 데이터 표시(VB)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

이전 자습서에서는 GridView 컨트롤을 사용하여 데이터를 표시했습니다. 이 자습서부터는 이러한 컨트롤을 사용하여 데이터를 표시하는 기본 사항부터 시작하여 DataList 및 Repeater 컨트롤을 사용하여 일반적인 보고 패턴을 빌드하는 것을 살펴봅니다.

소개

지난 28개 자습서의 모든 예제에서 데이터 원본의 여러 레코드를 표시해야 하는 경우 GridView 컨트롤로 전환했습니다. GridView는 데이터 원본의 각 레코드에 대한 행을 렌더링하여 레코드의 데이터 필드를 열에 표시합니다. GridView를 사용하면 데이터를 표시, 페이지 통과, 정렬, 편집 및 삭제할 수 있지만 모양은 약간 상자형입니다. 또한 GridView의 구조를 담당하는 태그는 각 레코드에 대해 테이블 행(<tr>)이 있는 HTML <table> 과 각 필드에 대한 테이블 셀(<td>)을 포함하는 수정되었습니다.

여러 레코드를 표시할 때 모양 및 렌더링된 태그에서 더 높은 수준의 사용자 지정을 제공하기 위해 ASP.NET 2.0은 DataList 및 Repeater 컨트롤을 제공합니다(둘 다 ASP.NET 버전 1.x에서도 사용 가능). DataList 및 Repeater 컨트롤은 BoundFields, CheckBoxFields, ButtonFields 등이 아닌 템플릿을 사용하여 콘텐츠를 렌더링합니다. GridView와 마찬가지로 DataList는 HTML <table>로 렌더링되지만 테이블 행당 여러 데이터 원본 레코드를 표시할 수 있습니다. 반면, 반복기는 명시적으로 지정한 태그보다 더 많은 태그를 렌더링하지 않으며, 내보낸 태그를 정확하게 제어해야 하는 경우에 이상적인 후보입니다.

다음 12개 정도 자습서에서는 이러한 컨트롤 템플릿을 사용하여 데이터를 표시하는 기본 사항부터 시작하여 DataList 및 Repeater 컨트롤을 사용하여 일반적인 보고 패턴을 빌드하는 것을 살펴보겠습니다. 이러한 컨트롤의 서식을 지정하는 방법, DataList에서 데이터 원본 레코드의 레이아웃을 변경하는 방법, 일반적인 master/세부 정보 시나리오, 데이터를 편집 및 삭제하는 방법, 레코드를 페이지스하는 방법 등을 살펴보겠습니다.

1단계: DataList 및 반복기 자습서 웹 페이지 추가

이 자습서를 시작하기 전에 먼저 이 자습서에 필요한 ASP.NET 페이지와 DataList 및 Repeater를 사용하여 데이터 표시를 다루는 다음 몇 가지 자습서를 추가해 보겠습니다. 먼저 라는 DataListRepeaterBasics프로젝트에 새 폴더를 만듭니다. 다음으로, 다음 5개의 ASP.NET 페이지를 이 폴더에 추가하여 모두 master 페이지를 Site.master사용하도록 구성합니다.

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

DataListRepeaterBasics 폴더 만들기 및 자습서 ASP.NET 페이지 추가

그림 1: 폴더 만들기 DataListRepeaterBasics 및 자습서 ASP.NET 페이지 추가

Default.aspx 페이지를 열고 폴더에서 SectionLevelTutorialListing.ascx 디자인 화면으로 사용자 컨트롤 UserControls 을 끕니다. 마스터 페이지 및 사이트 탐색 자습서에서 만든 이 사용자 컨트롤은 사이트 맵을 열거하고 현재 섹션의 자습서를 글머리 기호 목록에 표시합니다.

SectionLevelTutorialListing.ascx 사용자 컨트롤을 추가하여 Default.aspx

그림 2: 사용자 컨트롤을 SectionLevelTutorialListing.ascx 에 Default.aspx 추가합니다(전체 크기 이미지를 보려면 클릭).

글머리 기호 목록에 만들 DataList 및 Repeater 자습서가 표시되도록 하려면 사이트 맵에 추가해야 합니다. Web.sitemap 파일을 열고 사용자 지정 단추 추가 사이트 맵 노드 태그 다음에 다음 태그를 추가합니다.

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

새 ASP.NET 페이지를 포함하도록 사이트 맵 업데이트

그림 3: 새 ASP.NET 페이지를 포함하도록 사이트 맵 업데이트

2단계: DataList를 사용하여 제품 정보 표시

FormView와 마찬가지로 DataList 컨트롤의 렌더링된 출력은 BoundFields, CheckBoxFields 등이 아닌 템플릿에 따라 달라집니다. FormView와 달리 DataList는 단독 레코드가 아닌 레코드 집합을 표시하도록 설계되었습니다. 이 자습서에서는 제품 정보를 DataList에 바인딩하는 방법을 살펴보겠습니다. 먼저 폴더에서 Basics.aspxDataListRepeaterBasics 페이지를 엽니다. 그런 다음 도구 상자에서 Designer DataList를 끌어옵니다. 그림 4에서 알 수 있듯이 DataList 템플릿을 지정하기 전에 Designer 회색 상자로 표시합니다.

도구 상자에서 dataList를 Designer 끌어다 놓습니다.

그림 4: 도구 상자의 DataList를 Designer 끌어다 놓습니다(전체 크기 이미지를 보려면 클릭).

DataList의 스마트 태그에서 새 ObjectDataSource를 추가하고 클래스의 GetProducts 메서드를 ProductsBLL 사용하도록 구성합니다. 이 자습서에서는 읽기 전용 DataList를 만들기 때문에 마법사의 INSERT, UPDATE 및 DELETE 탭에서 드롭다운 목록을 (없음)으로 설정합니다.

새 ObjectDataSource 만들기 선택

그림 5: 새 ObjectDataSource 만들기 선택(전체 크기 이미지를 보려면 클릭)

ProductsBLL 클래스를 사용하도록 ObjectDataSource 구성

그림 6: 클래스를 사용하도록 ProductsBLL ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)

GetProducts 메서드를 사용하여 모든 제품에 대한 정보 검색

그림 7: 메서드를 사용하여 GetProducts 모든 제품에 대한 정보 검색(전체 크기 이미지를 보려면 클릭)

ObjectDataSource를 구성하고 스마트 태그를 통해 DataList와 연결한 후 Visual Studio는 데이터 원본에서 반환된 각 데이터 필드의 이름과 값을 표시하는 을 DataList에 자동으로 만듭니 ItemTemplate 다(아래 태그 참조). 이 기본 모양 ItemTemplate 은 Designer 통해 데이터 원본을 FormView에 바인딩할 때 자동으로 생성된 템플릿의 모양과 동일합니다.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

참고

FormView의 스마트 태그를 통해 데이터 원본을 FormView 컨트롤에 바인딩할 때 Visual Studio에서 , InsertItemTemplate및 EditItemTemplate을 ItemTemplate만들었습니다. 그러나 DataList를 사용하면 만 ItemTemplate 만들어집니다. DataList에 FormView에서 제공하는 동일한 기본 제공 편집 및 삽입 지원이 없기 때문입니다. DataList에는 편집 및 삭제 관련 이벤트가 포함되어 있으며 편집 및 삭제 지원은 약간의 코드로 추가할 수 있지만 FormView와 마찬가지로 간단한 기본 지원은 없습니다. 향후 자습서에서는 DataList를 사용하여 편집 및 삭제 지원을 포함하는 방법을 살펴보겠습니다.

잠시 시간을 내어 이 템플릿의 모양을 개선해 보겠습니다. 모든 데이터 필드를 표시하는 대신 제품 이름, 공급업체, 범주, 단위당 수량 및 단가만 표시해 보겠습니다. 또한 제목에 이름을 표시하고 제목 아래에 를 <h4> 사용하여 <table> 나머지 필드를 배치해 보겠습니다.

이러한 변경을 위해 DataList의 스마트 태그에서 Designer 템플릿 편집 기능을 사용하거나 템플릿 편집 링크를 클릭하거나 페이지의 선언적 구문을 통해 템플릿을 수동으로 수정할 수 있습니다. Designer 템플릿 편집 옵션을 사용하는 경우 결과 태그가 다음 태그와 정확히 일치하지 않을 수 있지만 브라우저를 통해 볼 때 그림 8에 표시된 스크린샷과 매우 유사합니다.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

참고

위의 예제에서는 속성에 Text 데이터 바인딩 구문 값이 할당된 Label Web 컨트롤을 사용합니다. 또는 레이블을 모두 생략하고 데이터 바인딩 구문만 입력할 수 있습니다. 즉, 를 사용하는 <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> 대신 선언적 구문을 <%# Eval("CategoryName") %>사용할 수 있습니다.

그러나 레이블 웹 컨트롤을 그대로 두면 두 가지 이점이 있습니다. 먼저 다음 자습서에서 볼 수 있듯이 데이터를 기반으로 데이터의 서식을 지정하는 더 쉬운 방법을 제공합니다. 둘째, Designer 템플릿 편집 옵션은 일부 웹 컨트롤 외부에 표시되는 선언적 데이터 바인딩 구문을 표시하지 않습니다. 대신 템플릿 편집 인터페이스는 정적 태그 및 웹 컨트롤을 쉽게 사용할 수 있도록 설계되었으며 웹 컨트롤 스마트 태그에서 액세스할 수 있는 DataBindings 편집 대화 상자를 통해 데이터 바인딩이 수행된다고 가정합니다.

따라서 Designer 통해 템플릿을 편집하는 옵션을 제공하는 DataList를 사용하는 경우 템플릿 편집 인터페이스를 통해 콘텐츠에 액세스할 수 있도록 레이블 웹 컨트롤을 사용하는 것이 좋습니다. 잠시 후에는 반복기에서 템플릿의 내용을 원본 보기에서 편집해야 합니다. 따라서 반복기의 템플릿을 만들 때 프로그래밍 논리에 따라 데이터 바인딩된 텍스트의 모양을 포맷해야 한다는 것을 알지 못하는 한 레이블 웹 컨트롤을 생략하는 경우가 많습니다.

각 제품의 출력은 DataList의 ItemTemplate을 사용하여 렌더링됩니다.

그림 8: 각 제품의 출력이 DataList를 ItemTemplate 사용하여 렌더링됨(전체 크기 이미지를 보려면 클릭)

3단계: DataList 모양 개선

GridView와 마찬가지로 DataList는 , AlternatingItemStyleForeColorSelectedItemStyleBackColorItemStyleCssClass등과 같은 Font다양한 스타일 관련 속성을 제공합니다. GridView 및 DetailsView 컨트롤을 사용할 때 테마에서 DataWebControls 이러한 두 컨트롤의 속성을 미리 정의한 스킨 파일과 CssClass 여러 하위 속성(RowStyle, HeaderStyle등)의 속성을 미리 정의 CssClass 했습니다. DataList에 대해 동일한 작업을 수행해 보겠습니다.

ObjectDataSource를 사용하여 데이터 표시 자습서에서 설명한 것처럼 스킨 파일은 웹 컨트롤의 기본 모양 관련 속성을 지정합니다. 테마는 웹 사이트의 특정 모양과 느낌을 정의하는 스킨, CSS, 이미지 및 JavaScript 파일의 컬렉션입니다. ObjectDataSource를 사용하여 데이터 표시 자습서에서는 현재 두 개의 스킨 파일 GridView.skin 인 및 DetailsView.skin가 있는 테마(폴더 내 App_Themes 의 폴더로 구현됨)를 만들었습니다DataWebControls. DataList에 대해 미리 정의된 스타일 설정을 지정하는 세 번째 스킨 파일을 추가해 보겠습니다.

스킨 파일을 추가하려면 폴더를 App_Themes/DataWebControls 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택한 다음 목록에서 스킨 파일 옵션을 선택합니다. 파일 이름을 DataList.skin로 지정합니다.

Default.skin이 새 스킨 파일 이름으로 입력된 새 항목 추가 창을 보여 주는 스크린샷

그림 9: 라는 DataList.skin 새 스킨 파일 만들기(전체 크기 이미지를 보려면 클릭)

파일에 대해 다음 태그를 DataList.skin 사용합니다.

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

이러한 설정은 GridView 및 DetailsView 컨트롤에 사용된 것과 동일한 CSS 클래스를 적절한 DataList 속성에 할당합니다. 여기서 DataWebControlStyle사용되는 CSS 클래스 , AlternatingRowStyle, RowStyle등은 파일에 정의 Styles.css 되어 있으며 이전 자습서에서 추가되었습니다.

이 스킨 파일을 추가하면 DataList의 모양이 Designer 업데이트됩니다(새 스킨 파일의 효과를 보려면 Designer 보기를 새로 고쳐야 할 수 있습니다. 보기 메뉴에서 새로 고침을 선택합니다.) 그림 10에서 볼 수 있듯이, 번갈아 가며 번갈아 가며 있는 각 제품은 연한 분홍색 배경색을 가집니다.

새 스킨 파일이 Designer DataList의 모양을 업데이트하는 방법을 보여 주는 스크린샷

그림 10: 라는 DataList.skin 새 스킨 파일 만들기(전체 크기 이미지를 보려면 클릭)

4단계: DataList의 기타 템플릿 탐색

DataList는 ItemTemplate외에도 6개의 다른 선택적 템플릿을 지원합니다.

  • HeaderTemplate 제공된 경우 는 출력에 헤더 행을 추가하고 이 행을 렌더링하는 데 사용됩니다.
  • AlternatingItemTemplate 교대로 항목을 렌더링하는 데 사용됩니다.
  • SelectedItemTemplate선택한 항목을 렌더링하는 데 사용됩니다. 선택한 항목은 인덱스가 DataList의 속성에 해당하는 항목입니다SelectedIndex.
  • EditItemTemplate 편집 중인 항목을 렌더링하는 데 사용됩니다.
  • SeparatorTemplate 제공된 경우 는 각 항목 사이에 구분 기호를 추가하고 이 구분 기호를 렌더링하는 데 사용됩니다.
  • FooterTemplate - 제공된 경우 출력에 바닥글 행을 추가하고 이 행을 렌더링하는 데 사용됩니다.

또는 FooterTemplate를 HeaderTemplate 지정할 때 DataList는 렌더링된 출력에 추가 머리글 또는 바닥글 행을 추가합니다. GridView의 머리글 및 바닥글 행과 마찬가지로 DataList의 머리글과 바닥글은 데이터에 바인딩되지 않습니다. 따라서 바인딩된 데이터에 액세스하려는 또는 FooterTemplate 의 데이터 바인딩 구문 HeaderTemplate 은 빈 문자열을 반환합니다.

참고

GridView 바닥글 자습서의 요약 정보 표시 자습서에서 살본 것처럼 머리글 및 바닥글 행은 데이터 바인딩 구문을 지원하지 않지만 데이터 관련 정보는 GridView의 RowDataBound 이벤트 처리기에서 이러한 행에 직접 삽입할 수 있습니다. 이 기술은 실행 합계 또는 컨트롤에 바인딩된 데이터에서 다른 정보를 계산하고 해당 정보를 바닥글에 할당하는 데 사용할 수 있습니다. 이 동일한 개념을 DataList 및 Repeater 컨트롤에 적용할 수 있습니다. 유일한 차이점은 DataList 및 Repeater의 경우 이벤트 대신 RowDataBound 이벤트에 대한 ItemDataBound 이벤트 처리기를 만드는 것입니다.

이 예제에서는 제목에 DataList 결과 맨 위에 제품 정보라는 제목을 <h3> 표시해 보겠습니다. 이렇게 하려면 적절한 태그를 사용하여 HeaderTemplate 을 추가합니다. Designer DataList 스마트 태그에서 템플릿 편집 링크를 클릭하고 드롭다운 목록에서 헤더 템플릿을 선택한 다음 스타일 드롭다운 목록에서 제목 3 옵션을 선택한 후 텍스트를 입력하여 수행할 수 있습니다(그림 11 참조).

텍스트 제품 정보를 사용하여 HeaderTemplate 추가

그림 11: 텍스트 제품 정보를 사용하여 을 HeaderTemplate 추가합니다(전체 크기 이미지를 보려면 클릭).

또는 태그 내에 <asp:DataList> 다음 태그를 입력하여 선언적으로 추가할 수 있습니다.

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

각 제품 목록 사이에 약간의 공간을 추가하려면 각 섹션 사이에 줄이 포함된 을 추가 SeparatorTemplate 해 보겠습니다. 가로 규칙 태그(<hr>)는 이러한 구분자를 추가합니다. SeparatorTemplate 다음 태그가 있도록 을 만듭니다.

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

참고

HeaderTemplate 및 와 FooterTemplates마찬가지로 는 SeparatorTemplate 데이터 원본의 레코드에 바인딩되지 않으므로 DataList에 바인딩된 데이터 원본 레코드에 직접 액세스할 수 없습니다.

이 추가를 수행한 후 브라우저를 통해 페이지를 볼 때 그림 12와 유사하게 표시됩니다. 머리글 행과 각 제품 목록 사이의 줄을 기록해 둡니다.

DataList에는 머리글 행과 각 제품 목록 간의 가로 규칙이 포함됩니다.

그림 12: DataList에는 머리글 행과 각 제품 목록 사이의 가로 규칙이 포함됩니다(전체 크기 이미지를 보려면 클릭).

5단계: 반복기 컨트롤을 사용하여 특정 태그 렌더링

그림 12의 DataList 예제를 방문할 때 브라우저에서 보기/원본을 수행하는 경우 DataList는 DataList에 바인딩된 각 항목에 대해 단일 테이블 셀()이 있는 테이블 행(<tr><td>)이 포함된 HTML <table> 을 내보내는 것을 볼 수 있습니다. 실제로 이 출력은 단일 TemplateField를 사용하여 GridView에서 내보내는 것과 동일합니다. 이후 자습서에서 볼 수 있듯이 DataList는 출력을 추가로 사용자 지정할 수 있으므로 테이블 행당 여러 데이터 원본 레코드를 표시할 수 있습니다.

하지만 HTML <table>을 내보내지 않으려면 어떻게 해야 할까요? 데이터 웹 컨트롤에서 생성된 태그를 완전히 제어하려면 Repeater 컨트롤을 사용해야 합니다. DataList와 마찬가지로 반복기는 템플릿을 기반으로 생성됩니다. 그러나 Repeater는 다음 5개의 템플릿만 제공합니다.

  • HeaderTemplate 제공된 경우 항목 앞에 지정된 태그를 추가합니다.
  • ItemTemplate 항목을 렌더링하는 데 사용됨
  • AlternatingItemTemplate 제공된 경우, 교대로 항목을 렌더링하는 데 사용됩니다.
  • SeparatorTemplate 제공된 경우 각 항목 사이에 지정된 태그를 추가합니다.
  • FooterTemplate - 제공된 경우 항목 다음에 지정된 태그를 추가합니다.

ASP.NET 1.x에서는 일반적으로 리피터 컨트롤이 일부 데이터 원본에서 데이터를 제공한 글머리 기호 목록을 표시하는 데 사용되었습니다. 이러한 경우 및 는 HeaderTemplate 각각 ItemTemplate 여는 태그와 닫는 <ul> 태그를 포함하지만 에는 데이터 바인딩 구문이 있는 요소가 포함 <li> 됩니다.FooterTemplates 이 방법은 마스터 페이지 및 사이트 탐색 자습서의 두 예제에서 볼 수 있듯이 ASP.NET 2.0에서 계속 사용할 수 있습니다.

  • Site.master master 페이지에서 리피터는 최상위 사이트 맵 콘텐츠(기본 보고, 필터링 보고서, 사용자 지정된 서식 등)의 글머리 기호 목록을 표시하는 데 사용되었으며, 또 다른 중첩된 반복기는 최상위 섹션의 자식 섹션을 표시하는 데 사용되었습니다.
  • 에서 SectionLevelTutorialListing.ascx리피터는 현재 사이트 맵 섹션의 자식 섹션에 대한 글머리 기호 목록을 표시하는 데 사용되었습니다.

참고

ASP.NET 2.0에서는 간단한 글머리 기호 목록을 표시하기 위해 데이터 소스 컨트롤에 바인딩할 수 있는 새 BulletedList 컨트롤이 도입되었습니다. BulletedList 컨트롤을 사용하면 목록 관련 HTML을 지정할 필요가 없습니다. 대신 각 목록 항목에 대한 텍스트로 표시할 데이터 필드를 나타내기만 하면 됩니다.

반복기는 모든 데이터 웹 컨트롤을 catch하는 역할을 합니다. 필요한 태그를 생성하는 기존 컨트롤이 없는 경우 Repeater 컨트롤을 사용할 수 있습니다. 반복기를 사용하는 방법을 설명하기 위해 2단계에서 만든 제품 정보 데이터 목록 위에 범주 목록을 표시해 보겠습니다. 특히 각 범주가 테이블의 열로 표시되는 단일 행 HTML <table> 에 범주를 표시하도록 합니다.

이렇게 하려면 먼저 도구 상자에서 Product Information DataList 위의 Designer 리피터 컨트롤을 끌어서 놓습니다. DataList와 마찬가지로 리피터는 템플릿이 정의될 때까지 처음에는 회색 상자로 표시됩니다.

Designer 반복기 추가

그림 13: Designer 반복기 추가(전체 크기 이미지를 보려면 클릭)

Repeater의 스마트 태그에는 데이터 원본 선택 옵션이 하나만 있습니다. 새 ObjectDataSource를 만들고 클래스의 GetCategories 메서드를 CategoriesBLL 사용하도록 구성하도록 선택합니다.

새 ObjectDataSource 만들기

그림 14: 새 ObjectDataSource 만들기(전체 크기 이미지를 보려면 클릭)

CategoriesBLL 클래스를 사용하도록 ObjectDataSource 구성

그림 15: 클래스를 사용하도록 CategoriesBLL ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)

GetCategories 메서드를 사용하여 모든 범주에 대한 정보 검색

그림 16: 메서드를 사용하여 GetCategories 모든 범주에 대한 정보 검색(전체 크기 이미지를 보려면 클릭)

DataList와 달리 Visual Studio는 데이터 원본에 바인딩한 후 반복기용 ItemTemplate을 자동으로 만들지 않습니다. 또한 반복기 템플릿은 Designer 통해 구성할 수 없으며 선언적으로 지정해야 합니다.

범주를 각 범주에 대한 열이 있는 단일 행 <table> 으로 표시하려면 Repeater가 다음과 유사한 태그를 내보내야 합니다.

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

텍스트가 <td>Category X</td> 반복되는 부분이므로 반복기 ItemTemplate에 표시됩니다. 앞에 나타나는 <table><tr> 태그는 에 배치 HeaderTemplate 되고 끝 태그 </tr></table> 는 에 FooterTemplate배치됩니다. 이러한 템플릿 설정을 입력하려면 왼쪽 아래 모서리에 있는 원본 단추를 클릭하여 ASP.NET 페이지의 선언적 부분으로 이동하고 다음 구문을 입력합니다.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater는 템플릿에 지정된 대로 정확한 태그를 내보냅니다. 그림 17은 브라우저를 통해 볼 때 반복기 출력을 보여줍니다.

개별 열의 각 범주를 Lists Single-Row HTML <테이블>

그림 17: 개별 열의 각 범주를 Lists Single-Row HTML <table> (전체 크기 이미지를 보려면 클릭)

6단계: 리피터 모양 개선

반복기는 템플릿에서 지정한 태그를 정확하게 내보내기 때문에 Repeater에 대한 스타일 관련 속성이 없다는 것은 놀라운 일이 아닙니다. 반복기에서 생성된 콘텐츠의 모양을 변경하려면 필요한 HTML 또는 CSS 콘텐츠를 Repeater 템플릿에 직접 수동으로 추가해야 합니다.

이 예제에서는 DataList의 번갈아 사용하는 행과 같이 범주 열이 배경색을 대체하도록 합니다. 이렇게 하려면 다음과 같이 및 템플릿을 통해 ItemTemplateAlternatingItemTemplate 각 반복기 항목 및 AlternatingRowStyle CSS 클래스에 CSS 클래스를 교대로 할당 RowStyle 해야 합니다.

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

또한 제품 범주 텍스트가 포함된 헤더 행을 출력에 추가해 보겠습니다. 결과 <table> 열 수를 알 수 없으므로 모든 열에 걸쳐 보장되는 헤더 행을 생성하는 가장 간단한 방법은 두<table> 개의 s를 사용하는 것입니다. 첫 번째 <table> 행에는 헤더 행 두 개와 시스템의 각 범주에 대한 열이 있는 두 번째 단일 행이 포함된 행 <table> 이 포함됩니다. 즉, 다음 태그를 내보내려고 합니다.

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

다음 HeaderTemplate 을 수행하면 FooterTemplate 원하는 태그가 생성됩니다.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

그림 18은 이러한 변경 내용이 적용된 후의 반복기를 보여줍니다.

범주 열 배경색의 대체 항목 및 머리글 행 포함

그림 18: 배경색의 범주 열 대체 및 머리글 행 포함(전체 크기 이미지를 보려면 클릭)

요약

GridView 컨트롤을 사용하면 데이터를 통해 쉽게 표시, 편집, 삭제, 정렬 및 페이지를 만들 수 있지만 모양은 매우 상자형이며 그리드와 비슷합니다. 모양을 보다 자세히 제어하려면 DataList 또는 Repeater 컨트롤로 전환해야 합니다. 이러한 두 컨트롤은 모두 BoundFields, CheckBoxFields 등 대신 템플릿을 사용하여 레코드 집합을 표시합니다.

DataList는 기본적으로 단일 TemplateField가 있는 GridView와 마찬가지로 각 데이터 원본 레코드를 단일 테이블 행에 표시하는 HTML <table> 로 렌더링됩니다. 그러나 이후 자습서에서 볼 수 있듯이 DataList는 테이블 행당 여러 레코드를 표시할 수 있도록 허용합니다. 반면에 반복기는 템플릿에 지정된 태그를 엄격하게 내보냅니다. 추가 태그를 추가하지 않으므로 일반적으로 (예: 글머리 기호 목록) 이외의 <table> HTML 요소에 데이터를 표시하는 데 사용됩니다.

DataList 및 Repeater는 렌더링된 출력에서 더 많은 유연성을 제공하지만 GridView에 있는 많은 기본 제공 기능이 부족합니다. 향후 자습서에서 살펴보겠습니다. 이러한 기능 중 일부는 너무 많은 노력 없이 다시 연결할 수 있지만 GridView 대신 DataList 또는 Repeater를 사용하면 이러한 기능을 직접 구현하지 않고도 사용할 수 있는 기능이 제한된다는 점을 명심하세요.

행복한 프로그래밍!

저자 정보

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

특별 감사

이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 야코프 엘리스, 리즈 슐록, 랜디 슈미트, 스테이시 파크였습니다. 예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.

이전다음