DropDownList 한 개로 마스터/세부 정보 필터링(VB)Master/Detail Filtering With a DropDownList (VB)

Scott Mitchellby Scott Mitchell

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

이 자습서에서는 GridView에서 마스터 레코드를 표시 하는 방법과 GridView에서 선택한 목록 항목의 세부 정보를 표시 하는 방법을 알아봅니다.In this tutorial we'll see how to display the master records in a DropDownList control and the details of the selected list item in a GridView.

소개Introduction

일반 보고서 유형으로는 마스터/세부 정보 보고서가 있습니다 .이 보고서는 보고서가 "마스터" 레코드 집합을 표시 하는 것으로 시작 합니다.A common type of report is the master/detail report, in which the report begins by showing some set of "master" records. 그러면 사용자가 마스터 레코드 중 하나로 드릴 다운 하 여 해당 마스터 레코드의 "세부 정보"를 볼 수 있습니다.The user can then drill down into one of the master records, thereby viewing that master record's "details." 마스터/세부 정보 보고서는 모든 범주를 표시 하는 보고서와 같이 사용자가 특정 범주를 선택 하 고 연결 된 제품을 표시할 수 있도록 하는 일대다 관계를 시각화 하는 데 적합 한 옵션입니다.Master/detail reports are an ideal choice for visualizing one-to-many relationships, such as a report showing all of the categories and then allowing a user to select a particular category and display its associated products. 또한 마스터/세부 정보 보고서는 특히 많은 열을 포함 하는 테이블의 세부 정보를 표시 하는 데 유용 합니다.Additionally, master/detail reports are useful for displaying detailed information from particularly "wide" tables (ones that have a lot of columns). 예를 들어 마스터/세부 보고서의 "마스터" 수준에는 데이터베이스에 있는 제품의 제품 이름 및 단가만 표시 되 고 특정 제품으로 드릴 다운 하면 추가 제품 필드 (범주, 공급자, 단위당 수량 등)가 표시 됩니다.For example, the "master" level of a master/detail report might show just the product name and unit price of the products in the database, and drilling down into a particular product would show the additional product fields (category, supplier, quantity per unit, and so on).

마스터/세부 정보 보고서를 구현할 수 있는 여러 가지 방법이 있습니다.There are many ways with which a master/detail report can be implemented. 이를 통해 다음 세 가지 자습서에서는 다양 한 마스터/세부 정보 보고서를 살펴보겠습니다.Over this and the next three tutorials we'll look at a variety of master/detail reports. 이 자습서에서는 GridView에서 마스터 레코드를 표시 하는 방법과 GridView에서 선택한 목록 항목의 세부 정보를 표시 하는 방법을 알아봅니다.In this tutorial we'll see how to display the master records in a DropDownList control and the details of the selected list item in a GridView. 특히이 자습서의 마스터/세부 정보 보고서에는 범주 및 제품 정보가 나열 됩니다.In particular, this tutorial's master/detail report will list category and product information.

1 단계: DropDownList에 범주 표시Step 1: Displaying the Categories in a DropDownList

마스터/세부 정보 보고서에는 선택한 목록 항목의 제품이 GridView의 페이지 아래쪽에 표시 되는 DropDownList의 범주가 나열 됩니다.Our master/detail report will list the categories in a DropDownList, with the selected list item's products displayed further down in the page in a GridView. 앞서 첫 번째 작업은 범주를 DropDownList에 표시 하는 것입니다.The first task ahead of us, then, is to have the categories displayed in a DropDownList. Filtering 폴더에서 FilterByDropDownList.aspx 페이지를 열고 도구 상자에서 페이지의 디자이너로 DropDownList를 끌어서 ID 속성을 Categories로 설정 합니다.Open the FilterByDropDownList.aspx page in the Filtering folder, drag on a DropDownList from the Toolbox onto the page's designer, and set its ID property to Categories. 다음으로, DropDownList의 스마트 태그에서 데이터 소스 선택 링크를 클릭 합니다.Next, click on the Choose Data Source link from the DropDownList's smart tag. 그러면 데이터 소스 구성 마법사가 표시 됩니다.This will display the Data Source Configuration wizard.

DropDownList의 데이터 원본을 지정 Specify the DropDownList's Data Source

그림 1: DropDownList의 데이터 원본 지정 (전체 크기 이미지를 보려면 클릭)Figure 1: Specify the DropDownList's Data Source (Click to view full-size image)

CategoriesBLL 클래스의 GetCategories() 메서드를 호출 하는 CategoriesDataSource 라는 새 ObjectDataSource를 추가 하도록 선택 합니다.Choose to add a new ObjectDataSource named CategoriesDataSource that invokes the CategoriesBLL class's GetCategories() method.

새 ObjectDataSource 명명 된 범주 Datasource를 추가 Add a New ObjectDataSource Named CategoriesDataSource

그림 2: 이름이 CategoriesDataSource 새 ObjectDataSource 추가 (전체 크기 이미지를 보려면 클릭)Figure 2: Add a New ObjectDataSource Named CategoriesDataSource (Click to view full-size image)

범주 Bll 클래스를 사용 하도록 선택 합니다.Choose to Use the CategoriesBLL Class

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

GetCategories () 메서드를 사용 하도록 ObjectDataSource를 구성 Configure the ObjectDataSource to Use the GetCategories() Method

그림 4: GetCategories() 메서드를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 4: Configure the ObjectDataSource to Use the GetCategories() Method (Click to view full-size image)

ObjectDataSource를 구성한 후에는 DropDownList에 표시 해야 하는 데이터 원본 필드와 목록 항목의 값으로 연결 해야 하는 데이터 원본 필드를 지정 해야 합니다.After configuring the ObjectDataSource we still need to specify what data source field should be displayed in DropDownList and which one should be associated as the value for the list item. CategoryName 필드를 표시 하 고 각 목록 항목의 값으로 CategoryID 합니다.Have the CategoryName field as the display and CategoryID as the value for each list item.

DropDownList에서 범주 필드를 표시 하 고 CategoryID를 값으로 사용 Have the DropDownList Display the CategoryName Field and Use CategoryID as the Value

그림 5: DropDownList에 CategoryName 필드가 표시 되 고 CategoryID 값으로 사용 (전체 크기 이미지를 보려면 클릭)Figure 5: Have the DropDownList Display the CategoryName Field and Use CategoryID as the Value (Click to view full-size image)

이 시점에서 Categories 테이블의 레코드를 사용 하 여 채워진 DropDownList 컨트롤이 있습니다 (약 6 초 후에 수행 됨).At this point we have a DropDownList control that's populated with the records from the Categories table (all accomplished in about six seconds). 그림 6에서는 브라우저를 통해 볼 때의 진행률을 보여 줍니다.Figure 6 shows our progress thus far when viewed through a browser.

드롭다운 목록에서 현재 범주를 합니다.A Drop-Down Lists the Current Categories

그림 6: 드롭다운 목록에 현재 범주가 나열 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 6: A Drop-Down Lists the Current Categories (Click to view full-size image)

2 단계: Products GridView 추가Step 2: Adding the Products GridView

마스터/세부 정보 보고서의 마지막 단계는 선택한 범주와 관련 된 제품을 나열 하는 것입니다.That last step in our master/detail report is to list the products associated with the selected category. 이를 수행 하려면 페이지에 GridView를 추가 하 고 이름이 productsDataSource인 새 ObjectDataSource를 만듭니다.To accomplish this, add a GridView to the page and create a new ObjectDataSource named productsDataSource. productsDataSource 컨트롤이 ProductsBLL 클래스의 GetProductsByCategoryID(categoryID) 메서드에서 데이터를 추려내 합니다.Have the productsDataSource control cull its data from the ProductsBLL class's GetProductsByCategoryID(categoryID) method.

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

그림 7: GetProductsByCategoryID(categoryID) 방법 선택 (전체 크기 이미지를 보려면 클릭)Figure 7: Select the GetProductsByCategoryID(categoryID) Method (Click to view full-size image)

이 메서드를 선택 하면 ObjectDataSource 마법사에서 메서드의 categoryID 매개 변수에 대 한 값을 묻는 메시지를 표시 합니다.After choosing this method, the ObjectDataSource wizard prompts us for the value for the method's categoryID parameter. 선택한 categories DropDownList 항목의 값을 사용 하려면 매개 변수 소스를 제어 하 고 ControlID를 Categories설정 합니다.To use the value of the selected categories DropDownList item set the Parameter source to Control and the ControlID to Categories.

categoryID 매개 변수를 DropDownList 범주의 값으로 설정 합니다.Set the categoryID Parameter to the Value of the Categories DropDownList

그림 8: categoryID 매개 변수를 Categories DropDownList 값으로 설정 (전체 크기 이미지를 보려면 클릭)Figure 8: Set the categoryID Parameter to the Value of the Categories DropDownList (Click to view full-size image)

잠시 후 브라우저에서 진행 상황을 확인해 보세요.Take a moment to check out our progress in a browser. 페이지를 처음 방문 하면 선택 된 범주 (음료)에 속하는 해당 제품이 표시 됩니다 (그림 9에 표시 된 것 처럼). 그러나 DropDownList를 변경 해도 데이터가 업데이트 되지는 않습니다.When first visiting the page, those products belong to the selected category (Beverages) are displayed (as shown in Figure 9), but changing the DropDownList doesn't update the data. 이는 GridView를 업데이트 하기 위해 포스트백이 수행 되어야 하기 때문입니다.This is because a postback must occur for the GridView to update. 이를 위해 다음 두 가지 옵션을 사용할 수 없습니다 (코드를 작성 해야 하는 것은 아님).To accomplish this we have two options (neither of which requires writing any code):

  • 범주 DropDownList의AutoPostBack 속성True로 설정 합니다.Set the categories DropDownList'sAutoPostBack propertyto True. 이는 DropDownList의 스마트 태그에서 Enable AutoPostBack 옵션을 선택 하 여 수행할 수 있습니다. 이렇게 하면 사용자가 DropDownList의 선택 된 항목을 변경할 때마다 포스트백이 트리거됩니다.(You can accomplish this by checking the Enable AutoPostBack option in the DropDownList's smart tag.) This will trigger a postback whenever the DropDownList's selected item is changed by the user. 따라서 사용자가 DropDownList에서 새 범주를 선택 하면 포스트백이 뒤따르게 되 고 새로 선택한 범주에 대 한 제품으로 GridView가 업데이트 됩니다.Therefore, when the user selects a new category from the DropDownList a postback will ensue and the GridView will be updated with the products for the newly selected category. 이 방법은이 자습서에서 사용한 방법입니다.(This is the approach I've used in this tutorial.)
  • DropDownList 옆에 단추 웹 컨트롤을 추가 합니다.Add a Button Web control next to the DropDownList. Text 속성을 새로 고침으로 설정 하거나 비슷한 항목으로 설정 합니다.Set its Text property to Refresh or something similar. 이 방법에서는 사용자가 새 범주를 선택 하 고 단추를 클릭 해야 합니다.With this approach, the user will need to select a new category and then click the Button. 단추를 클릭 하면 포스트백이 발생 하 고 GridView를 업데이트 하 여 선택한 범주의 제품이 나열 됩니다.Clicking the Button will cause a postback and update the GridView to list those products of the selected category.

그림 9와 10은 마스터/세부 보고서를 실행 하는 방법을 보여 줍니다.Figures 9 and 10 illustrate the master/detail report in action.

페이지를 처음 방문할 때 음료 제품이 표시 됩니다.When First Visiting the Page, the Beverage Products are Displayed

그림 9: 페이지를 처음 방문할 때 음료 제품이 표시 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 9: When First Visiting the Page, the Beverage Products are Displayed (Click to view full-size image)

새 제품 (생성)을 선택 자동으로 포스트백이 발생 하 고 GridView가 업데이트 됩니다.Selecting a New Product (Produce) Automatically Causes a PostBack, Updating the GridView

그림 10: 새 제품 (생성)을 선택 하면 자동으로 다시 게시 되 고 GridView가 업데이트 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 10: Selecting a New Product (Produce) Automatically Causes a PostBack, Updating the GridView (Click to view full-size image)

"--범주 선택--" 목록 항목 추가Adding a "-- Choose a Category --" List Item

FilterByDropDownList.aspx 페이지를 처음 방문 하면 범주 DropDownList의 첫 번째 목록 항목 (음료)이 기본적으로 선택 되어 GridView의 음료 제품이 표시 됩니다.When first visiting the FilterByDropDownList.aspx page the categories DropDownList's first list item (Beverages) is selected by default, showing the beverage products in the GridView. 첫 번째 범주의 제품을 표시 하는 대신 "--범주 선택--"과 같은 항목을 선택 하는 DropDownList 항목을 대신 사용할 수 있습니다.Rather than showing the first category's products, we may want to instead have a DropDownList item selected that says something like, "-- Choose a Category --".

DropDownList에 새 목록 항목을 추가 하려면 속성 창로 이동 하 여 Items 속성에서 줄임표를 클릭 합니다.To add a new list item to the DropDownList, go to the Properties window and click on the ellipses in the Items property. Text "--범주 선택--"과 Value -1를 사용 하 여 새 목록 항목을 추가 합니다.Add a new list item with the Text "-- Choose a Category --" and the Value -1.

a를 추가 --범주 선택--목록 항목Add a -- Choose a Category -- List Item

그림 11: a--범주 선택--목록 항목 (전체 크기 이미지를 보려면 클릭)Figure 11: Add a -- Choose a Category -- List Item (Click to view full-size image)

또는 다음 태그를 DropDownList에 추가 하 여 목록 항목을 추가할 수 있습니다.Alternatively, you can add the list item by adding the following markup to the 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에서 DropDownList에 바인딩할 때 AppendDataBoundItems True가 아니면 수동으로 추가 된 목록 항목을 덮어쓰도록 AppendDataBoundItems DropDownList 컨트롤의을 True로 설정 해야 합니다.Additionally, we need to set the DropDownList control's AppendDataBoundItems to True because when the categories are bound to the DropDownList from the ObjectDataSource they'll overwrite any manually-added list items if AppendDataBoundItems isn't True.

AppendDataBoundItems 속성을 True로 설정 합니다.

그림 12: AppendDataBoundItems 속성을 True로 설정Figure 12: Set the AppendDataBoundItems Property to True

이러한 변경 후 페이지를 처음 방문 하면 "--범주 선택--" 옵션이 선택 되 고 제품이 표시 되지 않습니다.After these changes, when first visiting the page the "-- Choose a Category --" option is selected and no products are displayed.

초기 페이지 로드에 표시 되는 제품이 없습니다.On the Initial Page Load No Products are Displayed

그림 13: 초기 페이지 로드에서 제품이 표시 되지 않음 (전체 크기 이미지를 보려면 클릭)Figure 13: On the Initial Page Load No Products are Displayed (Click to view full-size image)

"--범주 선택--" 목록 항목을 선택 했기 때문에 제품이 표시 되지 않습니다. "목록 항목을 선택 했기 때문 -1``CategoryID -1입니다.The reason no products are displayed when because the "-- Choose a Category --" list item is selected is because its value is -1 and there are no products in the database with a CategoryID of -1. 이 동작을 원하는 경우이 시점에서 작업을 수행 합니다.If this is the behavior you want then you're done at this point! 그러나 "--범주 선택--" 목록 항목을 선택할 때 모든 범주를 표시 하려는 경우 ProductsBLL 클래스로 돌아가서 전달 된 categoryID 매개 변수가 0 보다 작은 경우 GetProducts() 메서드를 호출 하도록 GetProductsByCategoryID(categoryID) 메서드를 사용자 지정 합니다.If, however, you want to display all of the categories when the "-- Choose a Category --" list item is selected, return to the ProductsBLL class and customize the GetProductsByCategoryID(categoryID) method so that it invokes the GetProducts() method if the passed in categoryID parameter is less than zero:

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

여기서 사용 되는 기법은 모든 공급자를 선언적 매개 변수 자습서에 다시 표시 하는 데 사용 하는 방법과 비슷합니다 .이 예에서는 -1 값을 사용 하 여 Nothing와는 반대로 모든 레코드를 검색 해야 함을 나타냅니다.The technique used here is similar to the approach we used to display all suppliers back in the Declarative Parameters tutorial, although for this example we're using a value of -1 to indicate that all records should be retrieved as opposed to Nothing. 이는 GetProductsByCategoryID(categoryID) 메서드의 categoryID 매개 변수에 정수 값이 전달 될 것으로 예상 하는 반면 선언적 매개 변수 자습서에서는 문자열 입력 매개 변수를 전달 하기 때문입니다.This is because the categoryID parameter of the GetProductsByCategoryID(categoryID) method expects as integer value passed in, whereas in the Declarative Parameters tutorial we were passing in a string input parameter.

그림 14에서는 "--범주 선택--" 옵션이 선택 되어 있는 FilterByDropDownList.aspx의 스크린샷을 보여 줍니다.Figure 14 shows a screen shot of FilterByDropDownList.aspx when the "-- Choose a Category --" option is selected. 여기서는 모든 제품이 기본적으로 표시 되며, 사용자는 특정 범주를 선택 하 여 표시 범위를 좁힐 수 있습니다.Here, all of the products are displayed by default, and the user can narrow the display by choosing a specific category.

이제 모든 제품이 기본적으로 나열 All of the Products are Now Listed By Default

그림 14: 이제 모든 제품이 기본적으로 나열 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 14: All of the Products are Now Listed By Default (Click to view full-size image)

요약Summary

계층적으로 관련 된 데이터를 표시 하는 경우 사용자가 계층의 맨 위에서 데이터를 확인 하 고 세부 정보로 드릴 다운할 수 있는 마스터/세부 정보 보고서를 사용 하 여 데이터를 표시 하는 것이 좋습니다.When displaying hierarchically-related data, it often helps to present the data using master/detail reports, from which the user can start perusing the data from the top of the hierarchy and drill down into details. 이 자습서에서는 선택한 범주의 제품을 보여 주는 간단한 마스터/세부 정보 보고서 작성을 검토 했습니다.In this tutorial we examined building a simple master/detail report showing a selected category's products. 이는 범주 목록에 대해 DropDownList을 사용 하 고 선택한 범주에 속한 제품에 대해 GridView를 사용 하 여 수행 되었습니다.This was accomplished by using a DropDownList for the list of categories and a GridView for the products belonging to the selected category.

다음 자습서 에서는 두 개의 dropdownlist를 사용 하 여 DropDownList 인터페이스를 한 단계 더 살펴보겠습니다.In the next tutorial we'll take the DropDownList interface one step further, using two DropDownLists.

행복 한 프로그래밍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.