DataList と Repeater のカスタム ボタン (VB)
このチュートリアルでは、Repeater を使用してシステム内のカテゴリを一覧表示するインターフェイスを構築します。各カテゴリには、BulletedList コントロールを使用して関連する製品を表示するボタンが用意されています。
はじめに
過去 17 回の DataList と Repeater のチュートリアルでは、読み取り専用の例と、例の編集と削除の両方を作成しました。 DataList 内の機能の編集と削除を容易にするために、DataList ItemTemplate
にボタンを追加しました。このボタンをクリックするとポストバックが発生し、ボタンの CommandName
プロパティに対応する DataList イベントが発生しました。 たとえば、プロパティ値が Edit の ボタンを にItemTemplate
CommandName
追加すると、DataList がEditCommand
ポストバック時に起動します。1 つは CommandName
Delete で を発生させます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
図 2: カスタム Buttons-Related チュートリアルの ASP.NET ページを追加する
他のフォルダーと同様に、 Default.aspx
フォルダーの CustomButtonsDataListRepeater
セクションにチュートリアルが一覧表示されます。 ユーザー コントロールには 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 を作成する必要があります。また、[製品の表示] リンク ボタンをクリックすると、関連するカテゴリの製品が箇条書きで表示されます。 まず、システム内のカテゴリを一覧表示する単純な Repeater を作成しましょう。 まず、 フォルダー内の CustomButtons.aspx
ページを CustomButtonsDataListRepeater
開きます。 ツールボックスからDesignerに Repeater をドラッグし、そのプロパティを ID
にCategories
設定します。 次に、Repeater のスマート タグから新しいデータ ソース コントロールを作成します。 具体的には、 クラスの GetCategories()
メソッドからデータを選択する という名前CategoriesDataSource
の新しい ObjectDataSource コントロールをCategoriesBLL
作成します。
図 5: クラスの GetCategories()
メソッドを使用CategoriesBLL
するように ObjectDataSource を構成する (フルサイズの画像を表示する 場合はクリックします)
データ ソースに基づいて Visual Studio によって既定値 ItemTemplate
が作成される DataList コントロールとは異なり、Repeater のテンプレートは手動で定義する必要があります。 さらに、Repeater のテンプレートは宣言的に作成および編集する必要があります (つまり、Repeater のスマート タグに [テンプレートの編集] オプションはありません)。
左下隅にある [ソース] タブをクリックし、要素のカテゴリ名とその説明を<h3>
段落タグに表示する を追加ItemTemplate
します。各カテゴリの間に水平方向のルール (<hr />
) を表示する を含めますSeparatorTemplate
。 また、LinkButton プロパティ 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 に設定し、データ バインド構文 を使用して現在のレコードの主キー値CategoryID
CommandArgument
を プロパティにバインドしますCategoryArgument='<%# Eval("CategoryID") %>'
。 これら 2 つのプロパティを指定すると、LinkButton の宣言構文は次のようになります。
<asp:LinkButton runat="server" CommandName="ShowProducts"
CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
Show Products</asp:LinkButton>
ボタンがクリックされると、ポストバックが発生し、DataList または Repeater イベント ItemCommand
が発生します。 イベント ハンドラーには、ボタンの と CommandName
CommandArgument
の値が渡されます。
Repeater の ItemCommand
イベントのイベント ハンドラーを作成し、イベント ハンドラー (という名前 e
) に渡される 2 番目のパラメーターをメモします。 この 2 番目のパラメーターは 型 RepeaterCommandEventArgs
であり、次の 4 つのプロパティがあります。
CommandArgument
クリックしたボタンの プロパティのCommandArgument
値CommandName
ボタンのCommandName
プロパティの値CommandSource
クリックされたボタン コントロールへの参照Item
クリックされたボタンを含む へのRepeaterItem
参照。Repeater にバインドされた各レコードは、RepeaterItem
選択したカテゴリは CategoryID
プロパティを介して CommandArgument
渡されるため、イベント ハンドラーで選択したカテゴリに関連付けられている製品のセットを ItemCommand
取得できます。 これらの製品は、 (まだ追加していない) の ItemTemplate
BulletedList コントロールにバインドできます。 残っているのは、BulletedList を追加し、それをイベント ハンドラーで ItemCommand
参照し、選択したカテゴリの製品セットにバインドすることです。これについては、手順 4 で取り組みます。
注意
DataList の ItemCommand
イベント ハンドラーには、 クラスと同じ 4 つのプロパティを提供する 型 DataListCommandEventArgs
のオブジェクトが RepeaterCommandEventArgs
渡されます。
手順 4: 箇条書きで選択したカテゴリの製品を表示する
選択したカテゴリの製品は、任意の数のコントロールを使用して Repeater 内 ItemTemplate
に表示できます。 入れ子になった別の Repeater、DataList、DropDownList、GridView などを追加できます。 ただし、製品を箇条書きとして表示するため、BulletedList コントロールを使用します。 ページの宣言型マークアップに CustomButtons.aspx
戻り、製品の表示リンク ボタンの後に BulletedList コントロールを に ItemTemplate
追加します。 BulletedLists s ID
を に ProductsInCategory
設定します。 BulletedList プロパティを使用して指定されたデータ フィールドの値が DataTextField
表示されます。このコントロールには製品情報がバインドされるため、 プロパティを DataTextField
に ProductName
設定します。
<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
runat="server"></asp:BulletedList>
イベント ハンドラーで、 を ItemCommand
使用してこのコントロールを e.Item.FindControl("ProductsInCategory")
参照し、選択したカテゴリに関連付けられている製品のセットにバインドします。
Protected Sub Categories_ItemCommand _
(source As Object, e As RepeaterCommandEventArgs) _
Handles Categories.ItemCommand
If e.CommandName = "ShowProducts" Then
' Determine the CategoryID
Dim categoryID As Integer = Convert.ToInt32(e.CommandArgument)
' Get the associated products from the ProudctsBLL and
' bind them to the BulletedList
Dim products As BulletedList = _
CType(e.Item.FindControl("ProductsInCategory"), BulletedList)
Dim productsAPI As New ProductsBLL()
products.DataSource = productsAPI.GetProductsByCategoryID(categoryID)
products.DataBind()
End If
End Sub
イベント ハンドラーでアクションを実行する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 に表示されます。 さらに、他のカテゴリの [Show Products]\(製品の表示\) リンクがクリックされた場合でも、この製品情報は残ります。
注意
このレポートの動作を変更して、一度に 1 つのカテゴリの製品のみが一覧表示されるようにする場合は、BulletedList コントロールの EnableViewState
プロパティを に False
設定するだけです。
図 7: BulletedList を使用して、選択したカテゴリの製品を表示します (フルサイズの画像を表示する場合は、ここをクリックします)
まとめ
DataList コントロールと Repeater コントロールには、テンプレート内に任意の数のボタン、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をドロップしてください。
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示