DataList コントロールで複数のレコードを行ごとに表示する (C#)
この短いチュートリアルでは、RepeatColumns プロパティと RepeatDirection プロパティを使用して DataList のレイアウトをカスタマイズする方法について説明します。
はじめに
過去 2 つのチュートリアルで見た DataList の例では、データ ソースの各レコードが 1 列の HTML <table>の行としてレンダリングされています。 これは既定の DataList 動作ですが、データ ソース項目が複数列の複数行テーブルに分散されるように DataList 表示をカスタマイズするのは非常に簡単です。 さらに、すべてのデータ ソース項目を 1 行の複数列 DataList に表示できます。
DataList のレイアウトは、 プロパティと RepeatDirection プロパティを使用してRepeatColumnsカスタマイズできます。それぞれ、レンダリングされる列の数と、それらの項目が垂直方向または水平方向にレイアウトされているかどうかを示します。 図 1 は、たとえば、3 つの列を含むテーブルに製品情報を表示する DataList を示しています。
図 1: DataList には 1 行あたり 3 つの製品が表示されます (フルサイズの画像を表示する場合はクリックします)
行ごとに複数のデータ ソース項目を表示することで、DataList は水平方向の画面領域をより効果的に利用できます。 この短いチュートリアルでは、これら 2 つの DataList プロパティについて説明します。
手順 1: DataList に製品情報を表示する
プロパティと RepeatDirection プロパティをRepeatColumns調べる前に、最初に、標準の単一列の複数行テーブル レイアウトを使用して製品情報を一覧表示する DataList をページに作成しましょう。 この例では、次のマークアップを使用して、製品の名前、カテゴリ、価格を表示します。
<h4>Product Name</h4>
Available in the Category Name store for Price
前の例では DataList にデータをバインドする方法を見てきました。そのため、これらの手順をすばやく実行します。 まず、フォルダー内のページをRepeatColumnAndDirection.aspxDataListRepeaterBasics開き、DataList をツールボックスからDesignerにドラッグします。 DataList のスマート タグから、新しい ObjectDataSource を作成し、クラスの メソッドからデータをプルするように構成し、ウィザードの GetProducts INSERT、UPDATE、DELETE タブから ProductsBLL [(なし)] オプションを選択します。
新しい ObjectDataSource を作成して DataList にバインドすると、Visual Studio によって、各製品データ フィールドの名前と値を表示する が自動的に作成 ItemTemplate されます。 ItemTemplate宣言型マークアップを使用するか、DataList のスマート タグの [テンプレートの編集] オプションから直接を調整して、上記のマークアップを使用するようにします。製品名、カテゴリ名、および価格テキストを、適切なデータバインド構文を使用してプロパティに値を割り当てる 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 は製品の単一列の複数行テーブルとしてレンダリングされます。
図 2: 既定では、DataList は単一列の複数行テーブルとしてレンダリングされます (クリックするとフルサイズの画像が表示されます)
手順 2: DataList のレイアウト方向を変更する
DataList の既定の動作では、項目を 1 列の複数行のテーブルに垂直方向にレイアウトしますが、この動作は DataList の RepeatDirection プロパティを使用して簡単に変更できます。 プロパティは RepeatDirection 、または (既定値) の 2 つの可能な値 HorizontalVertical のいずれかを受け取ることができます。
プロパティを RepeatDirection から Vertical に Horizontal変更すると、DataList はレコードを 1 行にレンダリングし、データ ソースアイテムごとに 1 列を作成します。 この効果を示すには、Designerの DataList をクリックし、プロパティ ウィンドウから プロパティを RepeatDirection から Vertical にHorizontal変更します。 その直後に、Designerは DataList のレイアウトを調整し、単一行の複数列インターフェイスを作成します (図 3 を参照)。
図 3: プロパティは RepeatDirection 、DataList の項目のレイアウトの方向を決定します (フルサイズの画像を表示する をクリックします)
少量のデータを表示する場合は、1 行の複数列のテーブルが画面の不動産を最大化するのに最適な方法である場合があります。 ただし、大量のデータの場合、1 行に多数の列が必要になり、画面に収まらない項目が右側にプッシュされます。 図 4 は、単一行の DataList でレンダリングされた製品を示しています。 多くの製品 (80 を超える) があるため、ユーザーは右にスクロールして各製品に関する情報を表示する必要があります。
図 4: 十分に大きなデータ ソースの場合、1 列の DataList では水平スクロールが必要です (フルサイズの画像を表示する 場合はクリックします)
手順 3: 複数列、複数行のテーブルにデータを表示する
複数列の複数行 DataList を作成するには、 プロパティをRepeatColumns表示する列の数に設定する必要があります。 既定では、 RepeatColumns プロパティは 0 に設定されています。これにより、DataList は、そのすべての項目を 1 行または 1 列に表示します (プロパティの RepeatDirection 値に応じて)。
この例では、テーブル行ごとに 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 現在、3 で割り切れる 84 個の製品があるため、28 行あります。 データ ソース内の項目数と RepeatColumns プロパティ値が割り切れない場合、最後の行または列には空白のセルが含まれます。 RepeatDirectionが にVertical設定されている場合、最後の列には空のセルが含まれます。が のHorizontal場合RepeatDirection、最後の行には空のセルが含まれます。
まとめ
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することも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。
特別な感謝
このチュートリアル シリーズは、多くの役立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は John Suru でした。 今後の MSDN 記事の確認に関心がありますか? その場合は、 に行mitchell@4GuysFromRolla.comをドロップしてください。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示