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

작성자 : Scott Mitchell

PDF 다운로드

이 자습서에서는 DropDownList 컨트롤에 master 레코드를 표시하는 방법과 GridView에서 선택한 목록 항목의 세부 정보를 확인합니다.

소개

보고서의 일반적인 유형은 보고서가 "master" 레코드 집합을 표시하여 시작하는 master/세부 보고서입니다. 그런 다음 사용자는 master 레코드 중 하나로 드릴다운하여 레코드의 "세부 정보"를 master 볼 수 있습니다. 마스터/세부 보고서는 모든 범주를 보여 주는 보고서와 같은 일대다 관계를 시각화한 다음 사용자가 특정 범주를 선택하고 연결된 제품을 표시할 수 있도록 하는 등 일대다 관계를 시각화하는 데 적합합니다. 또한 master/세부 보고서는 특히 "넓은" 테이블(열이 많은 테이블)의 자세한 정보를 표시하는 데 유용합니다. 예를 들어 master/세부 보고서의 "master" 수준은 데이터베이스에 있는 제품의 제품 이름 및 단가만 표시할 수 있으며 특정 제품으로 드릴다운하면 추가 제품 필드(범주, 공급자, 단위당 수량 등)가 표시됩니다.

master/세부 보고서를 구현할 수 있는 방법에는 여러 가지가 있습니다. 이 자습서와 다음 세 가지 자습서에서는 다양한 master/세부 보고서를 살펴보겠습니다. 이 자습서에서는 DropDownList 컨트롤에 master 레코드를 표시하는 방법과 GridView에서 선택한 목록 항목의 세부 정보를 확인합니다. 특히 이 자습서의 master/세부 보고서에는 범주 및 제품 정보가 나열됩니다.

1단계: DropDownList에 범주 표시

master/세부 정보 보고서는 DropDownList의 범주를 나열하며, 선택한 목록 항목의 제품이 GridView의 페이지에서 더 아래로 표시됩니다. 첫 번째 작업은 DropDownList에 범주를 표시하는 것입니다. 폴더에서 FilterByDropDownList.aspxFiltering 페이지를 열고 도구 상자에서 페이지 디자이너로 DropDownList를 끌어서 해당 ID 속성을 로 Categories설정합니다. 그런 다음 DropDownList의 스마트 태그에서 데이터 원본 선택 링크를 클릭합니다. 그러면 데이터 원본 구성 마법사가 표시됩니다.

그림 1: DropDownList의 데이터 원본 지정(전체 크기 이미지를 보려면 클릭)

클래스 GetCategories() 의 메서드를 호출하는 라는 CategoriesDataSource 새 ObjectDataSource를 CategoriesBLL 추가하도록 선택합니다.

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

그림 3: 클래스 사용 CategoriesBLL 선택(전체 크기 이미지를 보려면 클릭)

그림 4: 메서드를 사용하도록 GetCategories() ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)

ObjectDataSource를 구성한 후에도 DropDownList에 표시할 데이터 원본 필드와 목록 항목의 값으로 연결해야 하는 데이터 원본 필드를 지정해야 합니다. CategoryName 필드를 표시로 하고 CategoryID 각 목록 항목의 값으로 갖습니다.

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

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

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

2단계: Products GridView 추가

master/세부 정보 보고서의 마지막 단계는 선택한 범주와 연결된 제품을 나열하는 것입니다. 이렇게 하려면 페이지에 GridView를 추가하고 라는 productsDataSource새 ObjectDataSource를 만듭니다. 컨트롤이 productsDataSource 클래스의 GetProductsByCategoryID(categoryID) 메서드에서 ProductsBLL 해당 데이터를 컬링하게 합니다.

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

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

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

잠시 시간을 내어 브라우저에서 진행 상황을 검사. 페이지를 처음 방문할 때 해당 제품은 선택한 범주(음료)에 속하지만(그림 9에 표시된 대로) DropDownList를 변경해도 데이터가 업데이트되지 않습니다. GridView를 업데이트하려면 포스트백이 발생해야 하기 때문입니다. 이를 위해 두 가지 옵션이 있습니다(둘 다 코드를 작성할 필요가 없음).

• 범주 DropDownList의AutoPostBack 속성을True로 설정합니다. DropDownList의 스마트 태그에서 AutoPostBack 사용 옵션을 선택하여 이 작업을 수행할 수 있습니다. 이렇게 하면 사용자가 DropDownList의 선택한 항목을 변경할 때마다 포스트백이 트리거됩니다. 따라서 사용자가 DropDownList에서 새 범주를 선택하면 포스트백이 계속되고 GridView가 새로 선택한 범주의 제품으로 업데이트됩니다. (이 자습서에서 사용한 접근 방식입니다.)
• DropDownList 옆에 단추 웹 컨트롤을 추가합니다. 해당 Text 속성을 새로 고침 또는 이와 유사한 항목으로 설정합니다. 이 방법을 사용하면 사용자가 새 범주를 선택한 다음 단추를 클릭해야 합니다. 단추를 클릭하면 포스트백이 발생하고 GridView가 업데이트되어 선택한 범주의 해당 제품이 나열됩니다.

그림 9 및 10은 실행 중인 master/세부 보고서를 보여 줍니다.

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

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

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

페이지를 처음 방문할 FilterByDropDownList.aspx 때 범주 DropDownList의 첫 번째 목록 항목(음료)이 기본적으로 선택되어 GridView에 음료 제품이 표시됩니다. 첫 번째 범주의 제품을 표시하는 대신 "-- 범주 선택 --"이라는 DropDownList 항목을 선택할 수 있습니다.

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

그림 11: 추가 -- 범주 선택 -- 목록 항목(전체 크기 이미지를 보려면 클릭)

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

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

또한 범주가 ObjectDataSource의 AppendDataBoundItems DropDownList에 바인딩되면 True가 아닌 경우 AppendDataBoundItems 수동으로 추가된 목록 항목을 덮어쓰므로 DropDownList 컨트롤의 를 True로 설정해야 합니다.

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

이러한 변경 후 페이지를 처음 방문할 때 "-- 범주 선택 --" 옵션이 선택되고 제품이 표시되지 않습니다.

그림 13: 초기 페이지 로드에 제품이 표시되지 않음(전체 크기 이미지를 보려면 클릭)

"-- 범주 선택 --" 목록 항목이 선택되어 있기 때문에 제품이 표시되지 않는 이유는 값이 이고 데이터베이스 CategoryID-1에 가 인 제품이 없기 때문입니다-1. 이 동작이 원하는 동작이면 이 시점에서 완료됩니다. 그러나 "-- 범주 선택 --" 목록 항목을 선택할 때 모든 범주를 표시하려면 클래스로 돌아가 ProductsBLL 서 전달된 categoryID 매개 변수가 0보다 작은 경우 메서드를 호출 GetProducts() 하도록 메서드를 사용자 지정 GetProductsByCategoryID(categoryID) 합니다.

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

여기서 사용되는 기술은 선언적 매개 변수 자습서에서 모든 공급자를 다시 표시하는 데 사용한 방식과 유사하지만 이 예제에서는 값을 -1 사용하여 모든 레코드를 대신 null검색해야 함을 나타냅니다. categoryID 이는 메서드의 GetProductsByCategoryID(categoryID) 매개 변수가 전달된 정수 값으로 예상되는 반면 선언적 매개 변수 자습서에서는 문자열 입력 매개 변수를 전달했기 때문입니다.

그림 14는 "-- 범주 선택 --" 옵션이 선택된 경우의 FilterByDropDownList.aspx 스크린샷을 보여줍니다. 여기서는 모든 제품이 기본적으로 표시되며 사용자는 특정 범주를 선택하여 디스플레이 범위를 좁힐 수 있습니다.

그림 14: 모든 제품이 기본적으로 나열됩니다(전체 크기 이미지를 보려면 클릭).

요약

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

다음 자습서에서는 두 개의 DropDownList를 사용하여 DropDownList 인터페이스를 한 단계 더 발전시킬 것입니다.

행복한 프로그래밍!

저자 정보

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

다음