DataList および Repeater コントロールでデータを表示する (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

前のチュートリアルでは、GridView コントロールを使用してデータを表示しました。 このチュートリアル以降では、DataList コントロールと Repeater コントロールを使用して一般的なレポート パターンを作成する方法について説明します。最初に、これらのコントロールを使用してデータを表示する基本を説明します。

はじめに

過去 28 個のチュートリアルのすべての例で、データ ソースから複数のレコードを表示する必要がある場合は、GridView コントロールに設定しました。 GridView は、データ ソース内の各レコードの行をレンダリングし、レコードのデータ フィールドを列に表示します。 GridView を使用すると、データの表示、ページスルー、並べ替え、編集、および削除がスナップされますが、その外観は少しボックスです。 さらに、GridView の構造を担当するマークアップは、各レコードのテーブル行 () と各フィールドのテーブル セル (<tr><td>) を含む HTML <table> を含む固定されています。

複数のレコードを表示するときに、外観とレンダリングされたマークアップのカスタマイズ度を高めるために、ASP.NET 2.0 には DataList コントロールと Repeater コントロールが用意されています (どちらもバージョン 1.x でも使用 ASP.NET)。 DataList コントロールと Repeater コントロールは、BoundFields、CheckBoxFields、ButtonFields などのテンプレートを使用してコンテンツをレンダリングします。 GridView と同様に、DataList は HTML <table>としてレンダリングされますが、テーブル行ごとに複数のデータ ソース レコードを表示できます。 一方、Repeater は、明示的に指定したマークアップよりも追加のマークアップをレンダリングせず、出力されるマークアップを正確に制御する必要がある場合に最適な候補です。

以降の 10 個ほどのチュートリアルでは、DataList コントロールと Repeater コントロールを使用して一般的なレポート パターンを構築する方法について説明します。最初に、これらのコントロール テンプレートを使用してデータを表示する基本から始めます。 これらのコントロールの書式を設定する方法、DataList 内のデータ ソース レコードのレイアウトを変更する方法、一般的なマスター/詳細シナリオ、データを編集および削除する方法、レコードをページングする方法などについて説明します。

手順 1: DataList と Repeater チュートリアル Web ページの追加

このチュートリアルを開始する前に、まず、このチュートリアルに必要な ASP.NET ページと、DataList と Repeater を使用してデータを表示する次のいくつかのチュートリアルを追加しましょう。 まず、 という名前 DataListRepeaterBasicsのプロジェクトに新しいフォルダーを作成します。 次に、次の 5 つの ASP.NET ページをこのフォルダーに追加し、マスター ページを使用するようにすべてのページ Site.masterを構成します。

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

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

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

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

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

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

作成する DataList チュートリアルと Repeater チュートリアルを箇条書きに表示するには、サイト マップに追加する必要があります。 ファイルを Web.sitemap 開き、[カスタム ボタンの追加] サイト マップ ノードのマークアップの後に次のマークアップを追加します。

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

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

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

手順 2: DataList を使用して製品情報を表示する

FormView と同様に、DataList コントロールのレンダリングされる出力は、BoundFields や CheckBoxFields などのテンプレートに依存します。 FormView とは異なり、DataList は、一連のレコードではなく、一連のレコードを表示するように設計されています。 このチュートリアルでは、DataList に製品情報をバインドする方法について説明します。 まず、 フォルダー内の Basics.aspx ページを DataListRepeaterBasics 開きます。 次に、DataList をツールボックスからDesignerにドラッグします。 図 4 に示すように、DataList のテンプレートを指定する前に、Designerでは灰色のボックスとして表示されます。

ツールボックスから DataList をDesignerにドラッグする

図 4: DataList をツールボックスからDesignerにドラッグする (フルサイズの画像を表示するにはクリックします)

DataList のスマート タグから、新しい ObjectDataSource を追加し、クラスの メソッドGetProductsをProductsBLL使用するように構成します。 このチュートリアルでは読み取り専用の DataList を作成するため、ウィザードの [挿入]、[更新]、および [削除] タブでドロップダウン リストを [(なし)] に設定します。

新しい ObjectDataSource の作成を選択する

図 5: 新しい ObjectDataSource の作成を選択する (フルサイズの画像を表示するにはクリックします)

ProductsBLL クラスを使用するように ObjectDataSource を構成する

図 6: クラスを使用 ProductsBLL するように ObjectDataSource を構成する (フルサイズの画像を表示するにはクリックします)

GetProducts メソッドを使用して、すべての製品に関する情報を取得する

図 7: メソッドを使用してすべての製品に関する情報を GetProducts 取得する (フルサイズの画像を表示する をクリックします)

ObjectDataSource を構成し、スマート タグを使用して DataList に関連付けると、Visual Studio によって DataList に が自動的に作成 ItemTemplate され、データ ソースによって返される各データ フィールドの名前と値が表示されます (以下のマークアップを参照)。 この既定ItemTemplateの外観は、Designerを介してデータ ソースを FormView にバインドするときに自動的に作成されるテンプレートの外観と同じです。

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

注意

FormView のスマート タグを使用してデータ ソースを FormView コントロールにバインドすると、Visual Studio によって 、InsertItemTemplate、および が作成ItemTemplateされたことを思い出してくださいEditItemTemplate。 ただし、DataList では、 のみが ItemTemplate 作成されます。 これは、DataList に、FormView で提供される同じ組み込みの編集と挿入のサポートがないためです。 DataList には編集関連のイベントと削除関連のイベントが含まれており、編集と削除のサポートはコードを少し使用して追加できますが、FormView のようにすぐに使用できる簡単なサポートはありません。 今後のチュートリアルでは、DataList でサポートの編集と削除を含める方法について説明します。

このテンプレートの外観を改善するために少し時間を取りましょう。 すべてのデータ フィールドを表示するのではなく、製品名、仕入先、カテゴリ、単位あたりの数量、単価のみを表示してみましょう。 さらに、見出しに名前を <h4> 表示し、見出しの下に を使用して <table> 残りのフィールドをレイアウトします。

これらの変更を行うには、DataList のスマート タグの [テンプレートの編集] リンクをクリックしてDesignerのテンプレート編集機能を使用するか、ページの宣言構文を使用してテンプレートを手動で変更できます。 Designerで [テンプレートの編集] オプションを使用すると、結果のマークアップが次のマークアップと正確に一致しない場合がありますが、ブラウザーを使用して表示すると、図 8 に示すスクリーン ショットとよく似ているはずです。

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" 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>
</asp:DataList>

注意

上記の例では、Databinding 構文の値が Text プロパティに割り当てられている Label Web コントロールを使用しています。 または、Databinding 構文だけを入力して、ラベルを完全に省略することもできます。 つまり、 を使用 <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> する代わりに、宣言構文 <%# Eval("CategoryName") %>を使用することもできます。

ただし、Label Web コントロールをそのまま使用すると、2 つの利点があります。 最初に、次のチュートリアルで説明するように、データに基づいてデータを書式設定するための簡単な手段を提供します。 次に、Designerの [テンプレートの編集] オプションには、一部の Web コントロールの外部に表示される宣言型のデータバインド構文は表示されません。 代わりに、[テンプレートの編集] インターフェイスは、静的マークアップと Web コントロールの操作を容易にするように設計されており、Web コントロールのスマート タグからアクセスできる [DataBindings の編集] ダイアログ ボックスを使用してデータバインドが行われることを前提としています。

したがって、DataList を使用する場合は、Designerを使用してテンプレートを編集するオプションを提供します。ラベル Web コントロールを使用して、テンプレートの編集インターフェイスからコンテンツにアクセスできるようにします。 まもなく表示されるように、Repeater では、テンプレートのコンテンツを [ソース] ビューから編集する必要があります。 したがって、Repeater のテンプレートを作成するときは、プログラムロジックに基づいてデータバインドテキストの外観を書式設定する必要があることがわかっている場合を除き、ラベル Web コントロールを省略することがよくあります。

各製品の出力は、DataList の ItemTemplate を使用してレンダリングされます

図 8: 各製品の出力は、DataList を使用してレンダリングされます (フルサイズの画像を表示するには、 をクリックします)ItemTemplate

手順 3: DataList の外観を改善する

GridView と同様に、DataList には、、AlternatingItemStyleForeColorSelectedItemStyleBackColorItemStyleCssClass、などFont、さまざまなスタイル関連のプロパティが用意されています。 GridView コントロールと DetailsView コントロールを操作するときに、テーマにDataWebControlsスキン ファイルを作成しました。このファイルには、これら 2 つのコントロールのプロパティとCssClass、いくつかのサブプロパティ (RowStyle、、HeaderStyleなど) の プロパティが事前に定義CssClassされています。 DataList に対して同じ操作を行います。

「ObjectDataSource を使用したデータの表示」チュートリアルで説明したように、Skin ファイルは Web コントロールの既定の外観関連プロパティを指定します。テーマは、Web サイトの特定の外観を定義するスキン、CSS、イメージ、JavaScript ファイルのコレクションです。 ObjectDataSource を使用したデータの表示に関するチュートリアルでは、現在、2 つのスキン ファイル GridView.skinDetailsView.skinと を含む Theme (フォルダー内App_Themesのフォルダーとして実装されます) を作成DataWebControlsしました。 3 つ目のスキン ファイルを追加して、DataList の定義済みのスタイル設定を指定しましょう。

スキン ファイルを追加するには、フォルダーを App_Themes/DataWebControls 右クリックし、[新しい項目の追加] を選択し、一覧から [スキン ファイル] オプションを選択します。 そのファイルに DataList.skin という名前を付けます。

新しいスキン ファイル名として Default.skin が入力された [新しい項目の追加] ウィンドウを示すスクリーンショット。

図 9: という名前 DataList.skin の新しいスキン ファイルを作成する (フルサイズの画像を表示する 場合はクリックします)

ファイルには次のマークアップを DataList.skin 使用します。

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

これらの設定は、GridView コントロールと DetailsView コントロールで使用されたのと同じ CSS クラスを適切な DataList プロパティに割り当てます。 ここで DataWebControlStyle使用されている CSS クラス 、 AlternatingRowStyle、 RowStyle、などは、 ファイルで Styles.css 定義されており、前のチュートリアルで追加されました。

このスキン ファイルを追加すると、DataList の外観がDesignerで更新されます (新しいスキン ファイルの効果を確認するには、Designer ビューを更新する必要がある場合があります。[表示] メニューから [更新] を選択します)。 図 10 に示すように、各交互の製品は薄いピンクの背景色を持っています。

新しいスキン ファイルがDesignerの DataList の外観を更新する方法を示すスクリーンショット。

図 10: という名前 DataList.skin の新しいスキン ファイルを作成する (フルサイズの画像を表示する] をクリックします)

手順 4: DataList の他のテンプレートの探索

に ItemTemplate加えて、DataList は他の 6 つのオプション テンプレートをサポートしています。

  • HeaderTemplate 指定されている場合は、ヘッダー行を出力に追加し、この行をレンダリングするために使用されます
  • AlternatingItemTemplate 交互の項目をレンダリングするために使用されます
  • SelectedItemTemplate選択した項目をレンダリングするために使用されます。選択したアイテムは、インデックスが DataList の SelectedIndex プロパティに対応するアイテムです
  • EditItemTemplate 編集中のアイテムをレンダリングするために使用されます
  • SeparatorTemplate 指定した場合は、各項目の間に区切り記号を追加し、この区切り記号をレンダリングするために使用します
  • FooterTemplate - 指定した場合は、出力にフッター行を追加し、この行をレンダリングするために使用されます

または FooterTemplateをHeaderTemplate指定すると、DataList はレンダリングされた出力に追加のヘッダー行またはフッター行を追加します。 GridView のヘッダー行とフッター行と同様に、DataList のヘッダーとフッターはデータにバインドされません。 したがって、 または FooterTemplate でバインドされたデータへのHeaderTemplateアクセスを試みるデータバインド構文では、空の文字列が返されます。

注意

「GridView のフッターの概要情報の表示」チュートリアルで説明したように、ヘッダー行とフッター行ではデータバインド構文はサポートされていませんが、データ固有の情報は GridView のRowDataBoundイベント ハンドラーからこれらの行に直接挿入できます。 この手法を使用すると、コントロールにバインドされたデータから実行中の合計またはその他の情報を計算し、その情報をフッターに割り当てることができます。 この同じ概念を DataList コントロールと Repeater コントロールに適用できます。唯一の違いは、DataList と Repeater の場合、(イベントではなく) イベントの ItemDataBound イベント ハンドラーを RowDataBound 作成することです。

この例では、DataList の結果の先頭に "製品情報" というタイトルを見出しで <h3> 表示します。 これを実現するには、適切なマークアップで を HeaderTemplate 追加します。 Designerから、DataList のスマート タグの [テンプレートの編集] リンクをクリックし、ドロップダウン リストから [ヘッダー テンプレート] を選択し、スタイル ドロップダウン リストから [見出し 3] オプションを選択した後にテキストを入力します (図 11 を参照)。

テキスト製品情報を含む HeaderTemplate を追加する

図 11: テキスト製品情報を含む を HeaderTemplate 追加する (クリックするとフルサイズの画像が表示されます)

または、タグ内 <asp:DataList> に次のマークアップを入力することで、宣言的に追加することもできます。

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

各製品リストの間に少しスペースを追加するには、各セクションの間に行を含む を SeparatorTemplate 追加します。 水平ルール タグ (<hr>) は、このような区切り線を追加します。 次の SeparatorTemplate マークアップが含まれるように を作成します。

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

注意

HeaderTemplateと FooterTemplatesと 同様に、 SeparatorTemplate はデータ ソースのどのレコードにもバインドされないため、DataList にバインドされているデータ ソース レコードに直接アクセスすることはできません。

この追加を行った後、ブラウザーでページを表示すると、図 12 のようになります。 ヘッダー行と各製品一覧間の行をメモします。

DataList には、各製品一覧の間にヘッダー行と水平ルールが含まれています

図 12: DataList には、各製品一覧の間にヘッダー行と水平方向の規則が含まれています (フルサイズの画像を表示する をクリックします)

手順 5: Repeater コントロールを使用して特定のマークアップをレンダリングする

図 12 の DataList の例にアクセスするときにブラウザーからビュー/ソースを実行すると、DataList は、DataList にバインドされた各項目に対して 1 つのテーブル セル () を含むテーブル行 (<tr><td>) を含む HTML <table> を出力していることがわかります。 実際、この出力は、単一の TemplateField を使用して GridView から出力される出力と同じです。 今後のチュートリアルで説明するように、DataList では出力をさらにカスタマイズできるため、テーブル行ごとに複数のデータ ソース レコードを表示できます。

しかし、HTML <table>を出力したくない場合はどうしますか? データ Web コントロールによって生成されたマークアップを完全かつ完全に制御するには、Repeater コントロールを使用する必要があります。 DataList と同様に、Repeater はテンプレートに基づいて構築されます。 ただし、Repeater には次の 5 つのテンプレートのみが用意されています。

  • HeaderTemplate 指定した場合は、指定したマークアップを項目の前に追加します。
  • ItemTemplate アイテムのレンダリングに使用されます
  • AlternatingItemTemplate 指定されている場合は、交互の項目をレンダリングするために使用されます
  • SeparatorTemplate 指定した場合は、指定したマークアップを各項目の間に追加します
  • FooterTemplate - 指定した場合は、指定したマークアップを項目の後に追加します

ASP.NET 1.x では、Repeater コントロールは一般的に、データ ソースからのデータを含む箇条書きリストを表示するために使用されていました。 このような場合、 HeaderTemplate と FooterTemplates には開始タグと終了 <ul> タグがそれぞれ含まれますが、 には databinding 構文を ItemTemplate 持つ要素が含まれます <li> 。 この方法は、 マスター ページとサイト ナビゲーション チュートリアルの 2 つの例で説明したように、ASP.NET 2.0 で引き続き使用できます。

  • Site.masterマスター ページでは、最上位のサイト マップ コンテンツ (基本レポート、フィルター レポート、カスタマイズされた書式設定など) の箇条書きリストを表示するために Repeater が使用されました。別の入れ子になった Repeater を使用して、最上位のセクションの子セクションを表示しました
  • では SectionLevelTutorialListing.ascx、Repeater を使用して、現在のサイト マップ セクションの子セクションの箇条書きを表示しました

注意

ASP.NET 2.0 では、単純な箇条書きを表示するためにデータ ソース コントロールにバインドできる新しい BulletedList コントロールが導入されています。 BulletedList コントロールでは、リスト関連の HTML を指定する必要はありません。代わりに、各リスト アイテムのテキストとして表示するデータ フィールドを示すだけです。

Repeater は、すべてのデータ Web コントロールをキャッチする役割を果たします。 必要なマークアップを生成する既存のコントロールがない場合は、Repeater コントロールを使用できます。 Repeater の使用方法を示すために、手順 2 で作成した製品情報 DataList の上にカテゴリの一覧を表示します。 特に、カテゴリを 1 行の HTML <table> に表示し、各カテゴリをテーブルの列として表示します。

これを実現するには、まず、[ツールボックス] から [製品情報データリスト] の上にあるDesignerに Repeater コントロールをドラッグします。 DataList と同様に、テンプレートが定義されるまで、Repeater は最初は灰色のボックスとして表示されます。

Designerにリピータを追加する

図 13: Designerにリピータを追加する (フルサイズの画像を表示する をクリックします)

Repeater のスマート タグには、[データ ソースの選択] オプションが 1 つだけあります。 新しい ObjectDataSource を作成し、クラス s GetCategories メソッドをCategoriesBLL使用するように構成することを選択します。

新しい ObjectDataSource を作成する

図 14: 新しい ObjectDataSource を作成する (クリックするとフルサイズの画像が表示されます)

CategoriesBLL クラスを使用するように ObjectDataSource を構成する

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

GetCategories メソッドを使用して、すべてのカテゴリに関する情報を取得する

図 16: メソッドを使用してすべてのカテゴリに関する情報を GetCategories 取得する (フルサイズの画像を表示する をクリックします)

DataList とは異なり、Visual Studio では、データ ソースにバインドした後、Repeater の ItemTemplate は自動的に作成されません。 さらに、Repeater のテンプレートは、Designerを使用して構成することはできず、宣言によって指定する必要があります。

各カテゴリの列を含む単一行 <table> としてカテゴリを表示するには、Repeater が次のようなマークアップを出力する必要があります。

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td>テキストは繰り返される部分であるため、これは Repeater の ItemTemplate に表示されます。 の前に表示されるマークアップは <table><tr> に HeaderTemplate 配置され、終了マークアップ - </tr></table> は に FooterTemplate配置されます。 これらのテンプレート設定を入力するには、左下隅にある [ソース] ボタンをクリックして ASP.NET ページの宣言部分に移動し、次の構文を入力します。

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater は、テンプレートで指定された正確なマークアップを出力します。それ以上、それ以下のマークアップはありません。 図 17 は、ブラウザーで表示したときの Repeater の出力を示しています。

個別の列の各カテゴリLists Single-Row HTML <テーブル>

図 17: 個別の列の各カテゴリLists Single-Row HTML <table> (フルサイズの画像を表示する をクリックします)

手順 6: リピータの外観を改善する

Repeater はテンプレートで指定されたマークアップを正確に出力するため、Repeater にスタイル関連のプロパティがないことは驚くべきではありません。 Repeater によって生成されるコンテンツの外観を変更するには、必要な HTML または CSS コンテンツを手動で Repeater のテンプレートに直接追加する必要があります。

この例では、DataList の交互の行のように、カテゴリ列の背景色を交互に設定します。 これを実現するには、CSS クラスをRowStyle各 Repeater 項目に割り当て、CSS クラスを AlternatingRowStyle テンプレートと AlternatingItemTemplate テンプレートを通じてItemTemplate交互にリピータ項目ごとに割り当てる必要があります。次に例を示します。

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

また、[Product Categories]\(製品カテゴリ\) というテキストを含むヘッダー行を出力に追加します。 結果 <table> の列の数がで構成されるかわからないので、すべての列にまたがることが保証されるヘッダー行を生成する最も簡単な方法は、 2 つの<table> s を使用することです。 最初 <table> の行には、ヘッダー行と、システム内の各カテゴリの列を含む 2 番目の単一行を含む行が 2 行 <table> 含まれます。 つまり、次のマークアップを出力します。

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

次 HeaderTemplate の と を指定すると、 FooterTemplate 目的のマークアップが生成されます。

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

図 18 は、これらの変更が行われた後の Repeater を示しています。

背景色が交互に表示され、ヘッダー行が含まれるカテゴリ列

図 18: 背景色の代替カテゴリ列とヘッダー行を含む (フルサイズの画像を表示する をクリックします)

まとめ

GridView コントロールを使用すると、データの表示、編集、削除、並べ替え、ページ移動が簡単になりますが、外観は非常にボックスでグリッドに似ています。 外観をより細かく制御するには、DataList コントロールまたは Repeater コントロールを使用する必要があります。 どちらのコントロールも、BoundFields や CheckBoxFields などの代わりにテンプレートを使用してレコードのセットを表示します。

DataList は HTML <table> としてレンダリングされ、既定では、単一の TemplateField を持つ GridView と同様に、各データ ソース レコードが 1 つのテーブル行に表示されます。 ただし、今後のチュートリアルで説明するように、DataList ではテーブル行ごとに複数のレコードを表示できます。 一方、Repeater は、そのテンプレートで指定されたマークアップを厳密に出力します。マークアップは追加されないため、 以外 <table> の HTML 要素 (箇条書きリストなど) でデータを表示するために一般的に使用されます。

DataList と Repeater はレンダリングされた出力の柔軟性を高めますが、GridView に組み込まれている機能の多くがありません。 今後のチュートリアルで説明するように、これらの機能の一部は、あまり労力をかけずに接続し直すことができますが、GridView の代わりに DataList または Repeater を使用すると、それらの機能を自分で実装しなくても使用できる機能が制限されます。

幸せなプログラミング!

著者について

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

特別な感謝

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

次へ