次の方法で共有

GridView を使用した 2 ページにわたるマスター/詳細フィルター処理 (VB)

Scott Mitchell による

PDF をダウンロードする

このチュートリアルでは、GridView を使用してデータベース内のサプライヤーを一覧表示することで、このパターンを実装します。 GridView の各仕入先行には、[製品の表示] リンクが含まれます。このリンクをクリックすると、選択した仕入先の製品を一覧表示する別のページにユーザーが移動します。

イントロダクション

前の 2 つのチュートリアルでは、DropDownLists を使用して単一の Web ページにマスター/詳細レポートを表示し、"master" レコードと GridView または DetailsView コントロールを表示して "詳細" を表示する方法を説明しました。マスター/詳細レポートに使用されるもう 1 つの一般的なパターンは、1 つの Web ページにマスター レコードを作成し、別の Web ページに詳細を表示することです。 ASP.NET フォーラムのようなフォーラム Web サイトは、実際にはこのパターンの優れた例です。 ASP.NET フォーラムは、概要、Web フォーム、データ プレゼンテーション コントロールなどのさまざまなフォーラムで構成されています。 各フォーラムは多数のスレッドで構成され、各スレッドは多数の投稿で構成されています。 ASP.NET フォーラムのホームページには、フォーラムが表示されます。 フォーラムをクリックすると、そのフォーラムのスレッドが一覧表示される ShowForum.aspx ページが表示されます。 同様に、スレッドをクリックするとShowPost.aspxに移動し、そのスレッドに関連する投稿が表示されます。

このチュートリアルでは、GridView を使用してデータベース内のサプライヤーを一覧表示することで、このパターンを実装します。 GridView の各仕入先行には、[製品の表示] リンクが含まれます。このリンクをクリックすると、選択した仕入先の製品を一覧表示する別のページにユーザーが移動します。

手順 1: SupplierListMaster.aspxフォルダーにProductsForSupplierDetails.aspxおよびFilteringページを追加する

3 番目のチュートリアルでページ レイアウトを定義するときに、 BasicReporting、 Filtering、 CustomFormatting フォルダーに多数の "スターター" ページを追加しました。 ただし、その時点ではこのチュートリアルのスターター ページを追加していないため、 Filtering フォルダーに 2 つの新しいページ ( SupplierListMaster.aspx と ProductsForSupplierDetails.aspx) を追加します。 SupplierListMaster.aspx では "マスター" レコード (仕入先) が一覧表示され、 ProductsForSupplierDetails.aspx は選択した仕入先の製品を表示します。

これら 2 つの新しいページを作成するときは、 Site.master マスター ページに関連付ける必要があります。

SupplierListMaster.aspxページとProductsForSupplierDetails.aspxページをフィルタリング フォルダに追加する

図 1: SupplierListMaster.aspx ページと ProductsForSupplierDetails.aspx ページを Filtering フォルダーに追加する

また、プロジェクトに新しいページを追加するときは、それに応じてサイト マップ ファイル Web.sitemap更新してください。 このチュートリアルでは、次の XML コンテンツをフィルター レポート SupplierListMaster.aspx要素の子として使用して、<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 では、 SuppliersBLL クラスの GetSuppliers() メソッドを使用して、すべてのサプライヤーを返す必要があります。

SuppliersBLL クラスを選択する画像

図 2: SuppliersBLL クラスの選択 (フルサイズの画像を表示する をクリックします)

GetSuppliers() メソッドを使用するように ObjectDataSource を構成する

図 3: GetSuppliers() メソッドを使用するように ObjectDataSource を構成する (フルサイズの画像を表示する をクリックします)

各 GridView の行に「製品を見る」というタイトルのリンクを追加する必要があります。このリンクをクリックすると、選択した行のProductsForSupplierDetails.aspx値をクエリ文字列としてSupplierIDに渡して移動します。 たとえば、ユーザーが東京トレーダーのサプライヤー ( SupplierID 値 4) の [製品の表示] リンクをクリックした場合は、 ProductsForSupplierDetails.aspx?SupplierID=4に送信する必要があります。

これを実現するには、 GridView に HyperLinkField を追加し、各 GridView 行にハイパーリンクを追加します。 まず、GridView のスマート タグから [列の編集] リンクをクリックします。 次に、左上の一覧から HyperLinkField を選択し、[追加] をクリックして、GridView のフィールド リストに HyperLinkField を含めます。

GridView に HyperLinkField を追加する

図 4: GridView に HyperLinkField を追加します (フルサイズの画像を表示する をクリックします)。

HyperLinkField は、各 GridView 行のリンクと同じテキスト値または URL 値を使用するように構成することも、各行にバインドされたデータ値に基づいてこれらの値を設定することもできます。 すべての行に静的な値を指定するには、HyperLinkField の Text または NavigateUrl プロパティを使用します。 すべての行でリンク テキストを同じにするため、HyperLinkField の Text プロパティを [製品の表示] に設定します。

HyperLinkField の Text プロパティを製品を表示するように設定する

図 5: HyperLinkField の Text プロパティを製品を表示するように設定します (フルサイズの画像を表示する をクリックします)。

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 プロパティを使用します。 これらのプロパティでは、必要に応じて静的マークアップを入力し、{0}またはDataTextFieldプロパティで指定されたフィールドの値を表示するマーカー DataNavigateUrlFieldsを使用します。 DataNavigateUrlFields プロパティに複数のフィールドが指定されている場合は、最初のフィールド値を挿入する{0}を使用し、2 番目のフィールド値に{1}します。

これをチュートリアルに適用するには、 DataNavigateUrlFields プロパティを SupplierID に設定する必要があります。これは、行単位でカスタマイズする必要がある値を持つデータ フィールドであり、 DataNavigateUrlFormatString プロパティを ProductsForSupplierDetails.aspx?SupplierID={0}するためです。

SupplierID に基づいて適切なリンク URL を含むように HyperLinkField を構成する

図 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 に示すように、このページには現在、製品の表示リンクを含むすべてのサプライヤーが一覧表示されています。 [製品の表示] リンクをクリックすると、クエリ文字列内の仕入先のProductsForSupplierDetails.aspxを渡して、SupplierIDに進みます。

各仕入先行に [製品の表示] リンクが含まれている

図 7: 各仕入先行には製品を表示するリンクがあります (画像をフルサイズで表示するにはクリックしてください)

手順 3: 仕入先の製品を一覧表示するProductsForSupplierDetails.aspx

この時点で、 SupplierListMaster.aspx ページはユーザーを ProductsForSupplierDetails.aspxに送信し、選択した仕入先の SupplierID をクエリ文字列に渡します。 このチュートリアルの最後の手順では、ProductsForSupplierDetails.aspx内の GridView で、クエリ文字列を介して渡されたSupplierIDとSupplierIDが等しい製品を表示します。 これを実現するには、ProductsForSupplierDetails.aspx ページに GridView を追加し、ProductsBySupplierDataSource クラスから GetProductsBySupplierID(supplierID) メソッドを呼び出す ProductsBLL という名前の新しい ObjectDataSource コントロールを使用します。

ProductsBySupplierDataSource という名前の新しい ObjectDataSource を追加する

図 8: ProductsBySupplierDataSource という名前の新しい ObjectDataSource を追加する (フルサイズの画像を表示する をクリックします)

ProductsBLL クラスを選択する

図 9: ProductsBLL クラスを選択します (フルサイズの画像を表示する をクリックします)。

ObjectDataSource で GetProductsBySupplierID(supplierID) メソッドを呼び出す

図 10: ObjectDataSource で GetProductsBySupplierID(supplierID) メソッドを呼び出す (フルサイズの画像を表示する をクリックします)

データ ソースの構成ウィザードの最後の手順では、 GetProductsBySupplierID(supplierID) メソッドの supplierID パラメーターのソースを指定するように求められます。 querystring 値を使用するには、パラメーター ソースを QueryString に設定し、QueryStringField テキスト ボックス (SupplierID) で使用する querystring 値の名前を入力します。

SupplierID Querystring 値からの supplierID パラメーター値の画像

図 11: supplierID Querystring 値から SupplierID パラメーター値を設定します (フルサイズの画像を表示する をクリックします)。

これですべてです。 図 12 は、ProductsForSupplierDetails.aspxから東京トレーダーズのリンクをクリックしてアクセスした場合のSupplierListMaster.aspxページを示しています。

東京トレーダーズが提供する商品を掲載しています。

図 12: 東京トレーダーが提供する製品が示されています (フルサイズの画像を表示する をクリックします)。

仕入先情報の表示ProductsForSupplierDetails.aspx

図 12 に示すように、 ProductsForSupplierDetails.aspx ページには、querystring で指定された SupplierID によって提供される製品が一覧表示されます。 ただし、このページに直接送信されたユーザーは、図 12 に東京トレーダーズの製品が表示されていることを知りません。 これを解決するために、このページにもサプライヤー情報を表示することができます。

まず、製品 GridView の上に FormView を追加します。 SuppliersDataSource クラスのSuppliersBLL メソッドを呼び出すGetSupplierBySupplierID(supplierID)という名前の新しい ObjectDataSource コントロールを作成します。

データ ソースの画像で SuppliersBLL クラスを選択する

図 13: SuppliersBLL クラスを選択します (フルサイズの画像を表示する をクリックします)。

ObjectDataSource で GetSupplierBySupplierID(supplierID) メソッドを呼び出す

図 14: ObjectDataSource で GetSupplierBySupplierID(supplierID) メソッドを呼び出す (フルサイズの画像を表示する をクリックします)

ProductsBySupplierDataSourceと同様に、supplierID パラメーターに SupplierID querystring 値の値を割り当てます。

SupplierID Querystring 値からの supplierID パラメーター値の画像

図 15: supplierID Querystring 値から SupplierID パラメーター値を設定します (フルサイズの画像を表示する をクリックします)。

デザイン ビューで FormView を ObjectDataSource にバインドすると、Visual Studio は、ObjectDataSource によって返される各データ フィールドの Label コントロールと TextBox Web コントロールを使用して、FormView の ItemTemplate、 InsertItemTemplate、および EditItemTemplate を自動的に作成します。 サプライヤー情報を表示したいので、 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 ページからサプライヤーの一覧に戻る唯一の方法は、ブラウザーの [戻る] ボタンをクリックすることです。 ユーザーがマスター リストに戻るための別の方法を提供する、ProductsForSupplierDetails.aspxにリンクする HyperLink コントロールをSupplierListMaster.aspx ページに追加しましょう。

HyperLink コントロールを追加してユーザーをSupplierListMaster.aspxに戻す

図 17: HyperLink コントロールを追加してユーザーを SupplierListMaster.aspx に戻す (フルサイズの画像を表示する をクリックします)

ユーザーが製品を持たない仕入先の [製品の表示] リンクをクリックした場合、ProductsBySupplierDataSourceの ProductsForSupplierDetails.aspx ObjectDataSource は結果を返しません。 ObjectDataSource にバインドされた GridView では、マークアップがレンダリングされず、ユーザーのブラウザーのページに空白の領域が表示されます。 選択したサプライヤーに関連付けられている製品がないことをユーザーに明確に伝えるために、このような状況が発生したときに表示するメッセージに GridView の EmptyDataText プロパティを設定できます。 このプロパティを "このサプライヤーが提供する製品がありません" に設定しました

既定では、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 を使用して詳細ページにサプライヤーの詳細を表示する方法についても説明しました。

次のチュートリアルは、マスター/詳細レポートの最後のチュートリアルです。 各行に [選択] ボタンがある GridView に製品の一覧を表示する方法について説明します。 [選択] ボタンをクリックすると、その製品の詳細が同じページの DetailsView コントロールに表示されます。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。

特別な感謝

このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルの校閲者はヒルトン・ギセナウでした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにご連絡ください。

前へ次へ