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

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

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

はじめに

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

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

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

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

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

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

図 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

ページと ProductsForSupplierDetails.aspx ページをSupplierListMaster.aspx作成したら、次の手順として、 でSupplierListMaster.aspxサプライヤーの GridView を作成します。 ページに GridView を追加し、それを新しい ObjectDataSource にバインドします。 この ObjectDataSource では、 クラスの GetSuppliers() メソッドをSuppliersBLL使用して、すべてのサプライヤーを返す必要があります。

SuppliersBLL クラスを選択する画像

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

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

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

各 GridView 行に "製品の表示" というタイトルのリンクを含める必要があります。このリンクをクリックすると、選択した行のSupplierID値をProductsForSupplierDetails.aspxクエリ文字列で渡します。 たとえば、ユーザーが東京トレーダーのサプライヤー (値 4) の [製品の表示] リンクを SupplierID クリックした場合は、 に 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 の値を設定するには、 プロパティまたは DataNavigateUrlFields プロパティでテキストまたは URL 値を取得するデータ フィールドをDataTextField指定します。 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} 2 番目のフィールド値などを使用{0}します。

これをチュートリアルに適用するには、 プロパティを 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 をクエリ文字列に渡します。 このチュートリアルの最後の手順では、Querystring を介して渡された と等しい SupplierID GridView 内ProductsForSupplierDetails.aspxSupplierIDの製品を表示します。 この作業を開始するには、 クラスからメソッドを呼び出す という名前ProductsBySupplierDataSourceの新しい ObjectDataSource コントロールを使用して、ページに GridView ProductsForSupplierDetails.aspx をGetProductsBySupplierID(supplierID)ProductsBLL追加します。

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

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

ProductsBLL クラスを選択する

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

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

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

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

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

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

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

東京トレーダーズが提供する商品を掲載

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

仕入先情報の表示ProductsForSupplierDetails.aspx

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

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

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

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

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

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

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

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

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

デザイン ビューで FormView を ObjectDataSource にバインドすると、Visual Studio によって、ObjectDataSource によって返される各データ フィールドに対して、FormView の ItemTemplate、、InsertItemTemplateEditItemTemplateおよび Label コントロールと TextBox Web コントロールが自動的に作成されます。 サプライヤー情報を表示するだけなので、 と EditItemTemplateをInsertItemTemplate自由に削除できます。 次に、ItemTemplate を編集して、要素に <h3> 仕入先の会社名を表示し、会社名の下に住所、市区町村、国/地域、電話番号を表示します。 または、"ObjectDataSource を使用したデータの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ページに ProductsForSupplierDetails.aspx HyperLink コントロールを追加し、ユーザーがマスター リストに戻るための別の方法を提供します。

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

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

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

既定では、Northwinds データベース内のすべてのサプライヤーが少なくとも 1 つの製品を提供します。 しかし、このチュートリアルでは、サプライヤーのエスカルゴ・ヌーボークスが製品に関連付けられていないように、テーブルを手動で変更 Products しました。 図 18 は、この変更が行われた後の Escargots Packagingx の詳細ページを示しています。

サプライヤーが製品を提供していないことをユーザーに通知する

図 18: サプライヤーが製品を提供していないことをユーザーに通知する (クリックするとフルサイズの画像が表示されます)

まとめ

マスター/詳細レポートでは、マスター レコードと詳細レコードの両方を 1 つのページに表示できますが、多くの Web サイトでは 2 つの Web ページに分かれています。 このチュートリアルでは、"マスター" Web ページの GridView に仕入先を表示し、関連する製品を "詳細" ページに一覧表示することで、このようなマスター/詳細レポートを実装する方法について説明しました。 マスター Web ページの各仕入先行には、行の値に沿って渡された詳細ページへのリンクが SupplierID 含まれていました。 このような行固有のリンクは、GridView の HyperLinkField を使用して簡単に追加できます。

指定したサプライヤーの製品を取得する詳細ページで、 クラスの GetProductsBySupplierID(supplierID) メソッドをProductsBLL呼び出すことによって実現されました。 パラメーター値は 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することも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。

特別な感謝

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

前へ次へ