GridView(VB)를 사용하여 두 페이지에서 마스터/세부 정보 필터링
작성자 : Scott Mitchell
이 자습서에서는 GridView를 사용하여 데이터베이스의 공급자를 나열하여 이 패턴을 구현합니다. GridView의 각 공급업체 행에는 제품 보기 링크가 포함됩니다. 이 링크를 클릭하면 사용자가 선택한 공급업체의 제품을 나열하는 별도의 페이지로 이동합니다.
소개
이전 두 자습서에서는 DropDownLists를 사용하여 단일 웹 페이지에 master/세부 보고서를 표시하여 "master" 레코드와 GridView 또는 DetailsView 컨트롤을 표시하여 "세부 정보"를 표시하는 방법을 알아보았습니다. master/세부 정보 보고서에 사용되는 또 다른 일반적인 패턴은 한 웹 페이지에 master 레코드와 다른 웹 페이지에 표시되는 세부 정보를 갖는 것입니다. ASP.NET 포럼과 같은 포럼 웹 사이트는 실제로 이 패턴의 좋은 예입니다. ASP.NET 포럼은 시작, Web Forms, 데이터 프레젠테이션 컨트롤 등 다양한 포럼으로 구성됩니다. 각 포럼은 많은 스레드로 구성되며 각 스레드는 여러 게시물로 구성됩니다. ASP.NET 포럼 홈페이지에 포럼이 나열됩니다. 포럼을 클릭하면 해당 포럼의 스레드를 ShowForum.aspx 나열하는 페이지가 표시됩니다. 마찬가지로 스레드를 클릭하면 클릭된 스레드의 게시물을 표시하는 로 이동합니다 ShowPost.aspx.
이 자습서에서는 GridView를 사용하여 데이터베이스의 공급자를 나열하여 이 패턴을 구현합니다. GridView의 각 공급업체 행에는 제품 보기 링크가 포함됩니다. 이 링크를 클릭하면 사용자가 선택한 공급업체의 제품을 나열하는 별도의 페이지로 이동합니다.
1단계: 폴더에Filtering및ProductsForSupplierDetails.aspx페이지 추가SupplierListMaster.aspx
세 번째 자습서에서 페이지 레이아웃을 정의할 때 , Filtering및 CustomFormatting 폴더에 BasicReporting여러 "시작" 페이지를 추가했습니다. 그러나 지금은 이 자습서의 시작 페이지를 추가하지 않았으므로 잠시 시간을 내어 폴더에 및 ProductsForSupplierDetails.aspx라는 SupplierListMaster.aspx 두 개의 새 페이지를 Filtering 추가합니다. SupplierListMaster.aspx는 "master" 레코드(공급자)를 나열하고 ProductsForSupplierDetails.aspx 선택한 공급업체의 제품을 표시합니다.
이러한 두 개의 새 페이지를 만들 때는 master 페이지와 Site.master 연결해야 합니다.
그림 1: 폴더에 SupplierListMaster.aspx 및 ProductsForSupplierDetails.aspx 페이지 Filtering 추가
또한 프로젝트에 새 페이지를 추가할 때 사이트 맵 파일 를 Web.sitemap그에 따라 업데이트해야 합니다. 이 자습서에서는 SupplierListMaster.aspx 다음 XML 콘텐츠를 Filtering Reports <siteMapNode> 요소의 자식으로 사용하여 사이트 맵에 페이지를 추가하기만 하면됩니다.
<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를 만드는 것입니다. 페이지에 GridView를 추가하고 새 ObjectDataSource에 바인딩합니다. 이 ObjectDataSource는 클래스의 GetSuppliers() 메서드를 SuppliersBLL 사용하여 모든 공급자를 반환해야 합니다.
그림 2: 클래스 선택 SuppliersBLL (전체 크기 이미지를 보려면 클릭)
그림 3: 메서드를 사용하도록 GetSuppliers() ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)
각 GridView 행에 제품 보기라는 제목의 링크를 포함해야 합니다. 이 링크를 클릭하면 사용자가 querystring을 ProductsForSupplierDetails.aspx 통해 선택한 행의 SupplierID 값을 전달합니다. 예를 들어 사용자가 Tokyo Traders 공급자(값이 4인) SupplierID 에 대한 제품 보기 링크를 클릭하면 로 ProductsForSupplierDetails.aspx?SupplierID=4전송되어야 합니다.
이렇게 하려면 GridView에 HyperLinkField 를 추가하여 각 GridView 행에 하이퍼링크를 추가합니다. 먼저 GridView의 스마트 태그에서 열 편집 링크를 클릭합니다. 다음으로 왼쪽 위에 있는 목록에서 HyperLinkField를 선택하고 추가를 클릭하여 GridView의 필드 목록에 HyperLinkField를 포함합니다.
그림 4: GridView에 HyperLinkField 추가(전체 크기 이미지를 보려면 클릭)
HyperLinkField는 각 GridView 행의 링크와 동일한 텍스트 또는 URL 값을 사용하도록 구성하거나 각 특정 행에 바인딩된 데이터 값에 따라 이러한 값을 기반으로 할 수 있습니다. 모든 행에서 정적 값을 지정하려면 HyperLinkField 또는 TextNavigateUrl 속성을 사용합니다. 모든 행에 대해 링크 텍스트가 동일하도록 하려면 HyperLinkField의 Text 속성을 제품 보기로 설정합니다.
그림 5: HyperLinkField의 Text 속성을 제품 보기로 설정(전체 크기 이미지를 보려면 클릭)
GridView 행에 바인딩된 기본 데이터를 기반으로 텍스트 또는 URL 값을 설정하려면 또는 DataNavigateUrlFields 속성에서 DataTextField 텍스트 또는 URL 값을 가져와야 하는 데이터 필드를 지정합니다. DataTextField 는 단일 데이터 필드로만 설정할 수 있습니다. DataNavigateUrlFields그러나 는 쉼표로 구분된 데이터 필드 목록으로 설정할 수 있습니다. 현재 행의 데이터 필드 값과 일부 정적 태그를 조합하여 텍스트 또는 URL을 기반으로 하는 경우가 자주 있습니다. 예를 들어 이 자습서에서는 HyperLinkField 링크의 URL을 로 지정합니다 ProductsForSupplierDetails.aspx?SupplierID=supplierID. 여기서 supplierID 은 각 GridView의 행 값입니다 SupplierID . 여기서 ProductsForSupplierDetails.aspx?SupplierID= 는 정적 값과 데이터 기반 값이 모두 필요합니다. 링크 URL의 부분은 정적인 반면 supplierID , 해당 값은 각 행의 고유한 SupplierID 값이므로 부분은 데이터 기반입니다.
정적 값과 데이터 기반 값의 조합을 나타내려면 및 DataNavigateUrlFormatString 속성을 사용합니다DataTextFormatString. 이러한 속성에서 필요에 따라 정적 태그를 입력한 다음 또는 DataNavigateUrlFields 속성에 DataTextField 지정된 필드의 값을 표시할 표 {0} 식을 사용합니다. 속성에 DataNavigateUrlFields 여러 필드가 지정된 경우 첫 번째 필드 값을 삽입할 위치, {1} 두 번째 필드 값 등에 대해 를 사용합니다{0}.
이 값을 행별로 ProductsForSupplierDetails.aspx?SupplierID={0}DataNavigateUrlFormatString 사용자 지정해야 하는 데이터 필드이고 속성을 로 설정하려면 이 SupplierID속성을 로 설정 DataNavigateUrlFields 해야 합니다.
그림 6: 에 따라 SupplierID 적절한 링크 URL을 포함하도록 HyperLinkField 구성(전체 크기 이미지를 보려면 클릭)
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에서 볼 수 있듯이 페이지에는 현재 제품 보기 링크를 포함한 모든 공급업체가 나열되어 있습니다. 제품 보기 링크를 클릭하면 쿼리 문자열에서 공급자의 SupplierID 를 따라 전달되는 로 이동합니다ProductsForSupplierDetails.aspx.
그림 7: 각 공급업체 행에 제품 보기 링크가 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
3단계: 공급업체 제품 나열ProductsForSupplierDetails.aspx
이 시점에서 SupplierListMaster.aspx 페이지는 사용자를 에 ProductsForSupplierDetails.aspx보내고, 선택한 공급자의 SupplierID 를 querystring에 전달합니다. 이 자습서의 마지막 단계는 querystring을 통해 전달된 와 같은 SupplierID 의 GridView SupplierIDProductsForSupplierDetails.aspx 에 제품을 표시하는 것입니다. 이 작업을 수행하려면 먼저 클래스에서 메서드를 호출하는 ProductsForSupplierDetails.aspx 라는 ProductsBySupplierDataSource 새 ObjectDataSource 컨트롤을 사용하여 페이지에 GridView를 GetProductsBySupplierID(supplierID)ProductsBLL 추가합니다.
그림 8: 새 ObjectDataSource 이름 ProductsBySupplierDataSource 추가(전체 크기 이미지를 보려면 클릭)
그림 9: 클래스 선택 ProductsBLL (전체 크기 이미지를 보려면 클릭)
그림 10: ObjectDataSource가 메서드를 GetProductsBySupplierID(supplierID) 호출하도록 합니다(전체 크기 이미지를 보려면 클릭).
데이터 원본 구성 마법사의 마지막 단계에서는 메서드 supplierID 매개 변수의 원본을 GetProductsBySupplierID(supplierID) 제공하도록 요청합니다. querystring 값을 사용하려면 매개 변수 원본을 QueryString으로 설정하고 QueryStringField 텍스트 상자(SupplierID)에 사용할 querystring 값의 이름을 입력합니다.
그림 11: Querystring 값에서 SupplierID 매개 변수 값 채우기supplierID(전체 크기 이미지를 보려면 클릭)
이제 모든 작업을 마쳤습니다. 그림 12에서는 에서 SupplierListMaster.aspx도쿄 트레이더 링크를 클릭하여 방문한 페이지를 보여 ProductsForSupplierDetails.aspx 줍니다.
그림 12: 도쿄 트레이더가 제공한 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).
에 공급업체 정보 표시ProductsForSupplierDetails.aspx
그림 12와 ProductsForSupplierDetails.aspx 같이 페이지에는 쿼리 문자열에 지정된 에서 제공하는 SupplierID 제품이 나열됩니다. 그러나 이 페이지로 직접 보낸 사람은 그림 12가 도쿄 트레이더의 제품을 보여주고 있다는 것을 알지 못합니다. 이 문제를 해결하기 위해 이 페이지에도 공급업체 정보를 표시할 수 있습니다.
먼저 제품 GridView 위에 FormView를 추가합니다. 클래스 GetSupplierBySupplierID(supplierID) 의 메서드를 호출하는 라는 SuppliersDataSource 새 ObjectDataSource 컨트롤을 SuppliersBLL 만듭니다.
그림 13: 클래스 선택 SuppliersBLL (전체 크기 이미지를 보려면 클릭)
그림 14: ObjectDataSource가 메서드를 GetSupplierBySupplierID(supplierID) 호출하도록 합니다(전체 크기 이미지를 보려면 클릭).
와 ProductsBySupplierDataSource마찬가지로 매개 변수에 supplierID querystring 값 값이 SupplierID 할당됩니다.
그림 15: Querystring 값에서 SupplierID 매개 변수 값 채우기supplierID(전체 크기 이미지를 보려면 클릭)
디자인 보기에서 FormView를 ObjectDataSource에 바인딩할 때 Visual Studio는 ObjectDataSource에서 반환된 각 데이터 필드에 대해 Label 및 TextBox 웹 컨트롤을 사용하여 FormView의 ItemTemplate, InsertItemTemplate및 EditItemTemplate 를 자동으로 만듭니다. 공급업체 정보를 표시하기만 하므로 및 EditItemTemplate를 InsertItemTemplate 자유롭게 제거할 수 있습니다. 다음으로, ItemTemplate을 편집하여 공급자의 회사 이름을 요소에 <h3> 표시하고 회사 이름 아래에 주소, 도시, 국가/지역 및 전화 번호를 표시합니다. 또는 "ObjectDataSource를 사용하여 데이터 표시" 자습서에서와 같이 FormView DataSourceID 를 수동으로 설정하고 태그를 만들 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 컨트롤 ProductsForSupplierDetails.aspx 을 추가하여 사용자가 master 목록으로 돌아갈 수 있는 또 다른 방법을 살펴보겠습니다.
그림 17: HyperLink 컨트롤을 추가하여 사용자를 다시 연결합니다 SupplierListMaster.aspx (전체 크기 이미지를 보려면 클릭).
사용자가 제품이 없는 ProductsBySupplierDataSource 공급업체의 제품 보기 링크를 클릭하면 의 ObjectDataSource는 ProductsForSupplierDetails.aspx 결과를 반환하지 않습니다. ObjectDataSource에 바인딩된 GridView는 태그를 렌더링하지 않으므로 사용자 브라우저의 페이지에서 빈 영역이 생성됩니다. 선택한 공급자와 연결된 제품이 없다는 것을 사용자에게 보다 명확하게 전달하기 위해 GridView의 EmptyDataText 속성을 이러한 상황이 발생할 때 표시하려는 메시지로 설정할 수 있습니다. 이 속성을 "이 공급자가 제공하는 제품이 없습니다"로 설정했습니다.
기본적으로 Northwinds 데이터베이스의 모든 공급업체는 하나 이상의 제품을 제공합니다. 그러나 이 자습서에서는 공급업체 Escargots Nouveaux가 더 이상 제품과 연결되지 않도록 테이블을 수동으로 수정 Products 했습니다. 그림 18에서는 이 변경 후 에스카고트 누보의 세부 정보 페이지를 보여 줍니다.
그림 18: 공급자가 제품을 제공하지 않는다는 알림(전체 크기 이미지를 보려면 클릭)
요약
master/세부 정보 보고서는 단일 페이지에 master 및 세부 정보 레코드를 모두 표시할 수 있지만 많은 웹 사이트에서 두 웹 페이지에 걸쳐 구분됩니다. 이 자습서에서는 공급업체가 "master" 웹 페이지의 GridView에 나열되고 "세부 정보" 페이지에 나열된 관련 제품을 사용하여 이러한 master/세부 보고서를 구현하는 방법을 살펴보았습니다. master 웹 페이지의 각 공급자 행에는 행 값을 SupplierID 따라 전달된 세부 정보 페이지에 대한 링크가 포함되어 있습니다. 이러한 행별 링크는 GridView의 HyperLinkField를 사용하여 쉽게 추가할 수 있습니다.
지정된 공급자에 대한 해당 제품을 검색하는 세부 정보 페이지에서 클래스의 GetProductsBySupplierID(supplierID) 메서드를 호출하여 ProductsBLL 수행되었습니다. 매개 변수 값은 supplierID querystring을 매개 변수 원본으로 사용하여 선언적으로 지정되었습니다. FormView를 사용하여 세부 정보 페이지에서 공급업체 세부 정보를 표시하는 방법도 살펴보았습니다.
다음 자습서는 master/세부 보고서에 대한 마지막 자습서입니다. 각 행에 선택 단추가 있는 GridView에서 제품 목록을 표시하는 방법을 살펴보겠습니다. 선택 단추를 클릭하면 동일한 페이지의 DetailsView 컨트롤에 해당 제품의 세부 정보가 표시됩니다.
행복한 프로그래밍!
저자 정보
7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술로 작업해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 티치 유어셀프 ASP.NET 24시간 만에 2.0입니다. 그는 에서mitchell@4GuysFromRolla.com 또는 에서 찾을 http://ScottOnWriting.NET수있는 자신의 블로그를 통해 도달 할 수 있습니다.
특별 감사
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 Hilton Giesenow였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.