DropDownList 및 DataList를 사용하여 마스터/세부 정보 필터링(C#)

작성자 : Scott Mitchell

PDF 다운로드

이 자습서에서는 DropDownLists를 사용하여 단일 웹 페이지에 master/세부 보고서를 표시하여 "master" 레코드와 "세부 정보"를 표시하는 DataList를 표시하는 방법을 알아보세요.

소개

이전 Master/Detail Filtering with a DropDownList 자습서에서 GridView를 사용하여 처음 만든 master/세부 정보 보고서는 일부 "master" 레코드 집합을 보여 주는 것으로 시작합니다. 그런 다음 사용자는 master 레코드 중 하나로 드릴다운하여 레코드의 "세부 정보"를 master 볼 수 있습니다. 마스터/세부 보고서는 일대다 관계를 시각화하고 특히 "넓은" 테이블(열이 많은 테이블)의 자세한 정보를 표시하는 데 이상적인 선택입니다. 이전 자습서에서 GridView 및 DetailsView 컨트롤을 사용하여 master/세부 보고서를 구현하는 방법을 살펴보았습니다. 이 자습서와 다음 두 자습서에서는 이러한 개념을 다시 살펴보겠습니다. 하지만 대신 DataList 및 Repeater 컨트롤을 사용하는 데 집중합니다.

이 자습서에서는 DropDownList를 사용하여 DataList에 "세부 정보" 레코드가 표시된 "master" 레코드를 포함하는 방법을 살펴보겠습니다.

1단계: 마스터/세부 정보 자습서 웹 페이지 추가

이 자습서를 시작하기 전에 먼저 잠시 시간을 내어 이 자습서에 필요한 폴더와 ASP.NET 페이지를 추가하고 DataList 및 Repeater 컨트롤을 사용하여 master/세부 보고서를 처리하는 다음 두 페이지를 살펴보겠습니다. 먼저 라는 DataListRepeaterFiltering프로젝트에 새 폴더를 만듭니다. 다음으로, 다음 5개의 ASP.NET 페이지를 이 폴더에 추가하여 모두 master 페이지를 Site.master사용하도록 구성합니다.

  • Default.aspx
  • FilterByDropDownList.aspx
  • CategoryListMaster.aspx
  • ProductsForCategoryDetails.aspx
  • CategoriesAndProducts.aspx

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

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

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

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

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

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

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                      both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</siteMapNode>

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

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

2단계: DropDownList에 범주 표시

master/세부 정보 보고서는 DropDownList의 범주를 나열하며, 선택한 목록 항목의 제품이 DataList의 페이지에 추가로 표시됩니다. 첫 번째 작업은 DropDownList에 범주를 표시하는 것입니다. 먼저 폴더에서 FilterByDropDownList.aspxDataListRepeaterFiltering 페이지를 열고 도구 상자에서 페이지 디자이너로 DropDownList를 끌어옵니다. 다음으로 DropDownList의 ID 속성을 로 Categories설정합니다. DropDownList의 스마트 태그에서 데이터 원본 선택 링크를 클릭하고 라는 CategoriesDataSource새 ObjectDataSource를 만듭니다.

새 ObjectDataSource 명명된 CategoriesDataSource 추가

그림 4: 새 ObjectDataSource 명명된 CategoriesDataSource 추가(전체 크기 이미지를 보려면 클릭)

클래스 GetCategories() 의 메서드를 호출할 수 있도록 새 ObjectDataSource를 CategoriesBLL 구성합니다. ObjectDataSource를 구성한 후에도 DropDownList에 표시할 데이터 원본 필드와 각 목록 항목의 값으로 연결해야 하는 데이터 원본 필드를 지정해야 합니다. CategoryName 필드를 표시로 하고 CategoryID 각 목록 항목의 값으로 갖습니다.

DropDownList CategoryName 필드를 표시하고 CategoryID를 값으로 사용하도록 설정

그림 5: DropDownList 필드 표시 CategoryName 및 값으로 사용 CategoryID (전체 크기 이미지를 보려면 클릭)

이 시점에서 테이블의 레코드 Categories 로 채워진 DropDownList 컨트롤이 있습니다(모두 약 6초 내에 완료됨). 그림 6은 브라우저를 통해 볼 때 지금까지 진행 상황을 보여줍니다.

현재 범주를 Drop-Down Lists

그림 6: 현재 범주를 Drop-Down Lists(전체 크기 이미지를 보려면 클릭)

2단계: Products DataList 추가

master/세부 정보 보고서의 마지막 단계는 선택한 범주와 연결된 제품을 나열하는 것입니다. 이렇게 하려면 페이지에 DataList를 추가하고 라는 ProductsByCategoryDataSource새 ObjectDataSource를 만듭니다. 컨트롤이 ProductsByCategoryDataSource 클래스의 GetProductsByCategoryID(categoryID) 메서드에서 ProductsBLL 해당 데이터를 검색하게 합니다. 이 master/세부 정보 보고서는 읽기 전용이므로 INSERT, UPDATE 및 DELETE 탭에서 (없음) 옵션을 선택합니다.

GetProductsByCategoryID(categoryID) 메서드를 선택합니다.

그림 7: 메서드 선택 GetProductsByCategoryID(categoryID) (전체 크기 이미지를 보려면 클릭)

다음을 클릭하면 ObjectDataSource 마법사에서 메서드 categoryID 의 매개 변수에 대한 값의 원본을 GetProductsByCategoryID(categoryID) 묻는 메시지를 표시합니다. 선택한 categories DropDownList 항목의 값을 사용하려면 매개 변수 원본을 Control로 설정하고 ControlID를 로 Categories설정합니다.

categoryID 매개 변수를 범주 드롭다운 목록의 값으로 설정합니다.

그림 8: 매개 변수를 categoryID DropDownList 값 Categories 으로 설정합니다(전체 크기 이미지를 보려면 클릭).

데이터 원본 구성 마법사를 완료하면 Visual Studio는 각 데이터 필드의 이름과 값을 표시하는 DataList에 대한 를 자동으로 생성 ItemTemplate 합니다. 제품 이름, 범주, 공급자, 단위당 수량 및 가격을 각 항목 사이에 요소를 삽입하는 와 함께 SeparatorTemplate 표시하는 를 대신 사용하도록 ItemTemplate DataList를 <hr> 개선해 보겠습니다. DataList 및 Repeater 컨트롤을 사용하여 데이터 표시 자습서의 예제에서 을 사용 ItemTemplate 하지만 시각적으로 가장 매력적이라고 생각하는 템플릿 태그를 자유롭게 사용할 수 있습니다.

이러한 변경을 수행한 후 DataList 및 해당 ObjectDataSource의 태그는 다음과 유사하게 표시됩니다.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" 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>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

잠시 시간을 내어 브라우저에서 진행 상황을 검사. 페이지를 처음 방문하면 선택한 범주(음료)에 속하는 제품이 표시되지만(그림 9에 표시된 대로) DropDownList를 변경해도 데이터가 업데이트되지 않습니다. DataList를 업데이트하려면 포스트백이 발생해야 하기 때문입니다. 이를 위해 DropDownList의 AutoPostBack 속성을 true 로 설정하거나 단추 웹 컨트롤을 페이지에 추가할 수 있습니다. 이 자습서에서는 DropDownList의 AutoPostBack 속성을 true로 설정하도록 선택했습니다.

그림 9와 10은 작동 중인 master/세부 보고서를 보여 줍니다.

페이지를 처음 방문하면 음료 제품이 표시됩니다.

그림 9: 페이지를 처음 방문할 때 음료 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).

새 제품(생성)을 선택하면 자동으로 PostBack이 발생하고 DataList가 업데이트됩니다.

그림 10: 새 제품 선택(생성) 자동으로 PostBack 발생, DataList 업데이트(전체 크기 이미지를 보려면 클릭)

"-- 범주 선택 --" 목록 항목 추가

페이지를 처음 방문할 FilterByDropDownList.aspx 때 DropDownList의 첫 번째 목록 항목(음료) 범주가 기본적으로 선택되어 DataList에 음료 제품이 표시됩니다. DropDownList를 사용하여 마스터/세부 정보 필터링 자습서에서는 기본적으로 선택된 DropDownList에 "-- 범주 선택 --" 옵션을 추가했으며, 이 옵션을 선택하면 데이터베이스의 모든 제품이 표시됩니다. 각 제품 행이 소량의 화면 부동산을 차지하므로 GridView에 제품을 나열할 때 이러한 접근 방식을 관리할 수 있었습니다. 그러나 DataList를 사용하면 각 제품의 정보가 훨씬 더 큰 화면 청크를 사용합니다. "-- 범주 선택 --" 옵션을 계속 추가하고 기본적으로 선택하도록 하겠습니다. 하지만 선택할 때 모든 제품을 표시하는 대신 제품을 표시하지 않도록 구성해 보겠습니다.

DropDownList에 새 목록 항목을 추가하려면 속성 창 이동하여 속성의 줄임표를 Items 클릭합니다. "-- 범주 선택 --" 및 를 사용하여 새 목록 항목을 Text 추가합니다 Value0.

추가

그림 11: "-- 범주 선택 --" 목록 항목 추가

또는 DropDownList에 다음 태그를 추가하여 목록 항목을 추가할 수 있습니다.

<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" EnableViewState="False">
 
    <asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

또한 DropDownList 컨트롤이 (기본값)으로 false 설정된 경우 범주가 ObjectDataSource의 DropDownList에 바인딩되면 수동으로 추가된 목록 항목을 덮어쓰기 때문에 DropDownList 컨트롤 AppendDataBoundItemstrue 을 로 설정해야 합니다.

AppendDataBoundItems 속성을 True로 설정

그림 12: 속성을 True로 설정 AppendDataBoundItems

"-- 범주 선택 --" 목록 항목의 값을 0 선택한 이유는 시스템에 값 0이 있는 범주가 없으므로 "-- 범주 선택 --" 목록 항목을 선택하면 제품 레코드가 반환되지 않기 때문입니다. 이를 확인하려면 잠시 브라우저를 통해 페이지를 방문하세요. 그림 13에서 볼 수 있듯이 처음에 페이지를 볼 때 "-- 범주 선택 --" 목록 항목이 선택되고 제품이 표시되지 않습니다.

Windows 컴퓨터에

그림 13: "-- 범주 선택 --" 목록 항목이 선택되면 제품이 표시되지 않습니다(전체 크기 이미지를 보려면 클릭).

"-- 범주 선택 --" 옵션을 선택할 때 모든 제품을 표시하려는 경우 대신 값을 -1 사용합니다. astute 판독기는 DropDownList를 사용하여 마스터/세부 필터링 자습서에서 값 -1 이 전달된 경우 categoryID 모든 제품 레코드가 반환되도록 클래스의 GetProductsByCategoryID(categoryID) 메서드를 업데이트 ProductsBLL 했음을 기억합니다.

요약

계층적으로 관련된 데이터를 표시할 때 master/세부 보고서를 사용하여 데이터를 표시하는 데 도움이 되는 경우가 많으며, 이 보고서를 통해 사용자는 계층 구조의 맨 위에서 데이터를 정독하고 세부 정보로 드릴다운할 수 있습니다. 이 자습서에서는 선택한 범주의 제품을 보여 주는 간단한 master/세부 보고서 작성을 검토했습니다. 이 작업은 범주 목록에 DropDownList를 사용하고 선택한 범주에 속하는 제품에 대한 DataList를 사용하여 수행되었습니다.

다음 자습서에서는 master 구분하고 두 페이지에 레코드를 자세히 설명합니다. 첫 번째 페이지에는 세부 정보를 볼 수 있는 링크와 함께 "master" 레코드 목록이 표시됩니다. 링크를 클릭하면 사용자가 두 번째 페이지로 이동합니다. 그러면 선택한 master 레코드에 대한 세부 정보가 표시됩니다.

행복한 프로그래밍!

저자 정보

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

특별한 감사...

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