この短いチュートリアルでは、RepeatColumns プロパティと RepeatDirection プロパティを使用して DataList のレイアウトをカスタマイズする方法について説明します。
イントロダクション
過去 2 つのチュートリアルで見た DataList の例では、データ ソースの各レコードが単一列の HTML <table>の行としてレンダリングされています。 これは DataList の既定の動作ですが、データ ソース項目が複数列の複数行テーブルに分散されるように DataList の表示をカスタマイズするのは非常に簡単です。 さらに、すべてのデータ ソース項目を 1 行の複数列の DataList に表示できます。
DataList のレイアウトは、 RepeatColumns プロパティと RepeatDirection プロパティを使用してカスタマイズできます。各プロパティは、レンダリングされる列の数と、それらの項目が垂直方向または水平方向にレイアウトされているかどうかを示します。 図 1 は、たとえば、3 つの列を持つテーブルに製品情報を表示する DataList を示しています。
図 1: DataList には、行ごとに 3 つの製品が表示されます (フルサイズの画像を表示する 場合はクリックします)
行ごとに複数のデータ ソース項目を表示することで、DataList は水平方向の画面領域をより効果的に利用できます。 この短いチュートリアルでは、これら 2 つの DataList プロパティについて説明します。
手順 1: DataList に製品情報を表示する
RepeatColumnsプロパティとRepeatDirectionプロパティを調べる前に、最初に、標準の単一列の複数行テーブル レイアウトを使用して製品情報を一覧表示する DataList をページに作成しましょう。 この例では、次のマークアップを使用して、製品名、カテゴリ、および価格を表示します。
<h4>Product Name</h4>
Available in the Category Name store for Price
前の例で DataList にデータをバインドする方法を見てきました。そのため、これらの手順をすばやく実行します。 まず、RepeatColumnAndDirection.aspx フォルダーのDataListRepeaterBasics ページを開き、ツールボックスからデザイナーに DataList をドラッグします。 DataList のスマート タグから、新しい ObjectDataSource を作成し、ウィザードの INSERT、UPDATE、DELETE タブから (None) オプションを選択して、 ProductsBLL クラスの GetProducts メソッドからデータをプルするように構成します。
新しい ObjectDataSource を作成して DataList にバインドすると、Visual Studio によって、各製品データ フィールドの名前と値を表示する ItemTemplate が自動的に作成されます。 宣言型マークアップを使用して直接、または DataList のスマート タグの [テンプレートの編集] オプションからItemTemplateを調整して、上記のマークアップを使用するようにします。製品名、カテゴリ名、および価格テキストは、適切なデータ バインド構文を使用して値をTextプロパティに割り当てる Label コントロールに置き換えます。
ItemTemplateを更新すると、ページの宣言型マークアップは次のようになります。
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<ItemTemplate>
<h4>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>'></asp:Label>
</h4>
Available in the
<asp:Label runat="server" ID="CategoryNameLabel"
Text='<%# Eval("CategoryName") %>' />
store for
<asp:Label runat="server" ID="UnitPriceLabel"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
EvalのUnitPriceデータバインド構文に書式指定子を含め、戻り値を通貨として書式設定していることに注意してください。Eval("UnitPrice", "{0:C}").
少しの間、ブラウザでページを訪問してみてください。 図 2 に示すように、DataList は製品の単一列の複数行テーブルとしてレンダリングされます。
図 2: 既定では、DataList は単一列の複数行テーブルとしてレンダリングされます (フルサイズの画像を表示する をクリックします)
手順 2: DataList のレイアウト方向を変更する
DataList の既定の動作では、項目を 1 列の複数行のテーブルに垂直方向にレイアウトしますが、この動作は DataList の RepeatDirection プロパティを使用して簡単に変更できます。
RepeatDirection プロパティは、HorizontalまたはVertical (既定値) の 2 つの値のいずれかを受け入れます。
RepeatDirection プロパティを Vertical から Horizontal に変更すると、DataList はレコードを 1 行にレンダリングし、データ ソースアイテムごとに 1 つの列を作成します。 この効果を示すには、デザイナーで DataList をクリックし、[プロパティ] ウィンドウで RepeatDirection プロパティを Vertical から Horizontal に変更します。 その直後に、デザイナーは DataList のレイアウトを調整し、単一行の複数列インターフェイスを作成します (図 3 を参照)。
図 3: RepeatDirection プロパティは、DataList の項目の配置方向を決定します (フルサイズの画像を表示する をクリックします)。
少量のデータを表示する場合、単一行の複数列テーブルが画面の領域を最大化する理想的な方法である可能性があります。 ただし、大量のデータの場合、1 つの行に多数の列が必要になり、画面に収まらない項目が右側にプッシュされます。 図 4 は、単一行の DataList でレンダリングされた場合の製品を示しています。 多くの製品 (80 以上) があるため、ユーザーは右にスクロールして各製品に関する情報を表示する必要があります。
図 4: 十分に大きなデータ ソースの場合、1 列の DataList では水平スクロールが必要です (フルサイズの画像を表示する 場合はクリックします)
手順 3: 複数列の複数行テーブルにデータを表示する
複数列の複数行 DataList を作成するには、 RepeatColumns プロパティ を表示する列の数に設定する必要があります。 既定では、 RepeatColumns プロパティは 0 に設定されています。これにより、DataList は、( RepeatDirection プロパティの値に応じて) すべての項目を 1 つの行または列に表示します。
この例では、テーブル行ごとに 3 つの製品を表示します。 したがって、 RepeatColumns プロパティを 3 に設定します。 この変更を行った後、少し時間を取ってブラウザーで結果を表示します。 図 5 に示すように、製品は 3 列の複数行のテーブルに一覧表示されます。
図 5: 行ごとに 3 つの製品が表示されます (フルサイズの画像を表示する をクリックします)。
RepeatDirection プロパティは、DataList 内の項目のレイアウト方法に影響します。図 5 は、RepeatDirection プロパティが Horizontal に設定された結果を示しています。 最初の3つの製品チャイ、チャン、アニセドシロップは、左から右、上から下にレイアウトされていることに注意してください。 次の 3 つの製品 (Chef Anton s Cajun Seasoning 以降) は、最初の 3 つの下に 1 列に表示されます。 ただし、 RepeatDirection プロパティを Vertical に戻す場合、図 6 に示すように、これらの製品は上から下、左から右にレイアウトされます。
図 6: ここでは、製品が垂直方向にレイアウトされています (フルサイズの画像を表示する をクリックします)。
結果のテーブルに表示される行数は、DataList にバインドされたレコードの合計数によって異なります。 正確には、データ ソース項目の合計数の上限を RepeatColumns プロパティ値で割った値です。
Products テーブルには現在 84 個の製品があり、3 で割り切れるので、28 行あります。 データ ソース内の項目数と RepeatColumns プロパティ値が割り切れない場合、最後の行または列には空白のセルが含まれます。
RepeatDirectionがVerticalに設定されている場合、最後の列には空のセルが含まれます。RepeatDirectionがHorizontal場合、最後の行には空のセルが含まれます。
概要
DataList は、既定では、単一の TemplateField を持つ GridView のレイアウトを模倣する単一列の複数行テーブルにその項目を一覧表示します。 この既定のレイアウトは許容されますが、行ごとに複数のデータ ソース項目を表示することで、画面の不動産を最大化できます。 これを実現するには、DataList の RepeatColumns プロパティを行ごとに表示する列の数に設定するだけです。 さらに、DataList の RepeatDirection プロパティを使用して、複数列、複数行のテーブルの内容を左から右、上から下、または上下、左から右に水平方向にレイアウトするかどうかを示すことができます。
著者について
7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は John Suru でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにメッセージを送ってください。