작성자: 스콧 미첼
이 자습서에서는 GridView를 사용하여 데이터베이스의 공급업체를 나열하여 이 패턴을 구현합니다. GridView의 각 공급업체 행에는 클릭 시 선택한 공급업체에 대한 제품을 나열하는 별도의 페이지로 사용자를 이동시키는 제품 보기 링크가 포함됩니다.
소개
이전 두 자습서에서는 DropDownLists를 사용하여 단일 웹 페이지에 마스터/세부 보고서를 표시하여 "마스터" 레코드를 표시하고 GridView 또는 DetailsView 컨트롤을 표시하여 "세부 정보"를 표시하는 방법을 알아보았습니다. 마스터/세부 정보 보고서에 사용되는 또 다른 일반적인 패턴은 한 웹 페이지에 마스터 레코드와 다른 웹 페이지에 표시되는 세부 정보를 갖는 것입니다.
ASP.NET 포럼과 같은 포럼 웹 사이트는 실제로 이 패턴의 좋은 예입니다. ASP.NET 포럼은 시작하기, Web Forms, 데이터 프레젠테이션 컨트롤 등 다양한 포럼으로 구성됩니다. 각 포럼은 많은 스레드로 구성되며 각 스레드는 여러 게시물로 구성됩니다. ASP.NET 포럼 홈페이지에 포럼이 나열됩니다. 포럼을 클릭하면 해당 포럼의 스레드를 ShowForum.aspx 나열하는 페이지로 이동됩니다. 마찬가지로 스레드를 클릭하면 클릭된 스레드의 게시물을 표시하는 스레드로 이동합니다 ShowPost.aspx.
이 자습서에서는 GridView를 사용하여 데이터베이스의 공급업체를 나열하여 이 패턴을 구현합니다. GridView의 각 공급업체 행에는 클릭 시 선택한 공급업체에 대한 제품을 나열하는 별도의 페이지로 사용자를 이동시키는 제품 보기 링크가 포함됩니다.
1단계: 폴더에SupplierListMaster.aspx페이지 추가ProductsForSupplierDetails.aspxFiltering
세 번째 자습서에서 페이지 레이아웃을 정의할 때 , BasicReporting및 Filtering 폴더에 CustomFormatting여러 "시작" 페이지를 추가했습니다. 그러나 지금은 이 자습서의 시작 페이지를 추가하지 않았으므로 잠시 시간을 내어 폴더 FilteringSupplierListMaster.aspx에 두 개의 새 페이지를 ProductsForSupplierDetails.aspx 추가합니다.
SupplierListMaster.aspx 는 "마스터" 레코드(공급업체)를 나열하고 ProductsForSupplierDetails.aspx 선택한 공급업체의 제품을 표시합니다.
이 두 개의 새 페이지를 만들 때 마스터 페이지와 Site.master 연결해야 합니다.
그림 1: SupplierListMaster.aspx 및 ProductsForSupplierDetails.aspx 페이지를 Filtering 폴더에 추가
또한 프로젝트에 새 페이지를 추가할 때 사이트 맵 파일을 Web.sitemap업데이트해야 합니다. 이 자습서에서는 필터링 보고서 SupplierListMaster.aspx 요소의 <siteMapNode> 자식으로 다음 XML 콘텐츠를 사용하여 사이트 맵에 페이지를 추가하기만 하면됩니다.
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another." />
비고
K. Scott Allen의 무료 Visual Studio 사이트 맵 매크로를 사용하여 새 ASP.NET 페이지를 추가할 때 사이트 맵 파일을 업데이트하는 프로세스를 자동화할 수 있습니다.
2단계: SupplierListMaster.aspx에서 공급업체 목록 표시
SupplierListMaster.aspx 페이지와 ProductsForSupplierDetails.aspx 페이지를 만든 후, SupplierListMaster.aspx에서 공급자의 그리드뷰를 만드는 것이 다음 단계입니다. 페이지에 GridView를 추가하고 새 ObjectDataSource에 바인딩합니다. 이 ObjectDataSource는 SuppliersBLL 클래스의 GetSuppliers() 메서드를 사용하여 모든 공급업체를 반환해야 합니다.
그림 2: 클래스 선택 SuppliersBLL (전체 크기 이미지를 보려면 클릭)
그림 3: 메서드를 사용하도록 GetSuppliers() ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)
각 GridView 행에는 '제품 보기'라는 제목의 링크를 포함해야 합니다. 이 링크를 클릭하면 사용자가 ProductsForSupplierDetails.aspx 페이지로 이동하며, 선택한 행의 SupplierID 값을 쿼리 문자열로 전달합니다. 예를 들어, 사용자가 도쿄 트레이더 공급업체의 (값이 4인) SupplierID 제품 보기 링크를 클릭하면 ProductsForSupplierDetails.aspx?SupplierID=4로 리디렉션되어야 합니다.
이렇게 하려면 GridView에 HyperLinkField 를 추가하여 각 GridView 행에 하이퍼링크를 추가합니다. 먼저 GridView의 스마트 태그에서 열 편집 링크를 클릭합니다. 그런 다음, 왼쪽 위에 있는 목록에서 HyperLinkField를 선택하고 추가를 클릭하여 GridView의 필드 목록에 HyperLinkField를 포함합니다.
그림 4: GridView에 HyperLinkField 추가(전체 크기 이미지를 보려면 클릭)
HyperLinkField는 각 GridView 행의 링크에 있는 동일한 텍스트 또는 URL 값을 사용하도록 구성하거나 각 특정 행에 바인딩된 데이터 값에 기반할 수 있습니다. 모든 행에서 정적 값을 지정하려면 HyperLinkField Text 또는 NavigateUrl 속성을 사용합니다. 모든 행에 대해 링크 텍스트가 동일하도록 하려면 HyperLinkField의 Text 속성을 제품 보기로 설정합니다.
그림 5: HyperLinkField의 Text 속성을 제품 보기로 설정(전체 크기 이미지를 보려면 클릭)
GridView 행에 바인딩된 기본 데이터를 기반으로 텍스트 또는 URL 값을 설정하려면 DataTextField 또는 DataNavigateUrlFields 속성에서 가져올 데이터 필드를 지정합니다.
DataTextField 는 단일 데이터 필드로만 설정할 수 있습니다. DataNavigateUrlFields그러나 쉼표로 구분된 데이터 필드 목록으로 설정할 수 있습니다. 텍스트 또는 URL을 현재 행의 데이터 필드 값과 일부 정적 태그의 조합으로 기반으로 하는 경우가 많습니다. 예를 들어 이 자습서에서는 각 GridView 행의 ProductsForSupplierDetails.aspx?SupplierID=supplierID 값을 사용하여 HyperLinkField 링크의 URL이 supplierID가 되도록 SupplierID로 설정하려고 합니다. 여기서는 정적 값과 데이터 기반 값이 모두 필요합니다. 링크의 URL에서 ProductsForSupplierDetails.aspx?SupplierID= 부분은 정적이며, supplierID 부분은 각 행의 고유한 SupplierID 값인 데이터 기반 값입니다.
정적 값과 데이터 기반 값의 조합을 나타내려면 DataTextFormatString 및 DataNavigateUrlFormatString 속성을 사용하세요. 이러한 속성에서 필요에 따라 정적 태그를 입력한 다음, {0} 또는 DataTextField 속성에 지정된 필드의 값을 나타낼 곳에 마커 DataNavigateUrlFields을(를) 사용합니다. 속성에 여러 필드가 지정된 경우, 첫 번째 필드 값을 삽입할 위치에는 DataNavigateUrlFields, 두 번째 필드 값에는 {0}를 사용하는 방식으로 사용하십시오{1}.
튜토리얼에 적용하기 위해, 각 행마다의 데이터를 사용자 지정해야 하는 데이터 필드인 DataNavigateUrlFields 속성을 SupplierID로 설정하고, DataNavigateUrlFormatString 속성은 ProductsForSupplierDetails.aspx?SupplierID={0}로 설정해야 합니다.
그림 6: 하이퍼링크 필드를 구성하여 SupplierID 를 기준으로 적절한 링크 URL을 포함하도록 설정합니다(전체 크기 이미지를 보려면 클릭).
HyperLinkField를 추가한 후에는 GridView의 필드를 자유롭게 사용자 지정하고 순서를 다시 지정할 수 있습니다. 다음 마크업은 몇 가지 작은 필드 수준 조정을 완료한 후의 GridView를 보여 줍니다.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="SupplierID" DataSourceID="ObjectDataSource1"
EnableViewState="False">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="SupplierID"
DataNavigateUrlFormatString=
"ProductsForSupplierDetails.aspx?SupplierID={0}"
Text="View Products" />
<asp:BoundField DataField="CompanyName"
HeaderText="Company" SortExpression="CompanyName" />
<asp:BoundField DataField="City" HeaderText="City"
SortExpression="City" />
<asp:BoundField DataField="Country"
HeaderText="Country" SortExpression="Country" />
</Columns>
</asp:GridView>
잠시 시간을 내어 브라우저를 통해 SupplierListMaster.aspx 페이지를 보세요. 그림 7에서 볼 수 있듯이 페이지에는 현재 제품 보기 링크를 포함한 모든 공급업체가 나열됩니다. 제품 보기 링크를 클릭하면 공급업체의 정보를 쿼리 문자열에 포함시켜 ProductsForSupplierDetails.aspx로 이동합니다.
그림 7: 각 공급업체 행에 제품 보기 링크가 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
3단계: 공급업체 제품 나열ProductsForSupplierDetails.aspx
이 시점에서 SupplierListMaster.aspx 페이지는 사용자를 ProductsForSupplierDetails.aspx로 보내며, 선택한 공급자의 정보를 SupplierID를 통해 쿼리 문자열로 전달합니다. 이 자습서의 마지막 단계는 쿼리 문자열을 통해 전달된 ProductsForSupplierDetails.aspx 값과 동일한 SupplierID을 가진 SupplierID 내의 GridView에 제품을 표시하는 것입니다. 이 작업을 수행하려면 ProductsForSupplierDetails.aspx 페이지에 GridView를 추가하고, ProductsBySupplierDataSource 클래스의 GetProductsBySupplierID(supplierID) 메서드를 호출하는 ProductsBLL라는 새 ObjectDataSource 컨트롤을 사용합니다.
그림 8: 새 ObjectDataSource 이름 ProductsBySupplierDataSource 추가(전체 크기 이미지를 보려면 클릭)
그림 9: 클래스 선택 ProductsBLL (전체 크기 이미지를 보려면 클릭)
그림 10: ObjectDataSource가 메서드를 GetProductsBySupplierID(supplierID) 호출하도록 합니다(전체 크기 이미지를 보려면 클릭).
데이터 원본 구성 마법사의 마지막 단계에서는 메서드 GetProductsBySupplierID(supplierID) 매개 변수의 원본을 supplierID 제공하도록 요청합니다. querystring 값을 사용하려면 매개 변수 원본을 QueryString으로 설정하고 QueryStringField 텍스트 상자(SupplierID)에서 사용할 쿼리 문자열 값의 이름을 입력합니다.
그림 11: 쿼리 문자열 값에서 supplierID 매개 변수 값 채우기SupplierID(전체 크기 이미지를 보려면 클릭)
그게 전부입니다! 그림 12에서는 ProductsForSupplierDetails.aspxSupplierListMaster.aspx의 도쿄 트레이더 링크를 클릭하여 방문한 페이지를 보여줍니다.
그림 12: 도쿄 트레이더가 제공하는 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).
공급업체 정보 표시 중ProductsForSupplierDetails.aspx
그림 12에서 볼 수 있듯이, ProductsForSupplierDetails.aspx 페이지는 쿼리 문자열에 지정된 SupplierID에 의해 제공되는 제품을 단순히 나열합니다. 그러나 이 페이지로 직접 보낸 사람은 그림 12가 도쿄 트레이더의 제품을 보여주고 있다는 것을 알지 못합니다. 이 문제를 해결하기 위해 이 페이지에도 공급업체 정보를 표시할 수 있습니다.
먼저 제품 GridView 위에 FormView를 추가합니다. 새 SuppliersDataSource ObjectDataSource 컨트롤을 만들고, SuppliersBLL 클래스의 GetSupplierBySupplierID(supplierID) 메서드를 호출합니다.
그림 13: 클래스 선택 SuppliersBLL (전체 크기 이미지를 보려면 클릭)
그림 14: ObjectDataSource에서 메서드를 GetSupplierBySupplierID(supplierID) 호출하도록 합니다(전체 크기 이미지를 보려면 클릭).
ProductsBySupplierDataSource와 마찬가지로, supplierID 매개 변수에 SupplierID 쿼리 문자열의 값이 할당됩니다.
그림 15: Querystring 값에서 supplierID 매개 변수 값 채우기SupplierID(전체 크기 이미지를 보려면 클릭)
디자인 보기에서 FormView를 ObjectDataSource에 바인딩할 때 Visual Studio는 자동으로 FormView ItemTemplateInsertItemTemplateEditItemTemplate 를 만들고 ObjectDataSource에서 반환된 각 데이터 필드에 대한 레이블 및 TextBox 웹 컨트롤을 사용합니다. 공급업체 정보를 표시하기만 하면 되므로 InsertItemTemplate와 EditItemTemplate를 자유롭게 제거하세요. 다음으로, ItemTemplate을 편집하여 공급자의 회사 이름을 요소에 <h3> 표시하고 회사 이름 아래에 주소, 도시, 국가/지역 및 전화 번호를 표시합니다. 또는 "DataSourceID" 자습서에서 했던 것처럼, FormView의 ItemTemplate을 수동으로 설정하고 마크업을 생성할 수 있습니다.
이러한 편집 후 FormView의 선언적 태그는 다음과 유사하게 표시됩니다.
<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
DataSourceID="suppliersDataSource" EnableViewState="False">
<ItemTemplate>
<h3><%# Eval("CompanyName") %></h3>
<p>
<asp:Label ID="AddressLabel" runat="server"
Text='<%# Bind("Address") %>'></asp:Label><br />
<asp:Label ID="CityLabel" runat="server"
Text='<%# Bind("City") %>'></asp:Label>,
<asp:Label ID="CountryLabel" runat="server"
Text='<%# Bind("Country") %>'></asp:Label><br />
Phone:
<asp:Label ID="PhoneLabel" runat="server"
Text='<%# Bind("Phone") %>'></asp:Label>
</p>
</ItemTemplate>
</asp:FormView>
그림 16은 위에 설명된 공급업체 정보가 포함된 후 페이지의 스크린샷 ProductsForSupplierDetails.aspx 을 보여줍니다.
그림 16: 제품 목록에 공급업체에 대한 요약이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
UI에 대한 마무리 작업 적용
이 보고서의 사용자 환경을 개선하기 위해 페이지에 추가해야 하는 ProductsForSupplierDetails.aspx 몇 가지 추가 사항이 있습니다. 현재 사용자가 ProductsForSupplierDetails.aspx 페이지에서 공급업체 목록으로 돌아갈 수 있는 유일한 방법은 브라우저의 뒤로 버튼을 클릭하는 것입니다.
ProductsForSupplierDetails.aspx 페이지에 사용자가 마스터 목록으로 돌아갈 수 있도록 SupplierListMaster.aspx로 연결되는 HyperLink 컨트롤을 추가해 보겠습니다.
그림 17: 하이퍼링크 컨트롤을 추가하여 사용자를 뒤로 SupplierListMaster.aspx 이동합니다(전체 크기 이미지를 보려면 클릭).
사용자가 제품이 없는 ProductsBySupplierDataSource 공급업체의 제품 보기 링크를 클릭하면 ObjectDataSource ProductsForSupplierDetails.aspx 의 결과가 반환되지 않습니다. ObjectDataSource에 바인딩된 GridView는 태그를 렌더링하지 않으므로 사용자 브라우저의 페이지에 빈 영역이 생성됩니다. 선택한 공급업체와 연결된 제품이 없다는 것을 사용자에게 보다 명확하게 전달하기 위해 GridView의 EmptyDataText 속성을 이러한 상황이 발생할 때 표시하려는 메시지로 설정할 수 있습니다. 이 속성을 "이 공급업체에서 제공하는 제품이 없습니다"로 설정했습니다.
기본적으로 Northwinds 데이터베이스의 모든 공급업체는 하나 이상의 제품을 제공합니다. 그러나 이 자습서에서는 공급업체 Escargots Nouveaux가 더 이상 제품과 연결되지 않도록 테이블을 수동으로 수정 Products 했습니다. 그림 18에서는 이 변경이 수행된 후 Escargots Nouveaux에 대한 세부 정보 페이지를 보여 줍니다.
그림 18: 공급업체에서 제품을 제공하지 않는다는 알림이 사용자에게 표시됩니다(전체 크기 이미지를 보려면 클릭).
요약
마스터/세부 정보 보고서는 하나의 페이지에 마스터 레코드와 세부 정보 레코드를 모두 표시할 수 있지만 많은 웹 사이트에서는 두 웹 페이지로 구분됩니다. 이 자습서에서는 공급업체가 "마스터" 웹 페이지의 GridView에 나열되고 관련 제품이 "세부 정보" 페이지에 나열되도록 하여 이러한 마스터/세부 보고서를 구현하는 방법을 살펴보았습니다. 마스터 웹 페이지의 각 공급자 행에는 행의 SupplierID 값을 따라 전달된 세부 정보 페이지에 대한 링크가 포함되어 있습니다. 이러한 행별 링크는 GridView의 HyperLinkField를 사용하여 쉽게 추가할 수 있습니다.
세부 정보 페이지에서 지정된 공급자에 대한 제품을 검색하는 작업은 ProductsBLL 클래스의 GetProductsBySupplierID(supplierID) 메서드를 호출함으로써 수행되었습니다. 매개 변수 값은 supplierID 쿼리 문자열을 매개 변수 원본으로 사용하여 선언적으로 지정되었습니다. 또한 FormView를 사용하여 세부 정보 페이지에서 공급업체 세부 정보를 표시하는 방법도 살펴보았습니다.
다음 자습서는 마스터/세부 정보 보고서의 마지막 자습서입니다. 각 행에 선택 단추가 있는 GridView에서 제품 목록을 표시하는 방법을 살펴보겠습니다. 선택 단추를 클릭하면 해당 제품의 세부 정보가 같은 페이지의 DetailsView 컨트롤에 표시됩니다.
행복한 프로그래밍!
작성자 정보
7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 Sams Teach Yourself ASP.NET 2.0 in 24 Hours입니다. 그에게 mitchell@4GuysFromRolla.com으로 연락할 수 있습니다.
특별히 감사드립니다.
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 Hilton Giesenow였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 mitchell@4GuysFromRolla.com으로 메시지를 보내 주세요.