GridView を使用した 2 ページにわたるマスター/詳細フィルター処理 (VB)
このチュートリアルでは、GridView を使用してこのパターンを実装し、データベース内のサプライヤーを一覧表示します。 GridView 内の各サプライヤー行には、[View Products] リンクが含まれます。このリンクをクリックすると、選択したサプライヤーの製品を一覧表示する別のページにユーザーは移動します。
はじめに
前の 2 つのチュートリアルでは、DropDownList を使用して "マスター" レコードを表示し、GridView または DetailsView コントロールを使用して "詳細" を表示する、マスター/詳細レポートを 1 つの Web ページ内に表示する方法を確認しました。マスター/詳細レポートに使用されるもう 1 つの一般的なパターンは、マスター レコードを 1 つの Web ページ上に配置し、詳細を別のページ上に表示するというものです。 ASP.NET フォーラムのようなフォーラム Web サイトは、このパターンの実際の優れた例です。 ASP.NET フォーラムは、はじめに、Web Forms、データ プレゼンテーション コントロールなどのさまざまなフォーラムで構成されています。 各フォーラムは多数のスレッドで構成され、また各スレッドは多数の投稿で構成されています。 ASP.NET フォーラム上のホームページには、フォーラムが一覧表示されています。 あるフォーラムをクリックすると、そのフォーラムのスレッドが一覧表示されている ShowForum.aspx ページに移動します。 同様に、あるスレッドをクリックすると、クリックされたそのスレッドの投稿が表示される ShowPost.aspx に移動します。
このチュートリアルでは、GridView を使用してこのパターンを実装し、データベース内のサプライヤーを一覧表示します。 GridView 内の各サプライヤー行には、[View Products] リンクが含まれます。このリンクをクリックすると、選択したサプライヤーの製品を一覧表示する別のページにユーザーは移動します。
手順 1: Filtering フォルダーへの SupplierListMaster.aspx および ProductsForSupplierDetails.aspx ページの追加
3 番目のチュートリアルでページ レイアウトを定義する際に、多数の "スタート" ページを BasicReporting、Filtering、CustomFormatting フォルダー内に追加しました。 ただし、その時点ではこのチュートリアル用のスタート ページを追加しなかったため、少し時間をとって Filtering フォルダーに 2 つの新しいページ (SupplierListMaster.aspx および ProductsForSupplierDetails.aspx) を追加してください。 SupplierListMaster.aspx では "マスター" レコード (サプライヤー) が一覧表示され、ProductsForSupplierDetails.aspx では選択したサプライヤーの製品が表示されます。
これら 2 つの新しいページを作成する際は、必ず Site.master マスター ページと関連付けてください。
図 1: Filtering フォルダーに SupplierListMaster.aspx および ProductsForSupplierDetails.aspx ページを追加する
また、プロジェクトに新しいページを追加する際は、必ずそれに応じてサイト マップ ファイル (Web.sitemap) を更新してください。 このチュートリアルでは、次の XML コンテンツをフィルター処理レポートの <siteMapNode> 要素の子として使用し、SupplierListMaster.aspx ページをサイト マップに追加するだけです。
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another." />
Note
K. Scott Allen の無料の Visual Studio サイト マップ マクロを使用して、新しい ASP.NET ページを追加する際にサイト マップ ファイルを更新するプロセスを自動化できます。
手順 2: SupplierListMaster.aspx 内でのサプライヤー一覧の表示
SupplierListMaster.aspx および ProductsForSupplierDetails.aspx ページを作成したら、次の手順は、SupplierListMaster.aspx 内にサプライヤーの GridView を作成することです。 ページに GridView を追加し、それを新しい ObjectDataSource にバインドします。 この ObjectDataSource では、SuppliersBLL クラスの GetSuppliers() メソッドを使用して、すべてのサプライヤーを返す必要があります。
図 2: SuppliersBLL クラスを選択します (クリックするとフルサイズの画像が表示されます)
図 3: GetSuppliers() メソッドを使用するように ObjectDataSource を構成します (クリックするとフルサイズの画像が表示されます)
各 GridView 行に "View Products" というタイトルのリンクを含める必要があります。これをクリックすると、ユーザーは ProductsForSupplierDetails.aspx に移動し、選択した行の SupplierID 値が QueryString を介して渡されます。 たとえば、ユーザーがサプライヤー "Tokyo Traders" (SupplierID の値は 4) の [View Products] リンクをクリックした場合は、ProductsForSupplierDetails.aspx?SupplierID=4 に送信される必要があります。
これを実現するには、GridView に HyperLinkField を追加します。これにより、各 GridView 行にハイパーリンクが追加されます。 まず、GridView のスマート タグから [列の編集] リンクをクリックします。 次に、左上の一覧から [HyperLinkField] を選択し、[追加] をクリックして、GridView のフィールド一覧に HyperLinkField を含めます。
図 4: GridView に HyperLinkField を追加します (クリックするとフルサイズの画像が表示されます)
HyperLinkField は、各 GridView 行内のリンクで同じテキストまたは URL の値を使用するように構成するか、それぞれ特定の行にバインドされたデータの値に基づいてこれらの値を設定することができます。 すべての行にわたって静的な値を指定するには、HyperLinkField の Text または NavigateUrl プロパティを使用します。 リンクのテキストをすべての行で同じにするので、HyperLinkField の Text プロパティを「View Products」に設定します。
図 5: HyperLinkField の Text プロパティを「View Products」に設定します (クリックするとフルサイズの画像が表示されます)
GridView 行にバインドされている、基になるデータに従ってテキストまたは URL の値を設定するには、テキストまたは URL の値の取得元になるべきデータ フィールドを、DataTextField または DataNavigateUrlFields プロパティ内に指定します。 DataTextField は 1 つのデータ フィールドのみを設定できます。しかし、DataNavigateUrlFields にはコンマ区切りのリストでデータ フィールドを設定できます。 多くの場合、テキストまたは URL は、現在の行のデータ フィールド値と、何らかの静的マークアップとの組み合わせを基にする必要があります。 たとえば、このチュートリアルでは HyperLinkField のリンクの URL を ProductsForSupplierDetails.aspx?SupplierID=supplierID (ここで supplierID は各 GridView 行の SupplierID の値) に設定します。 ここでは、静的およびデータドリブンな値の両方が必要なことに注目してください。リンクの URL の ProductsForSupplierDetails.aspx?SupplierID= の部分は静的であるのに対し、supplierID の部分は (各行の独自な SupplierID の値であるため) データドリブンです。
静的およびデータドリブンな値の組み合わせを示すには、DataTextFormatString および DataNavigateUrlFormatString プロパティを使用します。 これらのプロパティ内では、必要に応じて静的マークアップを入力し、DataTextField または DataNavigateUrlFields プロパティで指定したフィールドの値を表示する箇所に {0} のマーカーを使用します。 DataNavigateUrlFields プロパティに複数のフィールドが指定されている場合は、最初のフィールド値を挿入する箇所に {0}、2 番目のフィールド値に {1} などを使用します。
これをこのチュートリアルに適用すると、DataNavigateUrlFields プロパティに SupplierID を設定する必要があります。これは行単位でカスタマイズが必要な値を持つデータ フィールドであるためです。そして、DataNavigateUrlFormatString プロパティに ProductsForSupplierDetails.aspx?SupplierID={0} を設定する必要があります。
図 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 に示すように、このページでは現在、[View Products] リンクを含むすべてのサプライヤーが一覧表示されています。 [View Products] リンクをクリックすると ProductsForSupplierDetails.aspx に移動し、QueryString 内でそのサプライヤーの SupplierID が渡されます。
図 7: 各サプライヤー行に [View Products] リンクが含まれています (クリックするとフルサイズの画像が表示されます)
手順 3: ProductsForSupplierDetails.aspx 内でのサプライヤーの製品の一覧表示
この時点で、SupplierListMaster.aspx ページはユーザーを ProductsForSupplierDetails.aspx に移動させ、選択したサプライヤーの SupplierID を QueryString で渡しています。 このチュートリアルの最後の手順では、ProductsForSupplierDetails.aspx 内の GridView 内に、QueryString を介して渡された SupplierID と等しい SupplierID の製品を表示します。 これを実現するには、まず、ProductsBLL クラスから GetProductsBySupplierID(supplierID) メソッドを呼び出す ProductsBySupplierDataSource という名前の新しい ObjectDataSource コントロールを使用して、GridView を ProductsForSupplierDetails.aspx ページに追加します。
図 8: ProductsBySupplierDataSource という名前の新しい ObjectDataSource を追加します (クリックするとフルサイズの画像が表示されます)
図 9: ProductsBLL クラスを選択します (クリックするとフルサイズの画像が表示されます)
図 10: ObjectDataSource で GetProductsBySupplierID(supplierID) メソッドを呼び出します (クリックするとフルサイズの画像が表示されます)
データ ソースの構成ウィザードの最後の手順では、GetProductsBySupplierID(supplierID) メソッドの supplierID パラメーターのソースを指定するように求められます。 QueryString 値を使用するには、パラメーター ソースを QueryString に設定し、QueryStringField テキストボックス (SupplierID) 内で使用する QueryString 値の名前を入力します。
図 11: SupplierID QueryString 値から supplierID パラメーター値を設定します (クリックするとフルサイズの画像が表示されます)
これですべて完了です。 図 12 は、SupplierListMaster.aspx から Tokyo Traders のリンクをクリックしてアクセスした際の ProductsForSupplierDetails.aspx ページを示しています。
図 12: Tokyo Traders が提供する製品を示しています (クリックするとフルサイズの画像が表示されます)
ProductsForSupplierDetails.aspx 内でのサプライヤー情報の表示
図 12 に示すように、この ProductsForSupplierDetails.aspx ページには、QueryString 内で指定された SupplierID によって、提供される製品が単純に一覧表示されます。 ただし、このページに直接移動してきたユーザーは、図 12 が Tokyo Traders の製品を表示していることがわかりません。 これを解決するために、このページ内にもサプライヤー情報を表示することができます。
まず、製品 GridView の上に FormView を追加します。 SuppliersBLL クラスの GetSupplierBySupplierID(supplierID) メソッドを呼び出す SuppliersDataSource という名前の新しい ObjectDataSource コントロールを作成します。
図 13: SuppliersBLL クラスを選択します (クリックするとフルサイズの画像が表示されます)
図 14: ObjectDataSource で GetSupplierBySupplierID(supplierID) メソッドを呼び出します (クリックするとフルサイズの画像が表示されます)
ProductsBySupplierDataSource と同様に、supplierID パラメーターに SupplierID QueryString 値を割り当てます。
図 15: SupplierID QueryString 値から supplierID パラメーター値を設定します (クリックするとフルサイズの画像が表示されます)
デザイン ビュー内で FormView を ObjectDataSource にバインドすると、Visual Studio は、ObjectDataSource によって返される各データ フィールドの Label および TextBox Web コントロールを使用して、FormView の ItemTemplate、InsertItemTemplate、EditItemTemplate を自動的に作成します。 サプライヤー情報を表示したいだけなので、InsertItemTemplate と EditItemTemplate は削除してください。 次に、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: サプライヤーに関する概要を含んだ、製品の一覧 (クリックするとフルサイズの画像が表示されます)
ProductsForSupplierDetails.aspx UI への最後の仕上げの適用
このレポートのユーザー エクスペリエンスを向上させるために、ProductsForSupplierDetails.aspx ページに加えなければならない、いくつかの追加があります。 現在、ユーザーが ProductsForSupplierDetails.aspx ページからサプライヤーの一覧に戻る唯一の方法は、ブラウザーの戻るボタンをクリックすることです。 SupplierListMaster.aspx にリンクして戻る HyperLink コントロールを ProductsForSupplierDetails.aspx ページに追加して、ユーザーがマスター一覧に戻る別の方法を提供しましょう。
図 17: HyperLink コントロールを追加してユーザーを SupplierListMaster.aspx に戻します (クリックするとフルサイズの画像が表示されます)
ユーザーが製品のないサプライヤーの [View Products] リンクをクリックしても、ProductsForSupplierDetails.aspx 内の ProductsBySupplierDataSource ObjectDataSource は結果を返しません。 ObjectDataSource にバインドされた GridView では、マークアップがレンダリングされず、結果的にユーザーのブラウザー内のページ上に空白の領域が表示されます。 選択したサプライヤーに関連する製品がないことをユーザーへより明確に伝えるには、GridView の EmptyDataText プロパティに、このような状況が発生した際に表示するメッセージを設定できます。 このプロパティには "There are no products provided by this supplier" が設定されています
既定では、Northwinds データベース内のすべてのサプライヤーは少なくとも 1 つの製品を提供します。 しかし、このチュートリアル用に、サプライヤーの Escargots Nouveaux には製品を何も関連付けないように手動で Products テーブルが変更してあります。 図 18 は、この変更が加えられた後の Escargots Nouveaux の詳細ページを示しています。
図 18: ユーザーに、このサプライヤーが提供する製品はないことを知らせます (クリックするとフルサイズの画像が表示されます)
まとめ
マスター/詳細レポートでは、マスターおよび詳細レコードの両方を 1 つのページ上に表示できますが、多くの Web サイトでは 2 つの Web ページに分かれています。 このチュートリアルでは、"マスター" Web ページ内の GridView 内にサプライヤーを一覧表示し、"詳細" ページ内に関連する製品を一覧表示して、そのようなマスター/詳細レポートを実装する方法について確認しました。 マスター Web ページ内の各サプライヤー行には、その行の SupplierID の値を一緒に渡す、詳細ページへのリンクが含まれていました。 このような行固有のリンクは、GridView の HyperLinkField を使用すると簡単に追加できます。
詳細ページ内での、指定したサプライヤーの製品の取得は、ProductsBLL クラスの GetProductsBySupplierID(supplierID) メソッドを呼び出すことで実現しました。 supplierID パラメーター値は、パラメーター ソースとして QueryString を使用し、宣言によって指定しました。 FormView を使用して、詳細ページ内にサプライヤーの詳細を表示する方法についても確認しました。
次のチュートリアルが、マスター/詳細レポートについての最終回です。 各行に [Select] ボタンがある GridView 内に製品の一覧を表示する方法について見ていきます。 [Select] ボタンをクリックすると、その製品の詳細が同じページ上の DetailsView コントロール内に表示されます。
プログラミングに満足!
著者について
Scott Mitchell は、7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者です。1998 年から Microsoft の Web テクノロジに携わっています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は Hilton Giesenow です。 今後の MSDN の記事を確認することに関心がありますか? その場合は、 にmitchell@4GuysFromRolla.com行をドロップしてください。