DropDownList と DataList を使用したマスター/詳細フィルター処理 (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、DropDownLists を使用して "マスター" レコードを表示し、DataList を使用して "詳細" を表示するマスター/詳細レポートを 1 つの Web ページに表示する方法について説明します。

はじめに

マスター/詳細レポートは、前の「DropDownList を使用したマスター/詳細フィルター処理」チュートリアルで GridView を使用して最初に作成しました。最初に、いくつかの "マスター" レコードのセットを表示します。 その後、ユーザーはいずれかのマスター レコードにドリルダウンして、そのマスター レコードの "詳細" を表示できます。マスター/詳細レポートは、一対多リレーションシップを視覚化したり、特に "ワイド" なテーブル (列が多いテーブル) の詳細情報を表示したりするのに最適です。 前のチュートリアルでは、GridView コントロールと DetailsView コントロールを使用してマスター/詳細レポートを実装する方法について説明しました。 このチュートリアルと続く 2 つのチュートリアルでは、これらの概念を再検討しますが、代わりに DataList コントロールと Repeater コントロールを使用することに重点を置きます。

このチュートリアルでは、DropDownList を使用して "マスター" レコードを格納し、"詳細" レコードを DataList に表示する方法について説明します。

手順 1: マスター/詳細チュートリアル Web ページの追加

このチュートリアルを開始する前に、まず、このチュートリアルと続く 2 つのチュートリアルに必要なフォルダーと、DataList コントロールおよび Repeater コントロールを使用してマスター/詳細レポートを処理する ASP.NET ページを追加します。 まず、プロジェクトに DataListRepeaterFiltering という名前の新しいフォルダーを作成します。 次に、以下の 5 つの ASP.NET ページをこのフォルダーに追加し、マスター ページ Site.master を使用するようにすべてのページを構成します。

  • Default.aspx
  • FilterByDropDownList.aspx
  • CategoryListMaster.aspx
  • ProductsForCategoryDetails.aspx
  • CategoriesAndProducts.aspx

DataListRepeaterFiltering フォルダーを作成し、チュートリアル ASP.NET ページを追加する

図 1: DataListRepeaterFiltering フォルダーを作成し、チュートリアルの ASP.NET ページを追加する

次に、Default.aspx ページを開き、SectionLevelTutorialListing.ascx ユーザー コントロールを UserControls フォルダーからデザイン画面にドラッグします。 「マスター ページとサイト ナビゲーション」のチュートリアルで作成したこのユーザー コントロールは、サイト マップを列挙し、現在のセクションのチュートリアルを箇条書きで表示します。

SectionLevelTutorialListing.ascx ユーザー コントロールを Default.aspx に追加する

図 2: SectionLevelTutorialListing.ascx ユーザー コントロールを Default.aspx に追加する (クリックするとフルサイズの画像が表示されます)

作成するマスター/詳細チュートリアルを箇条書きに表示するには、サイト マップに追加する必要があります。 Web.sitemap ファイルを開き、"DataList と Repeater を使用してデータを表示する" サイト マップ ノード マークアップの後に次のマークアップを追加します。

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                      both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</siteMapNode>

新しい ASP.NET ページを含むようにサイト マップを更新する

図 3: サイト マップを更新して新しい ASP.NET ページを含める

手順 2: カテゴリを DropDownList で表示する

マスター/詳細レポートでは、DropDownList のカテゴリが一覧表示され、選択したリスト項目の製品がページの下の DataList に表示されます。 次に、まずしなければならないことは、カテゴリを DropDownList に表示することです。 まず、DataListRepeaterFiltering フォルダーの FilterByDropDownList.aspx ページを開き、[ツールボックス] からページのデザイナーに DropDownList をドラッグします。 次に、DropDownList の ID プロパティを Categories に設定します。 DropDownList のスマート タグから [データ ソースの選択] リンクをクリックし、CategoriesDataSource という名前の新しい ObjectDataSource を作成します。

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

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

CategoriesBLL クラスの GetCategories() メソッドを呼び出すように、新しい ObjectDataSource を構成します。 ObjectDataSource を構成した後も、DropDownList に表示されるデータ ソース フィールドと、各リスト項目の値として関連付けるデータ ソース フィールドを指定する必要があります。 各リスト項目の表示として CategoryName フィールドを、値として CategoryID を使用します。

DropDownList に CategoryName フィールドを表示し、値として CategoryID を使用する

図 5: DropDownList に CategoryName フィールドを表示し、値として CategoryID を使用する (クリックするとフルサイズの画像が表示されます)

この時点で、Categories テーブルのレコードが入力された DropDownList コントロールがあります (すべてが約 6 秒で実行されます)。 図 6 は、ブラウザーから見たときのこれまでの進行状況を示しています。

ドロップダウン リストには、現在のカテゴリが一覧表示されます。

図 6: 現在のカテゴリのドロップダウン一覧表示 (クリックするとフルサイズの画像が表示されます)

手順 2: Products DataList を追加する

マスター/詳細レポートの最後の手順は、選択したカテゴリに関連付けられている製品を一覧表示することです。 これを行うには、ページに DataList を追加し、ProductsByCategoryDataSource という名前の新しい ObjectDataSource を作成します。 ProductsByCategoryDataSource コントロールに ProductsBLL クラスの GetProductsByCategoryID(categoryID) メソッドからデータを取得させます。 このマスター/詳細レポートは読み取り専用であるため、[挿入]、[更新]、[削除] タブで [(なし)] オプションを選択します。

GetProductsByCategoryID(categoryID) メソッドを選択します

図 7: GetProductsByCategoryID(categoryID) メソッドを選択する (クリックするとフルサイズの画像が表示されます)

[次へ] をクリックすると、ObjectDataSource ウィザードによって、GetProductsByCategoryID(categoryID) メソッドの categoryID パラメーターの値のソースの入力を求められます。 選択した categories DropDownList 項目の値を使用するには、パラメーター ソースを Control に、ControlID を Categories に設定します。

categoryID パラメーターを Categories DropDownList の値に設定する

図 8: categoryID パラメーターを Categories DropDownList の値に設定する (クリックするとフルサイズの画像が表示されます)

[データ ソースの構成] ウィザードが完了すると、Visual Studio によって DataList の ItemTemplate が自動的に生成され、各データ フィールドの名前と値が表示されます。 代わりに、DataList を拡張して、製品の名前、カテゴリ、サプライヤー、ユニットあたりの数量、価格のみを表示する ItemTemplate を、各項目の間に <hr> 要素を挿入する SeparatorTemplate と共に使用してみましょう。 ここでは「DataList コントロールと Repeater コントロールを使用したデータの表示」チュートリアルの例から ItemTemplate を使用しますが、最も視覚に訴えるテンプレート マークアップを自由にご使用ください。

これらの変更を行った後、DataList とその ObjectDataSource のマークアップは次のようになります。

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label ID="ProductNameLabel" runat="server"
                Text='<%# Eval("ProductName") %>' />
        </h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

ブラウザーで進行状況をチェックしてください。 最初にページにアクセスすると、選択したカテゴリ (飲料) に属する製品が (図 9 に示すように) 表示されますが、DropDownList を変更してもデータは更新されません。 これは、DataList を更新するにはポストバックが発生する必要があるためです。 これを実現するには、DropDownList の AutoPostBack プロパティを true に設定するか、Button Web コントロールをページに追加します。 このチュートリアルでは、DropDownList の AutoPostBack プロパティを true に設定することにしました。

図 9 と図 10 は、実際のマスター/詳細レポートを示しています。

最初にページにアクセスすると、飲料製品が表示されます

図 9: 最初にページにアクセスすると、飲料製品が表示される (クリックするとフルサイズの画像が表示されます)

新しい製品 (生成) を選択すると、自動的に PostBack が発生し、DataList が更新されます

図 10: 新しい製品 (生成) を選択すると、PostBack が自動的に発生し、DataList が更新される (クリックするとフルサイズの画像が表示されます)

"-- カテゴリの選択 --" リスト項目の追加

最初に FilterByDropDownList.aspx ページにアクセスすると、カテゴリ DropDownList の最初のリスト項目 (飲料) が既定で選択され、DataList に飲料製品が表示されます。 「DropDownList を使用したマスター/詳細フィルター処理」チュートリアルでは、既定で選択された DropDownList に "-- カテゴリの選択 --" オプションを追加しました。このオプションを選択すると、データベース内の "すべて" の製品が表示されます。 このようなアプローチは、各製品行が占める画面領域が少量だったので、GridView に製品を一覧表示するときに管理可能でした。 ただし、DataList では、各製品の情報が画面のはるかに大きなチャンクを消費します。 引き続き "-- カテゴリの選択 --" オプションを追加し、既定で選択しますが、選択したときにすべての製品を表示するのではなく、製品を表示しないように構成してみましょう。

DropDownList に新しいリスト項目を追加するには、プロパティ ウィンドウに移動し、Items プロパティの省略記号をクリックします。 [-- カテゴリの選択] Text と Value 0を使用して、新しいリスト アイテムを追加します。

スパークライン の

図 11: "-- カテゴリの選択 --" リスト項目を追加

または、次のマークアップを DropDownList に追加して、リスト項目を追加することもできます。

<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" EnableViewState="False">
 
    <asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

さらに、DropDownList コントロールの AppendDataBoundItems を true に設定する必要があります。これは、false (既定) に設定されている場合、カテゴリが ObjectDataSource から DropDownList にバインドされると、手動で追加されたリスト項目が上書きされるためです。

AppendDataBoundItems プロパティを True に設定する

図 12: AppendDataBoundItems プロパティを True に設定する

"-- カテゴリの選択 --" リスト項目に 0 の値を選択した理由は、0 の値を持つカテゴリがシステムになく、そのため "-- カテゴリの選択 --" リスト項目が選択されたときに製品レコードが返されないためです。 これを確認するには、ブラウザーからページにアクセスしてください。 図 13 に示すように、最初にページを表示すると、"-- カテゴリの選択 --" リスト項目が選択され、製品は表示されません。

次の場合

図 13: "-- カテゴリの選択 --" リスト項目が選択されている場合、製品は表示されません (クリックするとフルサイズの画像が表示されます)

"-- カテゴリの選択 --" オプションが選択されているときに "すべての" 製品を表示する場合は、代わりに -1 の値を使用します。 賢明な読者は、 ProductsBLL クラスの GetProductsByCategoryID(categoryID) メソッドが更新され、categoryID の値 -1 が渡された場合、すべての製品レコードが返されるようにした「DropDownList を使用したマスター/詳細フィルター処理」チュートリアルを思い起こされるでしょう。

まとめ

階層的に関連するデータを表示する場合、多くの場合、マスター/詳細レポートを使用したデータの表示が役立ちます。このレポートにより、ユーザーは階層の上部からデータを確認し、詳細をドリルダウンできるからです。 このチュートリアルでは、選択したカテゴリの製品を示す単純なマスター/詳細レポートの作成について説明しました。 これは、カテゴリの一覧に DropDownList を使用し、選択したカテゴリに属する製品に DataList を使用することで実現しました。

次のチュートリアルでは、マスター レコードと詳細レコードを 2 ページに分ける方法について説明します。 最初のページには、"マスター" レコードの一覧が表示され、詳細を表示するためのリンクが表示されます。 リンクをクリックすると、ユーザーが 2 番目のページに移動し、選択したマスター レコードの詳細が表示されます。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジに取り組んでいます。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

特別な感謝

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

次へ