DataList コントロールで複数のレコードを行ごとに表示する (VB)

[アーティクル]
05/14/2024

この短いチュートリアルでは、RepeatColumns および RepeatDirection プロパティを使用して DataList のレイアウトをカスタマイズする方法について説明します。

はじめに

これまでの 2 つのチュートリアルで見た DataList の例では、データソースの各レコードが 1 列の HTML <table> の行としてレンダリングされていました。これが DataList の既定の動作ですが、複数列の複数行テーブルにデータソース項目が分散されるように DataList の表示をカスタマイズするのはとても簡単です。さらに、すべてのデータソース項目を 1 行の複数列 DataList に表示できます。

DataList のレイアウトは、RepeatColumns および RepeatDirection プロパティを使用してカスタマイズできます。これらは、それぞれ、レンダリングされる列の数と、それらの項目が垂直と水平のどちらの方向にレイアウトされるかを示します。たとえば、図 1 は、3 つの列があるテーブルに製品情報を表示する DataList を示しています。

図 1: DataList で 1 行あたり 3 つの製品を表示しています (クリックするとフルサイズの画像が表示されます)

1 行あたり複数のデータソース項目を表示することで、DataList で水平方向の画面領域をより効果的に利用できます。この短いチュートリアルでは、これら 2 つの DataList プロパティについて説明します。

手順 1: DataList で製品情報を表示する

RepeatColumns および RepeatDirection プロパティについて調べる前に、まず、標準の 1 列で複数行のテーブルレイアウトを使用して、製品情報を一覧表示する DataList をページに作成しましょう。この例では、次のマークアップを使用して、製品名、カテゴリ、価格を表示します。

<h4>Product Name</h4>
Available in the Category Name store for Price

DataList にデータをバインドする方法は前の例で見たので、これらの手順は簡単に進めます。 DataListRepeaterBasics フォルダー内の RepeatColumnAndDirection.aspx ページを開くことから始めて、ツールボックスからデザイナーに DataList をドラッグします。 DataList のスマートタグから、新しい ObjectDataSource を作成し、ウィザードの INSERT、UPDATE、DELETE タブから (None) オプションを選択して、ProductsBLL クラスの GetProducts メソッドからデータを取得するように構成します。

新しい ObjectDataSource を作成して DataList にバインドすると、Visual Studio で ItemTemplate が自動的に作成されます。これは、各製品データフィールドの名前と値を表示します。宣言型マークアップを使用して直接、または DataList のスマートタグの [テンプレートの編集] オプションから、上記のマークアップを使用するように ItemTemplate を調整します。Product Name、Category Name、Price のテキストは Label コントロールに置き換えます。これにより、適切なデータバインド構文を使用して Text のプロパティに値が割り当てられます。 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>

UnitPrice の Eval データバインド構文に、戻り値を通貨として書式設定する書式指定子を含めていることに注意してください - Eval("UnitPrice", "{0:C}").

少し時間を取ってブラウザーでページにアクセスします。図 2 に示すように、DataList は 1 列で複数行の製品テーブルとしてレンダリングされます。

図 2: 既定では、DataList は 1 列の複数行テーブルとしてレンダリングされます (クリックするとフルサイズの画像が表示されます)

手順 2: DataList のレイアウト方向を変更する

DataList の既定の動作では、1 列の複数行テーブルに項目を垂直方向にレイアウトしますが、この動作は DataList の RepeatDirection プロパティを使用して簡単に変更できます。 RepeatDirection プロパティは、2 つの可能な値のいずれかを受け取ることができます: Horizontal または Vertical (既定値)。

RepeatDirection プロパティを Vertical から Horizontal に変更することで、DataList でレコードを 1 行にレンダリングし、データソース項目ごとに 1 つの列を作成します。この効果を示すには、デザイナーで DataList をクリックし、次にプロパティウィンドウで RepeatDirection プロパティを Vertical から Horizontal に変更します。そうするとすぐに、デザイナーで DataList のレイアウトが調整され、1 行の複数列インターフェイスが作成されます (図 3 を参照)。

図 3: RepeatDirection プロパティによって、DataList の項目の配置方向が決定します (クリックするとフルサイズの画像が表示されます)

少量のデータを表示する場合は、1 行の複数列テーブルが、画面の領域を最大化する理想的な方法である可能性があります。一方、大量のデータの場合は、1 つの行に多数の列が必要になり、画面に収まらない項目が右にプッシュされます。図 4 は、1 行の DataList でレンダリングされた場合の製品を示しています。多数の製品 (80 以上) があるため、ユーザーが各製品に関する情報を表示するには、右にスクロールする必要があります。

図 4: データソースが多い場合、1 列の DataList では水平スクロールが必要になります (クリックするとフルサイズの画像が表示されます)

手順 3: 複数列の複数行テーブルにデータを表示する

複数列で複数行の DataList を作成するには、RepeatColumns プロパティを、表示する列の数に設定する必要があります。既定では、RepeatColumns プロパティは 0 に設定されています。この場合、DataList は、すべての項目を 1 つの行または列 (RepeatDirection プロパティの値による) に表示します。

この例では、テーブル行あたり 3 つの製品を表示します。したがって、RepeatColumns プロパティを 3 に設定します。この変更を行った後、少し時間を取ってブラウザーで結果を表示します。図 5 に示すように、製品は 3 列の複数行テーブルに一覧表示されます。

図 5: 1 行あたり 3 つの製品が表示されています (クリックするとフルサイズの画像が表示されます)

RepeatDirection プロパティは、DataList 内の項目のレイアウト方法に影響します。図 5 は、RepeatDirection プロパティを Horizontal に設定した結果を示しています。最初の 3 つの製品 (Chai、Chang、Aniseed Syrup) は、左から右、上から下にレイアウトされていることに注意してください。次の 3 つの製品 (Chef Anton's Cajun Seasoning 以降) は、最初の 3 つの下の行に表示されています。ただし、RepeatDirection プロパティを Vertical に戻すと、図 6 に示すように、これらの製品は上から下、左から右にレイアウトされます。

図 6: ここでは、製品が垂直方向にレイアウトされています (クリックするとフルサイズの画像が表示されます)

結果のテーブルに表示される行数は、DataList にバインドされたレコードの合計数によって異なります。正確には、データソース項目の合計数の上限を RepeatColumns プロパティ値で割った値です。 Products テーブルには現在 84 個の製品があり、3 で割り切れるので、28 行あります。データソース内の項目数と RepeatColumns プロパティ値が割り切れない場合、最後の行または列には空白のセルが含まれます。 RepeatDirection が Vertical に設定されている場合、RepeatDirection が Horizontal であれば、最後の列には空のセルが含まれます。

まとめ

DataList は、既定では1 列の複数行テーブルにその項目を一覧表示します。これは、1 つの TemplateField がある GridView のレイアウトを模倣しています。この既定のレイアウトのままでもかまいませんが、行ごとに複数のデータソース項目を表示することで、画面の領域を最大化できます。これを実現するには、DataList の RepeatColumns プロパティを、行ごとに表示する列の数に設定するだけです。さらに、DataList の RepeatDirection プロパティを使用して、複数列、複数行のテーブルの内容を水平方向に左から右、上から下にレイアウトするか、垂直方向に上から下、左から右にレイアウトするかを示すことができます。

著者について

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

特別な感謝

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

前へ次へ

Share via