DataList と Repeater のカスタム ボタン (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、Repeater を使用してシステム内のカテゴリを一覧表示するインターフェイスを構築します。各カテゴリには、BulletedList コントロールを使用して関連する製品を表示するボタンが用意されています。

はじめに

過去 17 回の DataList と Repeater のチュートリアルでは、読み取り専用の例と、例の編集と削除の両方を作成しました。 DataList 内の機能の編集と削除を容易にするために、DataList ItemTemplate にボタンを追加しました。このボタンをクリックすると、ポストバックが発生し、ボタンの CommandName プロパティに対応する DataList イベントが発生しました。 たとえば、プロパティ値が Edit の ボタンを にItemTemplateCommandName追加すると、DataList がEditCommandポストバック時に起動し、Delete を使用CommandNameすると が発生しますDeleteCommand。

[編集] ボタンと [削除] ボタンに加えて、DataList コントロールと Repeater コントロールには、ボタン、LinkButtons、または ImageButtons を含めることもできます。このコントロールをクリックすると、カスタム サーバー側ロジックを実行できます。 このチュートリアルでは、Repeater を使用してシステム内のカテゴリを一覧表示するインターフェイスを構築します。 各カテゴリについて、Repeater には、BulletedList コントロールを使用してカテゴリに関連付けられている製品を表示するボタンが含まれます (図 1 を参照)。

[製品の表示] リンクをクリックすると、箇条書きのカテゴリの製品が表示されます

図 1: [製品の表示] リンクをクリックすると、箇条書きのカテゴリの製品が表示されます (クリックするとフルサイズの画像が表示されます)

手順 1: カスタム ボタンチュートリアル Web ページの追加

カスタム ボタンを追加する方法を見る前に、まず、このチュートリアルに必要な ASP.NET ページを Web サイト プロジェクトに作成してみましょう。 まず、 という名前 CustomButtonsDataListRepeaterの新しいフォルダーを追加します。 次に、次の 2 つの ASP.NET ページをそのフォルダーに追加し、各ページをマスター ページに Site.master 関連付けます。

  • Default.aspx
  • CustomButtons.aspx

カスタム Buttons-Related チュートリアルの ASP.NET ページを追加する

図 2: カスタム Buttons-Related チュートリアルの ASP.NET ページを追加する

他のフォルダーと同様に、 Default.aspx フォルダーには CustomButtonsDataListRepeater セクションにチュートリアルが一覧表示されます。 ユーザー コントロールに SectionLevelTutorialListing.ascx この機能があることを思い出してください。 このユーザー コントロールを に追加するにはDefault.aspx、ソリューション エクスプローラーからページのデザイン ビューにドラッグします。

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

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

最後に、ページをエントリとしてファイルに Web.sitemap 追加します。 具体的には、DataList と Repeater <siteMapNode>を使用したページングと並べ替えの後に、次のマークアップを追加します。

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

を更新した Web.sitemap後、ブラウザーを使用してチュートリアル Web サイトを表示します。 左側のメニューに、チュートリアルの編集、挿入、削除の項目が含まれるようになりました。

サイト マップにカスタム ボタンのチュートリアルのエントリが含まれるようになりました

図 4: サイト マップにカスタム ボタンのチュートリアルのエントリが含まれるようになりました

手順 2: カテゴリの一覧を追加する

このチュートリアルでは、すべてのカテゴリをリストする Repeater を作成し、クリックすると関連するカテゴリの製品を箇条書きで表示する Show Products LinkButton を作成する必要があります。 まず、システム内のカテゴリを一覧表示する単純な Repeater を作成しましょう。 まず、フォルダー内の CustomButtons.aspx ページを CustomButtonsDataListRepeater 開きます。 ツールボックスからDesignerに Repeater をドラッグし、そのプロパティを ID にCategories設定します。 次に、Repeater のスマート タグから新しいデータ ソース コントロールを作成します。 具体的には、クラスの GetCategories() メソッドからデータを選択する という名前CategoriesDataSourceの新しい ObjectDataSource コントロールをCategoriesBLL作成します。

CategoriesBLL クラス s GetCategories() メソッドを使用するように ObjectDataSource を構成する

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

データ ソースに基づいて Visual Studio によって既定値 ItemTemplate が作成される DataList コントロールとは異なり、Repeater のテンプレートは手動で定義する必要があります。 さらに、Repeater のテンプレートは宣言によって作成および編集する必要があります (つまり、Repeater のスマート タグには [テンプレートの編集] オプションはありません)。

左下隅にある [ソース] タブをクリックし、要素のカテゴリ名とその説明を<h3>段落タグに表示する を追加ItemTemplateします。各カテゴリの間に水平ルール (<hr />) を表示する を含めますSeparatorTemplate。 また、LinkButton プロパティを [Show Products]\(製品の Text 表示\) に設定して追加します。 これらの手順を完了すると、ページの宣言型マークアップは次のようになります。

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

図 6 は、ブラウザーを介して表示されるページを示しています。 各カテゴリ名と説明が一覧表示されます。 [Show Products]\(製品の表示\) ボタンをクリックすると、ポストバックが発生しますが、アクションはまだ実行されません。

各カテゴリの名前と説明が、[製品の表示] リンク ボタンと共に表示されます

図 6: 各カテゴリの名前と説明が表示され、[製品の表示] リンク ボタンと共に表示される (フルサイズの画像を表示する をクリックします)

手順 3: 製品の表示リンク ボタンがクリックされたときに Server-Side ロジックを実行する

DataList または Repeater 内のテンプレート内の Button、LinkButton、または ImageButton がクリックされると、ポストバックが発生し、DataList または Repeater の ItemCommand イベントが発生します。 イベントに ItemCommand 加えて、ボタンの CommandName プロパティが予約文字列 (Delete、Edit、Cancel、Update、または Select) のいずれかに設定されている場合、DataList コントロールは別のより具体的なイベントを発生させることもできますが ItemCommand 、イベントは 常に 発生します。

DataList または Repeater 内でボタンがクリックされると、多くの場合、クリックされたボタン ([編集] ボタンと [削除] ボタンの両方など、コントロール内に複数のボタンがある可能性がある場合) と、そのボタンがクリックされたアイテムの主キー値などの追加情報を渡す必要があります。 Button、LinkButton、および ImageButton には、イベント ハンドラーに値が渡される 2 つのプロパティが ItemCommand 用意されています。

  • CommandName テンプレート内の各ボタンを識別するために通常使用される文字列
  • CommandArgument 主キー値など、一部のデータ フィールドの値を保持するために一般的に使用されます

この例では、LinkButton s CommandName プロパティを ShowProducts に設定し、データ バインド構文 を使用して、現在のレコードの主キー値CategoryIDCommandArgumentを プロパティにバインドしますCategoryArgument='<%# Eval("CategoryID") %>'。 これら 2 つのプロパティを指定すると、LinkButton の宣言構文は次のようになります。

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

ボタンがクリックされると、ポストバックが発生し、DataList または Repeater の ItemCommand イベントが発生します。 イベント ハンドラーには、ボタンの と CommandNameCommandArgument の値が渡されます。

Repeater の ItemCommand イベントのイベント ハンドラーを作成し、イベント ハンドラーに渡された 2 番目のパラメーター (という名前 e) をメモします。 この 2 番目のパラメーターは 型 RepeaterCommandEventArgs であり、次の 4 つのプロパティがあります。

  • CommandArgument クリックしたボタンの プロパティの CommandArgument 値
  • CommandName ボタンの CommandName プロパティの値
  • CommandSource クリックされたボタン コントロールへの参照
  • Item クリックされたボタンを含む への RepeaterItem 参照。Repeater にバインドされた各レコードは、 RepeaterItem

選択したカテゴリ s CategoryID は プロパティを介して CommandArgument 渡されるため、イベント ハンドラーで選択したカテゴリに関連付けられている製品のセットを ItemCommand 取得できます。 これらの製品は、 (まだ追加していない) の BulletedList コントロール ItemTemplate にバインドできます。 残っているのは、BulletedList を追加し、それをイベント ハンドラーで ItemCommand 参照し、選択したカテゴリの製品セットにバインドすることです。これについては、手順 4 で取り組みます。

注意

DataList の ItemCommand イベント ハンドラーには、 クラスと同じ 4 つのプロパティを提供する 型 DataListCommandEventArgsのオブジェクトが RepeaterCommandEventArgs 渡されます。

手順 4: 箇条書きで選択したカテゴリの製品を表示する

選択したカテゴリの製品は、任意の数のコントロールを使用して Repeater 内 ItemTemplate に表示できます。 入れ子になった別の Repeater、DataList、DropDownList、GridView などを追加できます。 ただし、製品を箇条書きとして表示するため、BulletedList コントロールを使用します。 ページの宣言型マークアップに CustomButtons.aspx 戻り、製品の表示リンク ボタンの後の に ItemTemplate BulletedList コントロールを追加します。 BulletedLists s ID を に ProductsInCategory設定します。 BulletedList プロパティを使用して指定されたデータ フィールドの値が DataTextField 表示されます。このコントロールには製品情報がバインドされるため、 プロパティを DataTextField に ProductName設定します。

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

イベント ハンドラーで、 を ItemCommand 使用してこのコントロールを e.Item.FindControl("ProductsInCategory") 参照し、選択したカテゴリに関連付けられている一連の製品にバインドします。

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

イベント ハンドラーでアクションを実行するItemCommand前に、最初に受信 CommandNameした の値をチェックすることが賢明です。 ItemCommandイベント ハンドラーはボタンがクリックされたときに発生するため、テンプレートに複数のボタンがある場合は、 値をCommandName使用して実行するアクションを識別します。 ここではボタンが CommandName 1つしかないので、ここでチェックすることはムートですが、形成するのは良い習慣です。 次に CategoryID 、選択したカテゴリの が プロパティから CommandArgument 取得されます。 その後、テンプレートの BulletedList コントロールが参照され、クラスの GetProductsByCategoryID(categoryID) メソッドの結果にProductsBLLバインドされます。

DataList 内のボタンを使用した前のチュートリアル ( DataList 内のデータの編集と削除の概要など) では、コレクションを介して特定のアイテムの主キー値を DataKeys 決定しました。 この方法は DataList では適切に機能しますが、Repeater には DataKeys プロパティがありません。 代わりに、ボタンの プロパティを使用するか、テンプレート内の非表示の CommandArgument Label Web コントロールに主キー値を割り当て、 を使用してイベント ハンドラーでその値を読み取り戻すなど、主キー値を指定する別の方法を使用e.Item.FindControl("LabelID")するItemCommand必要があります。

イベント ハンドラーを ItemCommand 完了したら、ブラウザーでこのページをテストします。 図 7 に示すように、[製品の表示] リンクをクリックするとポストバックが発生し、選択したカテゴリの製品が BulletedList に表示されます。 さらに、他のカテゴリの [製品の表示] リンクがクリックされた場合でも、この製品情報は残ります。

注意

このレポートの動作を変更して、一度に 1 つのカテゴリの製品のみが一覧表示されるようにする場合は、BulletedList コントロールの EnableViewState プロパティを に False設定するだけです。

BulletedList は、選択したカテゴリの製品を表示するために使用されます

図 7: BulletedList を使用して、選択したカテゴリの製品を表示します (クリックするとフルサイズの画像が表示されます)

まとめ

DataList コントロールと Repeater コントロールには、テンプレート内に任意の数の Buttons、LinkButtons、または ImageButton を含めることができます。 このようなボタンをクリックすると、ポストバックが発生し、イベントが発生します ItemCommand 。 カスタム サーバー側アクションをクリックされているボタンに関連付けるには、イベントのイベント ハンドラーを ItemCommand 作成します。 このイベント ハンドラーでは、最初に受信CommandName値をチェックして、クリックされたボタンを決定します。 必要に応じて、ボタンの CommandArgument プロパティを使用して追加情報を指定できます。

幸せなプログラミング!

著者について

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

特別な感謝

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

次へ