DataList 및 반복기 컨트롤을 사용하여 데이터 표시(C#)Displaying Data with the DataList and Repeater Controls (C#)

Scott Mitchellby Scott Mitchell

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

위의 자습서에서 GridView 컨트롤을 사용 하 여 데이터를 표시 했습니다.In the preceding tutorials we have used the GridView control to display data. 이 자습서를 시작 하면 이러한 컨트롤을 사용 하 여 데이터를 표시 하는 기본 사항부터 시작 하 여 DataList 및 Repeater 컨트롤을 사용 하 여 일반적인 보고 패턴 빌드를 살펴보겠습니다.Starting with this tutorial, we look at building common reporting patterns with the DataList and Repeater controls, starting with the basics of displaying data with these controls.

소개Introduction

이전 28 개 자습서의 모든 예제에서 GridView 컨트롤로 전환 된 데이터 소스의 여러 레코드를 표시 해야 하는 경우In all of the examples throughout the past 28 tutorials, if we needed to display multiple records from a data source we turned to the GridView control. GridView는 데이터 원본의 각 레코드에 대해 행을 렌더링 하 여 레코드의 데이터 필드를 열에 표시 합니다.The GridView renders a row for each record in the data source, displaying the record s data fields in columns. GridView를 사용 하 여 데이터를 표시, 페이징, 정렬, 편집 및 삭제 하는 것이 가장 좋습니다.While the GridView makes it a snap to display, page through, sort, edit, and delete data, its appearance is a bit boxy. 또한 GridView 구조를 담당 하는 태그에는 각 레코드에 대 한 테이블 행 (<tr>) 및 각 필드에 대 한 테이블 셀 (<td>)이 포함 된 HTML <table> 포함 되어 있습니다.Moreover, the markup responsible for the GridView s structure is fixed it includes an HTML <table> with a table row (<tr>) for each record and a table cell (<td>) for each field.

여러 레코드를 표시할 때 모양과 렌더링 된 태그에서 더 높은 수준의 사용자 지정을 제공 하기 위해 ASP.NET 2.0는 DataList 및 Repeater 컨트롤을 제공 합니다 (둘 다 ASP.NET 버전 1.x 에서도 사용할 수 있음).To provide a greater degree of customization in the appearance and rendered markup when displaying multiple records, ASP.NET 2.0 offers the DataList and Repeater controls (both of which were also available in ASP.NET version 1.x). DataList 및 Repeater 컨트롤은 BoundFields, CheckBoxFields, ButtonFields 등의 템플릿을 사용 하 여 해당 콘텐츠를 렌더링 합니다.The DataList and Repeater controls render their content using templates rather than BoundFields, CheckBoxFields, ButtonFields, and so on. GridView와 마찬가지로 DataList는 HTML <table>렌더링 하지만 테이블 행당 여러 데이터 원본 레코드를 표시할 수 있습니다.Like the GridView, the DataList renders as an HTML <table>, but allows for multiple data source records to be displayed per table row. 반면, Repeater는 명시적으로 지정 된 것 보다 더 많은 태그를 렌더링 하지 않으며 내보낸 태그를 정확 하 게 제어 해야 하는 경우 이상적인 후보입니다.The Repeater, on the other hand, renders no additional markup than what you explicitly specify, and is an ideal candidate when you need precise control over the markup emitted.

다음 수십 가지 자습서를 통해 이러한 컨트롤 템플릿을 사용 하 여 데이터를 표시 하는 기본 사항부터 시작 하 여 DataList 및 Repeater 컨트롤과 함께 일반적인 보고 패턴을 빌드하는 방법을 살펴보겠습니다.Over the next dozen or so tutorials, we'll look at building common reporting patterns with the DataList and Repeater controls, starting with the basics of displaying data with these controls templates. 이러한 컨트롤의 형식을 지정 하는 방법, DataList에서 데이터 원본 레코드의 레이아웃을 변경 하는 방법, 공통 마스터/세부 시나리오, 데이터를 편집 하 고 삭제 하는 방법, 레코드를 페이징 하는 방법 등을 확인할 수 있습니다.We'll see how to format these controls, how to alter the layout of data source records in the DataList, common master/details scenarios, ways to edit and delete data, how to page through records, and so on.

1 단계: DataList 및 Repeater 자습서 웹 페이지 추가Step 1: Adding the DataList and Repeater Tutorial Web Pages

이 자습서를 시작 하기 전에 먼저이 자습서에 필요한 ASP.NET 페이지를 추가 하 고 DataList 및 Repeater를 사용 하 여 데이터를 표시 하는 다음 몇 가지 자습서를 수행 하겠습니다.Before we start this tutorial, let s first take a moment to add the ASP.NET pages we'll need for this tutorial and the next few tutorials dealing with displaying data using the DataList and Repeater. DataListRepeaterBasics이라는 프로젝트에서 새 폴더를 만들어 시작 합니다.Start by creating a new folder in the project named DataListRepeaterBasics. 그런 다음이 폴더에 다음 5 개의 ASP.NET 페이지를 추가 하 여 마스터 페이지 Site.master를 사용 하도록 구성 된 페이지를 모두 구성 합니다.Next, add the following five ASP.NET pages to this folder, having all of them configured to use the master page Site.master:

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

DataListRepeaterBasics 폴더를 만들고 자습서 ASP.NET 페이지를 추가 합니다.

그림 1: DataListRepeaterBasics 폴더 만들기 및 자습서 ASP.NET 페이지 추가Figure 1: Create a DataListRepeaterBasics Folder and Add the Tutorial ASP.NET Pages

Default.aspx 페이지를 열고 SectionLevelTutorialListing.ascx 사용자 정의 컨트롤을 UserControls 폴더에서 디자인 화면으로 끌어 옵니다.Open the Default.aspx page and drag the SectionLevelTutorialListing.ascx User Control from the UserControls folder onto the Design surface. 마스터 페이지 및 사이트 탐색 자습서에서 만든이 사용자 정의 컨트롤은 사이트 맵을 열거 하 고 현재 섹션의 자습서를 글머리 기호 목록에 표시 합니다.This User Control, which we created in the Master Pages and Site Navigation tutorial, enumerates the site map and displays the tutorials from the current section in a bulleted list.

SectionLevelTutorialListing 사용자 정의 컨트롤을 Default.aspx에 추가 Add the SectionLevelTutorialListing.ascx User Control to Default.aspx

그림 2: Default.aspxSectionLevelTutorialListing.ascx 사용자 정의 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 2: Add the SectionLevelTutorialListing.ascx User Control to Default.aspx (Click to view full-size image)

글머리 기호 목록에 생성할 DataList 및 Repeater 자습서가 표시 되도록 하려면 사이트 맵에 추가 해야 합니다.In order to have the bulleted list display the DataList and Repeater tutorials we'll be creating, we need to add them to the site map. Web.sitemap 파일을 열고 사용자 지정 단추 추가 사이트 맵 노드 태그 뒤에 다음 태그를 추가 합니다.Open the Web.sitemap file and add the following markup after the Adding Custom Buttons site map node markup:

<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 페이지를 포함 하도록 사이트 맵 업데이트Figure 3: Update the Site Map to Include the New ASP.NET Pages

2 단계: DataList를 사용 하 여 제품 정보 표시Step 2: Displaying Product Information with the DataList

FormView와 마찬가지로 DataList 컨트롤의 렌더링 된 출력은 BoundFields, CheckBoxFields 등의 템플릿에 따라 달라 집니다.Similar to the FormView, the DataList control s rendered output depends upon templates rather than BoundFields, CheckBoxFields, and so on. FormView와 달리 DataList는 독립가 아닌 레코드 집합을 표시 하도록 설계 되었습니다.Unlike the FormView, the DataList is designed to display a set of records rather than a solitary one. 를 사용 하 여이 자습서를 시작 하 고, DataList에 제품 정보를 바인딩합니다.Let s begin this tutorial with a look at binding product information to a DataList. 먼저 DataListRepeaterBasics 폴더에서 Basics.aspx 페이지를 엽니다.Start by opening the Basics.aspx page in the DataListRepeaterBasics folder. 그런 다음, 도구 상자에서 DataList를 디자이너로 끌어 옵니다.Next, drag a DataList from the Toolbox onto the Designer. 그림 4에서 보여 주는 것 처럼 DataList s 템플릿을 지정 하기 전에 디자이너에서 회색 상자로 표시 합니다.As Figure 4 illustrates, before specifying the DataList s templates, the Designer displays it as a gray box.

DataList를 도구 상자에서 디자이너로 끌어 옵니다.Drag the DataList From the Toolbox Onto the Designer

그림 4: 도구 상자의 DataList를 디자이너로 끌기 (전체 크기 이미지를 보려면 클릭)Figure 4: Drag the DataList From the Toolbox Onto the Designer (Click to view full-size image)

DataList s 스마트 태그에서 새 ObjectDataSource를 추가 하 고 ProductsBLL 클래스 s GetProducts 메서드를 사용 하도록 구성 합니다.From the DataList s smart tag, add a new ObjectDataSource and configure it to use the ProductsBLL class s GetProducts method. 이 자습서에서 읽기 전용 DataList를 다시 만들기 때문에 마법사의 삽입, 업데이트 및 삭제 탭에서 드롭다운 목록을 (없음)으로 설정 합니다.Since we re creating a read-only DataList in this tutorial, set the drop-down list to (None) in the wizard s INSERT, UPDATE, and DELETE tabs.

새 ObjectDataSource를 만들 OptOpt to Create a New ObjectDataSource

그림 5: 새 ObjectDataSource를 만드는 옵트인 (전체 크기 이미지를 보려면 클릭)Figure 5: Opt to Create a New ObjectDataSource (Click to view full-size image)

ProductsBLL 클래스를 사용 하도록 ObjectDataSource 구성 Configure the ObjectDataSource to Use the ProductsBLL Class

그림 6: ProductsBLL 클래스를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 6: Configure the ObjectDataSource to Use the ProductsBLL Class (Click to view full-size image)

GetProducts 메서드를 사용 하 여 모든 제품에 대 한 정보를 검색 Retrieve Information About All of the Products Using the GetProducts Method

그림 7: GetProducts 메서드를 사용 하 여 모든 제품에 대 한 정보 검색 (전체 크기 이미지를 보려면 클릭)Figure 7: Retrieve Information About All of the Products Using the GetProducts Method (Click to view full-size image)

ObjectDataSource를 구성 하 고 스마트 태그를 통해 DataList와 연결 하면 Visual Studio에서 데이터 소스에서 반환 된 각 데이터 필드의 이름과 값을 표시 하는 ItemTemplate을 자동으로 만듭니다 (아래 태그 참조).After configuring the ObjectDataSource and associating it with the DataList through its smart tag, Visual Studio will automatically create an ItemTemplate in the DataList that displays the name and value of each data field returned by the data source (see the markup below). 이 기본 ItemTemplate의 모양은 디자이너를 통해 FormView에 데이터 소스를 바인딩할 때 자동으로 생성 되는 템플릿의 경우와 동일 합니다.This default ItemTemplate s appearance is identical to that of the templates automatically created when binding a data source to the FormView through the Designer.

<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>

Note

FormView의 스마트 태그를 통해 FormView 컨트롤에 데이터 소스를 바인딩하는 경우 Visual Studio는 ItemTemplate, InsertItemTemplateEditItemTemplate를 만들었습니다.Recall that when binding a data source to a FormView control through the FormView s smart tag, Visual Studio created an ItemTemplate, InsertItemTemplate, and EditItemTemplate. 그러나 DataList를 사용 하면 ItemTemplate 만들어집니다.With the DataList, however, only an ItemTemplate is created. 이는 DataList에는 FormView에서 제공 하는 것과 동일한 기본 제공 편집 및 삽입 지원이 없기 때문입니다.This is because the DataList does not have the same built-in editing and inserting support offered by the FormView. DataList에는 편집 및 삭제 관련 이벤트가 포함 되어 있으며, 약간의 코드를 사용 하 여 편집 및 삭제 지원을 추가할 수 있지만, FormView와 마찬가지로 간단한 기본 지원 기능이 없습니다.The DataList does contain edit- and delete-related events, and editing and deleting support can be added with a bit of code, but there s no simple out-of-the-box support as with the FormView. 이후 자습서에서 DataList를 사용 하 여 편집 및 삭제 지원을 포함 하는 방법을 살펴보겠습니다.We'll see how to include editing and deleting support with the DataList in a future tutorial.

을 사용 하 여이 템플릿의 모양을 개선 합니다.Let s take a moment to improve the appearance of this template. 모든 데이터 필드를 표시 하는 대신 제품 이름, 공급자, 범주, 단위당 수량 및 단가만 표시 합니다.Rather than displaying all of the data fields, let s only display the product s name, supplier, category, quantity per unit, and unit price. 또한 <h4> 제목에 이름을 표시 하 고 머리글 아래의 <table>를 사용 하 여 나머지 필드를 레이아웃 합니다.Moreover, let s display the name in an <h4> heading and lay out the remaining fields using a <table> beneath the heading.

이러한 변경을 위해 DataList의 스마트 태그에서 템플릿 편집 기능을 사용 하 여 템플릿 편집 링크를 클릭 하거나 페이지의 선언적 구문을 통해 수동으로 템플릿을 수정할 수 있습니다.To make these changes you can either use the template editing features in the Designer from the DataList s smart tag click on the Edit Templates link or you can modify the template manually through the page s declarative syntax. 디자이너에서 템플릿 편집 옵션을 사용 하는 경우 결과 태그가 다음 태그와 정확히 일치 하지 않을 수 있지만, 브라우저를 통해 볼 때 그림 8에 표시 된 화면과 매우 유사 하 게 표시 됩니다.If you use the Edit Templates option in the Designer, your resulting markup may not match the following markup exactly, but when viewed through a browser should look very similar to the screen shot shown in Figure 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>

Note

위의 예제에서는 Text 속성에 데이터 바인딩 구문의 값이 할당 된 레이블 웹 컨트롤을 사용 합니다.The example above uses Label Web controls whose Text property is assigned the value of the databinding syntax. 또는 레이블을 모두 생략 하 여 데이터 바인딩 구문도 입력할 수 있습니다.Alternatively, we could have omitted the Labels altogether, typing in just the databinding syntax. 즉, <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />를 사용 하는 대신 <%# Eval("CategoryName") %>선언 구문을 대신 사용할 수 있습니다.That is, instead of using <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> we could have instead used the declarative syntax <%# Eval("CategoryName") %>.

그러나 Label 웹 컨트롤에서 나가면 두 가지 이점을 제공 합니다.Leaving in the Label Web controls, however, offer two advantages. 첫째, 다음 자습서에서 볼 수 있듯이 데이터를 기반으로 데이터를 보다 쉽게 서식 지정 하는 방법을 제공 합니다.First, it provides an easier means for formatting the data based on the data, as we'll see in the next tutorial. 두 번째로, 디자이너의 템플릿 편집 옵션은 일부 웹 컨트롤 외부에 표시 되는 선언적 데이터 바인딩 구문을 표시 하지 않습니다.Second, the Edit Templates option in the Designer doesn t display declarative databinding syntax that appears outside of some Web control. 대신, 템플릿 편집 인터페이스는 정적 태그 및 웹 컨트롤 작업을 용이 하 게 하기 위해 디자인 되었으며 웹 컨트롤 스마트 태그에서 액세스할 수 있는 데이터 바인딩 편집 대화 상자를 통해 모든 데이터 바인딩을 수행 한다고 가정 합니다.Instead, the Edit Templates interface is designed to facilitate working with static markup and Web controls and assumes that any databinding will be done through the Edit DataBindings dialog box, which is accessible from the Web controls smart tags.

따라서 디자이너를 통해 템플릿을 편집 하는 옵션을 제공 하는 DataList로 작업 하는 경우 템플릿 편집 인터페이스를 통해 콘텐츠를 액세스할 수 있도록 레이블 웹 컨트롤을 사용 하는 것이 좋습니다.Therefore, when working with the DataList, which provides the option of editing the templates through the Designer, I prefer to use Label Web controls so that the content is accessible through the Edit Templates interface. 잠시 후에는 반복기가 원본 뷰에서 템플릿 콘텐츠를 편집 해야 합니다.As we'll see shortly, the Repeater requires that the template s contents be edited from the Source view. 결과적으로, 반복 되는 템플릿을 작성 하는 경우 프로그래밍 논리를 기반으로 데이터 바인딩된 텍스트의 모양에 서식을 지정 해야 한다는 것을 알고 있지 않으면 레이블 웹 컨트롤을 생략 하는 경우가 많습니다.Consequently, when crafting the Repeater s templates I'll often omit the Label Web controls unless I know I'll need to format the appearance of the data bound text based on programmatic logic.

각 제품 출력 DataList s ItemTemplate을 사용 하 여 렌더링 됩니다.Each Product s Output is Rendered Using the DataList s ItemTemplate

그림 8: 각 제품의 출력이 DataList s ItemTemplate를 사용 하 여 렌더링 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 8: Each Product s Output is Rendered Using the DataList s ItemTemplate (Click to view full-size image)

3 단계: DataList의 모양 향상Step 3: Improving the Appearance of the DataList

GridView와 마찬가지로 DataList는 Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle등과 같은 다양 한 스타일 관련 속성을 제공 합니다.Like the GridView, the DataList offers a number of style-related properties, such as Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle, and so on. GridView 및 DetailsView 컨트롤을 사용할 때 이러한 두 컨트롤에 대 한 CssClass 속성을 미리 정의 하 고 몇 가지 하위 속성 (RowStyle, HeaderStyle등)의 CssClass 속성을 미리 정의한 DataWebControls 테마에서 스킨 파일을 만들었습니다.When working with the GridView and DetailsView controls, we created Skin files in the DataWebControls Theme that pre-defined the CssClass properties for these two controls and the CssClass property for several of their subproperties (RowStyle, HeaderStyle, and so on). 는 DataList에 대해 동일한 작업을 수행 합니다.Let s do the same for the DataList.

ObjectDataSource를 사용 하 여 데이터 표시 자습서에서 설명 하는 것 처럼 스킨 파일은 웹 컨트롤에 대 한 기본 모양 관련 속성을 지정 합니다. 테마는 웹 사이트의 특정 모양과 느낌을 정의 하는 스킨, CSS, 이미지 및 JavaScript 파일의 컬렉션입니다.As discussed in the Displaying Data With the ObjectDataSource tutorial, a Skin file specifies the default appearance-related properties for a Web control; a Theme is a collection of Skin, CSS, image, and JavaScript files that define a particular look and feel for a website. ObjectDataSource를 사용 하 여 데이터 표시 자습서에서는 현재 두 개의 스킨 파일 (GridView.skinDetailsView.skin)을 포함 하는 DataWebControls 테마 (App_Themes 폴더 안에 폴더로 구현 됨)를 만들었습니다.In the Displaying Data With the ObjectDataSource tutorial, we created a DataWebControls Theme (which is implemented as a folder within the App_Themes folder) that has, currently, two Skin files - GridView.skin and DetailsView.skin. 세 번째 스킨 파일을 추가 하 여 DataList에 대해 미리 정의 된 스타일 설정을 지정 해 보겠습니다.Let s add a third Skin file to specify the pre-defined style settings for the DataList.

스킨 파일을 추가 하려면 App_Themes/DataWebControls 폴더를 마우스 오른쪽 단추로 클릭 하 고 새 항목 추가를 선택한 다음 목록에서 스킨 파일 옵션을 선택 합니다.To add a Skin file, right-click on the App_Themes/DataWebControls folder, choose Add a New Item, and select the Skin File option from the list. 파일 이름을 DataList.skin로 지정합니다.Name the file DataList.skin.

DataList. skin 이라는 새 스킨 파일을 만듭니다.Create a New Skin File Named DataList.skin

그림 9: DataList.skin 이라는 새 스킨 파일 만들기 (전체 크기 이미지를 보려면 클릭)Figure 9: Create a New Skin File Named DataList.skin (Click to view full-size image)

DataList.skin 파일에 대해 다음 태그를 사용 합니다.Use the following markup for the DataList.skin file:

<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 속성에 할당 합니다.These settings assign the same CSS classes to the appropriate DataList properties as were used with the GridView and DetailsView controls. 여기 DataWebControlStyle, AlternatingRowStyle, RowStyle등에서 사용 되는 CSS 클래스는 Styles.css 파일에 정의 되며 이전 자습서에서 추가 되었습니다.The CSS classes used here DataWebControlStyle, AlternatingRowStyle, RowStyle, and so on are defined in the Styles.css file and were added in previous tutorials.

이 스킨 파일이 추가 되 면 디자이너에서 DataList의 모양이 업데이트 됩니다. 새 스킨 파일의 효과를 확인 하려면 디자이너 뷰를 새로 고쳐야 할 수도 있습니다. 보기 메뉴에서 새로 고침을 선택 합니다.With the addition of this Skin file, the DataList s appearance is updated in the Designer (you may need to refresh the Designer view to see the effects of the new Skin file; from the View menu, choose Refresh). 그림 10에 표시 된 것 처럼 각 교대 제품은 연한 분홍 배경색을 갖습니다.As Figure 10 shows, each alternating product has a light pink background color.

DataList. skin 이라는 새 스킨 파일을 만듭니다.Create a New Skin File Named DataList.skin

그림 10: DataList.skin 이라는 새 스킨 파일 만들기 (전체 크기 이미지를 보려면 클릭)Figure 10: Create a New Skin File Named DataList.skin (Click to view full-size image)

4 단계: DataList s 기타 템플릿 탐색Step 4: Exploring the DataList s Other Templates

ItemTemplate외에도 DataList는 다음과 같은 여섯 가지 선택적 템플릿을 지원 합니다.In addition to the ItemTemplate, the DataList supports six other optional templates:

  • HeaderTemplate 제공 되는 경우 출력에 머리글 행을 추가 하 고이 행을 렌더링 하는 데 사용 됩니다.HeaderTemplate if provided, adds a header row to the output and is used to render this row
  • 교대로 반복 되는 항목을 렌더링 하는 데 사용 AlternatingItemTemplateAlternatingItemTemplate used to render alternating items
  • 선택한 항목을 렌더링 하는 데 사용 SelectedItemTemplate. 선택한 항목은 인덱스가 DataList s SelectedIndex 속성 에 해당 하는 항목입니다.SelectedItemTemplate used to render the selected item; the selected item is the item whose index corresponds to the DataList s SelectedIndex property
  • 편집 중인 항목을 렌더링 하는 데 사용 EditItemTemplateEditItemTemplate used to render the item being edited
  • SeparatorTemplate 제공 하는 경우 각 항목 사이에 구분 기호를 추가 하 고이 구분 기호를 렌더링 하는 데 사용 됩니다.SeparatorTemplate if provided, adds a separator between each item and is used to render this separator
  • FooterTemplate-제공 되는 경우 출력에 바닥글 행을 추가 하 고이 행을 렌더링 하는 데 사용 됩니다.FooterTemplate - if provided, adds a footer row to the output and is used to render this row

HeaderTemplate 또는 FooterTemplate를 지정 하는 경우 DataList는 렌더링 된 출력에 머리글 또는 바닥글 행을 추가 합니다.When specifying the HeaderTemplate or FooterTemplate, the DataList adds an additional header or footer row to the rendered output. GridView의 머리글과 바닥글 행과 마찬가지로 DataList의 머리글과 바닥글은 데이터에 바인딩되지 않습니다.Like with the GridView s header and footer rows, the header and footer in a DataList are not bound to data. 따라서 바인딩된 데이터에 액세스 하려고 하는 HeaderTemplate 또는 FooterTemplate의 모든 데이터 바인딩 구문은 빈 문자열을 반환 합니다.Therefore, any databinding syntax in the HeaderTemplate or FooterTemplate that attempts to access bound data will return a blank string.

Note

Gridview s 바닥글의 요약 정보를 표시 하는 것과 같이 머리글 및 바닥글 행이 데이터 바인딩 구문을 지원 하지 않는 반면, gridview s RowDataBound 이벤트 처리기에서 데이터 관련 정보를 이러한 행에 직접 삽입할 수 있습니다.As we saw in the Displaying Summary Information in the GridView s Footer tutorial, while the header and footer rows don t support databinding syntax, data-specific information can be injected directly into these rows from the GridView s RowDataBound event handler. 이 기법을 사용 하 여 컨트롤에 바인딩된 데이터에서 실행 중인 합계 또는 기타 정보를 계산 하 고 해당 정보를 바닥글에 할당할 수 있습니다.This technique can be used to both calculate running totals or other information from the data bound to the control as well as assign that information to the footer. 이와 동일한 개념을 DataList 및 Repeater 컨트롤에 적용할 수 있습니다. 유일한 차이점은 DataList 및 Repeater의 경우 RowDataBound 이벤트 대신 ItemDataBound 이벤트에 대 한 이벤트 처리기를 만드는 것입니다.This same concept can be applied to the DataList and Repeater controls; the only difference is that for the DataList and Repeater create an event handler for the ItemDataBound event (instead of for the RowDataBound event).

이 예에서는를 사용 하 여 DataList의 맨 위에 표시 되는 제품 정보를 <h3> 제목을 사용 합니다.For our example, let s have the title Product Information displayed at the top of the DataList s results in an <h3> heading. 이를 수행 하려면 적절 한 태그를 사용 하 여 HeaderTemplate를 추가 합니다.To accomplish this, add a HeaderTemplate with the appropriate markup. 디자이너에서이를 수행 하려면 DataList의 스마트 태그에서 템플릿 편집 링크를 클릭 하 고, 드롭다운 목록에서 머리글 템플릿을 선택 하 고, 스타일 드롭다운 목록에서 제목 3 옵션을 선택한 후 텍스트를 입력 합니다 (그림 11 참조).From the Designer, this can be accomplished by clicking on the Edit Templates link in the DataList s smart tag, choosing the Header Template from the drop-down list, and typing in the text after picking the Heading 3 option from the style drop-down list (see Figure 11).

텍스트 제품 정보를 사용 하 여 HeaderTemplate를 추가 Add a HeaderTemplate with the Text Product Information

그림 11: 텍스트 제품 정보를 사용 하 여 HeaderTemplate 추가 (전체 크기 이미지를 보려면 클릭)Figure 11: Add a HeaderTemplate with the Text Product Information (Click to view full-size image)

또는 <asp:DataList> 태그 내에 다음 태그를 입력 하 여 선언적으로 추가할 수 있습니다.Alternatively, this can be added declaratively by entering the following markup within the <asp:DataList> tags:

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

각 제품 목록 사이에 공백을 추가 하려면 각 섹션 사이에 줄을 포함 하는 SeparatorTemplate를 추가 해 보겠습니다.To add a bit of space between each product listing, let s add a SeparatorTemplate that includes a line between each section. 수평선 (<hr>) 태그는 이러한 구분선을 추가 합니다.The horizontal rule tag (<hr>), adds such a divider. 다음 태그를 포함 하도록 SeparatorTemplate를 만듭니다.Create the SeparatorTemplate so that it has the following markup:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Note

HeaderTemplateFooterTemplates와 마찬가지로 SeparatorTemplate 데이터 원본의 레코드에 바인딩되지 않으므로 DataList에 바인딩된 데이터 소스 레코드에 직접 액세스할 수 없습니다.Like the HeaderTemplate and FooterTemplates, the SeparatorTemplate is not bound to any record from the data source and therefore cannot directly access the data source records bound to the DataList.

이러한 추가 작업을 수행한 후 브라우저를 통해 페이지를 볼 때 그림 12와 같이 표시 됩니다.After making this addition, when viewing the page through a browser it should look similar to Figure 12. 머리글 행과 각 제품 목록 사이의 줄을 기록해 둡니다.Note the header row and the line between each product listing.

DataList에는 머리글 행이 포함 되 고 각 제품 목록 사이에는 수평선 규칙이 포함 됩니다.The DataList Includes a Header Row and a Horizontal Rule Between Each Product Listing

그림 12: DataList에는 각 제품 목록 사이에 헤더 행과 수평선 규칙이 포함 되어 있습니다 (전체 크기 이미지를 보려면 클릭).Figure 12: The DataList Includes a Header Row and a Horizontal Rule Between Each Product Listing (Click to view full-size image)

5 단계: Repeater 컨트롤로 특정 태그 렌더링Step 5: Rendering Specific Markup with the Repeater Control

그림 12의 DataList 예제를 방문할 때 브라우저에서 뷰/소스를 수행 하는 경우 datalist는 DataList에 바인딩된 각 항목에 대해 단일 테이블 셀 (<td>)을 포함 하는 테이블 행 (<tr>)이 포함 된 HTML <table>를 내보냅니다.If you do a View/Source from your browser when visiting the DataList example from Figure 12, you'll see that the DataList emits an HTML <table> that contains a table row (<tr>) with a single table cell (<td>) for each item bound to the DataList. 실제로이 출력은 단일 Templatefield로 변환를 사용 하 여 GridView에서 내보내는 항목과 동일 합니다.This output, in fact, is identical to what would be emitted from a GridView with a single TemplateField. 이후 자습서에서 볼 수 있듯이 DataList는 출력의 추가 사용자 지정을 허용 하 여 테이블당 여러 개의 데이터 원본 레코드를 표시할 수 있도록 합니다.As we'll see in a future tutorial, the DataList does allow further customization of the output, enabling us to display multiple data source records per table row.

그러나 HTML <table>를 내보내지 않으려면 어떻게 해야 하나요?What if you don t want to emit an HTML <table>, though? 데이터 웹 컨트롤에 의해 생성 된 태그를 전체 및 완전히 제어 하려면 Repeater 컨트롤을 사용 해야 합니다.For total and complete control over the markup generated by a data Web control, we must use the Repeater control. DataList와 마찬가지로 Repeater는 템플릿을 기반으로 생성 됩니다.Like the DataList, the Repeater is constructed based upon templates. 그러나 Repeater는 다음 5 가지 템플릿만 제공 합니다.The Repeater, however, only offers the following five templates:

  • HeaderTemplate 지정 된 경우 항목 앞에 지정 된 태그를 추가 합니다.HeaderTemplate if provided, adds the specified markup before the items
  • 항목을 렌더링 하는 데 사용 ItemTemplateItemTemplate used to render items
  • 제공 된 경우 AlternatingItemTemplate 교대로 반복 되는 항목을 렌더링 하는 데 사용 됩니다.AlternatingItemTemplate if provided, used to render alternating items
  • SeparatorTemplate 지정 된 경우 각 항목 사이에 지정 된 태그를 추가 합니다.SeparatorTemplate if provided, adds the specified markup between each item
  • FooterTemplate-제공 되는 경우 지정 된 태그를 항목 뒤에 추가 합니다.FooterTemplate - if provided, adds the specified markup after the items

ASP.NET 1.x에서 Repeater 컨트롤은 데이터 원본에서 가져온 데이터의 글머리 기호 목록을 표시 하는 데 주로 사용 되었습니다.In ASP.NET 1.x, the Repeater control was commonly used to display a bulleted list whose data came from some data source. 이 경우 HeaderTemplateFooterTemplates에는 각각 여는 태그와 닫는 <ul> 태그가 포함 되지만 ItemTemplate에는 데이터 바인딩 구문이 있는 <li> 요소가 포함 됩니다.In such a case, the HeaderTemplate and FooterTemplates would contain the opening and closing <ul> tags, respectively, while the ItemTemplate would contain <li> elements with databinding syntax. 마스터 페이지 및 사이트 탐색 자습서의 두 예제에서 본 것 처럼 ASP.NET 2.0에서이 방법을 사용할 수 있습니다.This approach can still be used in ASP.NET 2.0 as we saw in two examples in the Master Pages and Site Navigation tutorial:

  • Site.master 마스터 페이지에서 Repeater는 최상위 사이트 맵 콘텐츠의 글머리 기호 목록을 표시 하는 데 사용 되었습니다 (기본 보고, 필터링 보고서, 사용자 지정 형식 등). 다른 중첩 된 Repeater는 최상위 섹션의 자식 섹션을 표시 하는 데 사용 되었습니다.In the Site.master master page, a Repeater was used to display a bulleted list of the top-level site map contents (Basic Reporting, Filtering Reports, Customized Formatting, and so on); another, nested Repeater was used to display the children sections of the top-level sections
  • SectionLevelTutorialListing.ascx에서 Repeater는 현재 사이트 맵 섹션의 하위 섹션에 대 한 글머리 기호 목록을 표시 하는 데 사용 되었습니다.In SectionLevelTutorialListing.ascx, a Repeater was used to display a bulleted list of the children sections of the current site map section

Note

ASP.NET 2.0에는 간단한 글머리 기호 목록을 표시 하기 위해 데이터 소스 컨트롤에 바인딩할 수 있는 새로운 BulletedList 컨트롤이도입 되었습니다.ASP.NET 2.0 introduces the new BulletedList control, which can be bound to a data source control in order to display a simple bulleted list. BulletedList 컨트롤을 사용 하 여 목록 관련 HTML을 지정할 필요가 없습니다. 대신 각 목록 항목에 대 한 텍스트로 표시할 데이터 필드를 지정 합니다.With the BulletedList control we do not need to specify any of the list-related HTML; instead, we simply indicate the data field to display as the text for each list item.

Repeater는 모든 데이터 catch 웹 컨트롤의 역할을 합니다.The Repeater serves as a catch all data Web control. 필요한 태그를 생성 하는 기존 컨트롤이 없으면 Repeater 컨트롤을 사용할 수 있습니다.If there is not an existing control that generates the needed markup, the Repeater control can be used. Repeater를 사용 하 여 설명 하기 위해에는 2 단계에서 만든 제품 정보 DataList 위에 표시 되는 범주 목록이 표시 됩니다.To illustrate using the Repeater, let s have the list of categories displayed above the Product Information DataList created in Step 2. 특히, 각 범주가 테이블의 열로 표시 된 단일 행 HTML <table>에 범주가 표시 되도록 합니다.In particular, let s have the categories displayed in a single-row HTML <table> with each category displayed as a column in the table.

이를 수행 하려면 먼저 도구 상자의 Repeater 컨트롤을 디자이너의 제품 정보 DataList로 끌어 옵니다.To accomplish this, start by dragging a Repeater control from the Toolbox onto the Designer, above the Product Information DataList. DataList와 마찬가지로, 해당 템플릿이 정의 될 때까지 Repeater는 처음에 회색 상자로 표시 됩니다.As with the DataList, the Repeater initially displays as a gray box until its templates have been defined.

디자이너에 리피터를 추가 Add a Repeater to the Designer

그림 13: 디자이너에 리피터 추가 (전체 크기 이미지를 보려면 클릭)Figure 13: Add a Repeater to the Designer (Click to view full-size image)

Repeater s 스마트 태그에는 하나의 옵션만 있습니다. 데이터 소스를 선택 합니다.There s only one option in the Repeater s smart tag: Choose Data Source. 새 ObjectDataSource를 만들어 CategoriesBLL 클래스 s GetCategories 메서드를 사용 하도록 구성 합니다.Opt to create a new ObjectDataSource and configure it to use the CategoriesBLL class s GetCategories method.

새 ObjectDataSource를 만들 Create a New ObjectDataSource

그림 14: 새 ObjectDataSource 만들기 (전체 크기 이미지를 보려면 클릭)Figure 14: Create a New ObjectDataSource (Click to view full-size image)

범주 Bll 클래스를 사용 하도록 ObjectDataSource 구성 Configure the ObjectDataSource to Use the CategoriesBLL Class

그림 15: CategoriesBLL 클래스를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 15: Configure the ObjectDataSource to Use the CategoriesBLL Class (Click to view full-size image)

GetCategories 메서드를 사용 하 여 모든 범주에 대 한 정보를 검색 Retrieve Information About All of the Categories Using the GetCategories Method

그림 16: GetCategories 메서드를 사용 하 여 모든 범주에 대 한 정보 검색 (전체 크기 이미지를 보려면 클릭)Figure 16: Retrieve Information About All of the Categories Using the GetCategories Method (Click to view full-size image)

DataList와 달리 Visual Studio에서는 데이터 소스에 바인딩한 후에도 자동으로 Repeater에 대해 ItemTemplate을 만들지 않습니다.Unlike the DataList, Visual Studio does not automatically create an ItemTemplate for the Repeater after binding it to a data source. 또한, Repeater s 템플릿은 디자이너를 통해 구성할 수 없으며 선언적으로 지정 해야 합니다.Furthermore, the Repeater s templates cannot be configured through the Designer and must be specified declaratively.

각 범주에 대 한 열이 있는 단일 행 <table>로 범주를 표시 하려면 다음과 유사한 태그를 내보내려면 Repeater가 필요 합니다.To display the categories as a single-row <table> with a column for each category, we need the Repeater to emit markup similar to the following:

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

<td>Category X</td> 텍스트는 반복 되는 부분 이므로 Repeater s ItemTemplate에 표시 됩니다.Since the <td>Category X</td> text is the portion that repeats, this will appear in the Repeater s ItemTemplate. <table><tr>-앞에 나타나는 태그는 HeaderTemplate에 배치 되 고 끝 태그 </tr></table>FooterTemplate에 배치 됩니다.The markup that appears before it - <table><tr> - will be placed in the HeaderTemplate while the ending markup - </tr></table> - will placed in the FooterTemplate. 이러한 템플릿 설정을 입력 하려면 왼쪽 아래 모서리에 있는 원본 단추를 클릭 하 여 ASP.NET 페이지의 선언적 부분으로 이동 하 고 다음 구문을 입력 합니다.To enter these template settings, go to the declarative portion of the ASP.NET page by clicking on the Source button in the lower left corner and type in the following syntax:

<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는 해당 템플릿에 지정 된 대로 정확한 태그를 내보내고, 아무 것도 하지 않습니다.The Repeater emits the precise markup as specified by its templates, nothing more, nothing less. 그림 17은 브라우저를 통해 볼 때의 출력을 보여 줍니다.Figure 17 shows the Repeater s output when viewed through a browser.

단일 행 HTML <테이블> 별도의 열에 각 범주 나열A Single-Row HTML <table> Lists Each Category in a Separate Column

그림 17: 단일 행 HTML <table> 별도의 열에 각 범주 나열 (전체 크기 이미지를 보려면 클릭)Figure 17: A Single-Row HTML <table> Lists Each Category in a Separate Column (Click to view full-size image)

6 단계: Repeater의 모양 향상Step 6: Improving the Appearance of the Repeater

Repeater는 해당 템플릿에 의해 지정 된 태그를 정확 하 게 가져오므로 Repeater에 대 한 스타일 관련 속성은 없습니다.Since the Repeater emits precisely the markup specified by its templates, it should come as no surprise that there are no style-related properties for the Repeater. Repeater에 의해 생성 되는 콘텐츠의 모양을 변경 하려면 필요한 HTML 또는 CSS 콘텐츠를 Repeater 템플릿에 직접 직접 추가 해야 합니다.To alter the appearance of the content generated by the Repeater, we must manually add the needed HTML or CSS content directly to the Repeater s templates.

이 예에서는 DataList에서 교대로 반복 되는 행과 같이 category 열에 대체 배경색을 사용 합니다.For our example, let s have the category columns alternate background colors, like with the alternating rows in the DataList. 이렇게 하려면 다음과 같이 ItemTemplateAlternatingItemTemplate 템플릿을 통해 각 Repeater 항목에 RowStyle CSS 클래스를 할당 하 고 AlternatingRowStyle CSS 클래스를 각 교대로 반복 되는 반복기 항목에 할당 해야 합니다.To accomplish this, we need to assign the RowStyle CSS class to each Repeater item and the AlternatingRowStyle CSS class to each alternating Repeater item through the ItemTemplate and AlternatingItemTemplate templates, like so:

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

텍스트 제품 범주를 사용 하 여 출력에 머리글 행을 추가할 수도 있습니다.Let s also add a header row to the output with the text Product Categories. 결과 <table> 구성 될 열 수를 알 수 없으므로 모든 열에 걸쳐 있는 머리글 행을 생성 하는 가장 간단한 방법은 두 개의 <table> s를 사용 하는 것입니다.Since we don t know how many columns our resulting <table> will be comprised of, the simplest way to generate a header row that is guaranteed to span all columns is to use two <table> s. 첫 번째 <table>에는 두 행이 포함 되 고, 두 번째 행에는 시스템의 각 범주에 대 한 열이 있는 두 번째 단일 행 <table> 포함 됩니다.The first <table> will contain two rows the header row and a row that will contain the second, single-row <table> that has a column for each category in the system. 즉, 다음 태그를 내보내야 합니다.That is, we want to emit the following markup:

<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 하면 원하는 태그가 생성 됩니다.The following HeaderTemplate and FooterTemplate result in the desired markup:

<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에서는 이러한 변경이 수행 된 후의 반복을 보여 줍니다.Figure 18 shows the Repeater after these changes have been made.

범주 열을 배경색으로 대체 하 고 머리글 행을 포함 하는 The Category Columns Alternate in Background Color and Includes a Header Row

그림 18: 배경색으로 대체 되 고 머리글 행을 포함 하는 범주 열 (전체 크기 이미지를 보려면 클릭)Figure 18: The Category Columns Alternate in Background Color and Includes a Header Row (Click to view full-size image)

요약Summary

GridView 컨트롤을 사용 하면 데이터를 쉽게 표시 하 고, 편집 하 고, 삭제 하 고, 정렬 하 고, 페이지를 표시할 수 있지만 모양은 매우 boxy와 비슷합니다.While the GridView control makes it easy to display, edit, delete, sort, and page through data, the appearance is very boxy and grid-like. 모양에 대 한 더 많은 제어를 위해 DataList 또는 Repeater 컨트롤을 사용 해야 합니다.For more control over the appearance, we need to turn to either the DataList or Repeater controls. 이러한 컨트롤은 모두 BoundFields, CheckBoxFields 등의 템플릿을 사용 하 여 레코드 집합을 표시 합니다.Both of these controls display a set of records using templates instead of BoundFields, CheckBoxFields, and so on.

DataList는 기본적으로 단일 Templatefield로 변환를 사용 하는 GridView와 마찬가지로 단일 테이블 행에 각 데이터 원본 레코드를 표시 하는 HTML <table> 렌더링 합니다.The DataList renders as an HTML <table> that, by default, displays each data source record in a single table row, just like a GridView with a single TemplateField. 그러나 이후 자습서에서 볼 수 있듯이 DataList는 테이블 행 마다 여러 레코드를 표시할 수 있도록 합니다.As we will see in a future tutorial, however, the DataList does permit multiple records to be displayed per table row. 반면에 Repeater는 해당 템플릿에 지정 된 태그를 엄격히 내보냅니다. 추가 태그를 추가 하지 않으므로 일반적으로 <table> 아닌 HTML 요소 (예: 글머리 기호 목록)에 데이터를 표시 하는 데 사용 됩니다.The Repeater, on the other hand, strictly emits the markup specified in its templates; it does not add any additional markup and therefore is commonly used to display data in HTML elements other than a <table> (such as in a bulleted list).

DataList 및 Repeater는 렌더링 된 출력에서 더 많은 유연성을 제공 하지만 GridView에는 여러 기본 제공 기능이 없습니다.While the DataList and Repeater offer more flexibility in their rendered output, they lack many of the built-in features found in the GridView. 향후 자습서에서 살펴볼 때 이러한 기능 중 일부는 너무 많은 노력 없이 다시 연결 될 수 있지만, GridView 대신 DataList 또는 Repeater를 사용 하면 이러한 기능을 구현 하지 않고도 사용할 수 있는 기능이 제한 됩니다. 직접.As we'll examine in upcoming tutorials, some of these features can be plugged back in without too much effort, but do keep in mind that using the DataList or Repeater in lieu of the GridView does limit the features you can use without having to implement those features yourself.

행복 한 프로그래밍Happy Programming!

저자 정보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. 이 자습서의 리드 검토자는 Yaakov Ellis, Liz Shulok, Randy Schmidt 및 Stacy 공원 였습니다.Lead reviewers for this tutorial were Yaakov Ellis, Liz Shulok, Randy Schmidt, and Stacy Park. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.