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

作成者: Scott Mitchell

PDF のダウンロード

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

はじめに

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

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

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

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

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

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

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

図 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>

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

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

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

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

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

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

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

図 6: 現在のカテゴリの Drop-Down Lists (フルサイズの画像を表示する] をクリックします)

手順 2: Products DataList を追加する

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

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

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

図 8: パラメーターを categoryID DropDownList の値に Categories 設定します (フルサイズの画像を表示する場合は、ここをクリックします)

データ ソースの構成ウィザードが完了すると、Visual Studio によって DataList の が自動的に生成 ItemTemplate され、各データ フィールドの名前と値が表示されます。 代わりに、DataList を拡張して、製品の名前、カテゴリ、サプライヤー、ユニットあたりの数量、価格SeparatorTemplateのみを表示する と、各項目の間に要素を挿入する を<hr>使用ItemTemplateしてみましょう。 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: 最初にページにアクセスすると、飲料製品が表示されます (クリックするとフルサイズの画像が表示されます)

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

"-- カテゴリの選択 --" リスト アイテムの追加

最初にページに FilterByDropDownList.aspx アクセスすると、カテゴリ DropDownList の最初のリスト アイテム (飲料) が既定で選択され、DataList に飲料製品が表示されます。 Master/Detail Filtering With a DropDownList チュートリアルでは、既定で選択された DropDownList に "-- カテゴリの選択 --" オプションを追加しました。このオプションを選択すると、データベース内のすべての製品が表示されます。 このようなアプローチは、各製品行が少量の画面不動産を占めたので、GridView に製品を一覧表示するときに管理可能でした。 ただし、DataList では、各製品の情報が画面のはるかに大きなチャンクを消費します。 引き続き [カテゴリの選択] オプションを追加し、既定で選択しますが、選択したときにすべての製品を表示するのではなく、製品を表示しないように構成してみましょう。

DropDownList に新しいリスト アイテムを追加するには、プロパティ ウィンドウに移動し、 プロパティの省略記号をItemsクリックします。 "-- カテゴリの選択 --" と を Text 含む新しいリスト アイテムを追加します Value0。

図 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 にバインドされると、手動で追加されたリスト アイテムが上書きされるためです。

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

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

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

[カテゴリの選択] オプションが選択されているときに すべての 製品を表示する場合は、代わりに の -1 値を使用します。 Astute リーダーは、Master/Detail Filtering With a DropDownList チュートリアルに戻り、 の値が渡された場合categoryID、すべての製品レコードが返されるようにクラスのGetProductsByCategoryID(categoryID)-1メソッドを更新ProductsBLLしたことを思い出します。

まとめ

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

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

プログラミングに満足!

著者について

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

特別な感謝...

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

次へ