3.Repeater コンポーネントを使用してデータセットを表示します
関連紹介
ASP.NET でデータを表示するにはさまざまな方法がありますが、Repeater も既存のコンポーネントです。 DataGridでは常に「テーブル」でデータを表示しますが、より自由な方法でデータを表示したい場合は、必ずRepeaterコントロールを使用します。
データの出力形式をテンプレートの形式で定義します。
ステップ 1. ページを作成します。元のページを変更してデータを表示するためのリピーター コンポーネントを作成できます。 Location1.htm の名前を Location1.aspx に変更します。ページの元の部分を削除し、前の章と同様に、Region_IDEnterValue=1 をフィルタリングしてデータセットを作成します。 Replyer コントロールを使用して動的なページを作成してみましょう。
jテンプレートを使用して出力形式を定義するには、まずテーブルを作成します。 「アプリケーション」→「データベース」ページから確認できます。
データベースの構造。
[図3-1 データベース構造]
データベースの構造に基づいて、次のテーブルを設計します。
[図3-2 テンプレート図]
kデータは以下のテーブルにバインドする必要があります。データ項目を「アプリケーション」パネルの「バインド」からその位置にドラッグします。
[図 3-3 バインディングダイアログボックス]
データ バインディング後、次のページが表示されます。
[図3-4 データバインディング後のページ]
Dreamwaver MX はデータを強調表示する UltraDev の伝統を引き継いでいるため、少し既視感を感じます。 ③ データ表現形式はバインディングダイアログボックスでも選択できます。ページ上のデータ項目をクリックすると、バインディング内の対応するデータのデータ表現形式を選択できます。
[図3-5 データ表現形式]
このテーブルをテンプレートとして使用してすべてのデータ項目を表示する場合は、このテーブルをすべて選択する必要があります。 「アプリケーション」パネルの「サーバー動作」項目の「+」をクリックし、「リピート領域」項目を選択します。 
[図3-6 リピート範囲の選択] [図3-7 リピート方法の選択]
［リピート領域］で繰り返したいメソッドを決定し、［OK］をクリックします。これで、「F12」を押してページをプレビューできるようになります。
STEP 2 コードを解析します（注：コードを表示するために、以下のコードはすべて「<」の後と「>」の前にスペースが入っています。ご迷惑をおかけして申し訳ありません。）
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<アイテムテンプレート>
< テーブル幅="75%" ボーダー="0" >
<tr>
< td width="18%" >場所の名前</ td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", コンテナ) % > </ /td >
< /tr >
<tr>
< td >市< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", コンテナ) % > </ /td >
< td width="19%" >アドレス</ td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", コンテナ) % > </ /td >
< /tr >
<tr>
< td >状態</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", コンテナ) % > < /td >
< td >コード< /td >
< td > < %# DataSet1.FieldValue("CODE", コンテナ) % > < /td >
< /tr >
<tr>
< td >電話< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", コンテナ) % > < /td >
< td >ファックス< /td >
< td > < %# DataSet1.FieldValue("FAX", コンテナ) % > < /td >
< /tr >
< /table >
< /ItemTemplate >
< /ASP:リピーター >
ASP.net では、ItemTemple テンプレートを作成することですべてのデータを繰り返し表示するため、Repeater スタイルを設定したい場合は、テンプレートを設定することで実行できます。
他のテンプレートを追加して、必要な効果を実現することもできます。
AlternatingItemTemplate: クロスディスプレイ データを実装します。元のItemTemplateのテンプレートとデータをクロス表示する
SeparatorTemplate: 区切り文字テンプレート。データの行を区切るために使用できます。
HeaderTemplate: ヘッダー テンプレート。すべてのデータが上部に表示されます。
FooterTemplate: フッター テンプレート。すべてのデータが下部に表示されます。
デザイン形式はItemTemplateと同じです。テンプレートにしたい部分をマーカーで囲むだけです。
Dreamwaver MX を通じてコードを挿入するためのショートカットがあります。 [挿入]パネルの[ASP.NET]タブをクリックし、[
マークを追加すると、マーク追加ダイアログボックスが表示されます。 ASP.NETタグでテンプレートプロジェクトを選択します。その後、追加するコードを選択できます。 Dreamwaver MX は、元の入力カーソルがあった位置にコードを追加します。
[図 2-1 マーカーの追加ダイアログボックス]
以下は、< ASP:Repeater > < /ASP:Repeater > に挿入できる AlternatingItemTemplate、SepartorTemplate、HeaderTemplate、および FooterTemplate のコードです。
< headertemplate >< font color="#666666" size="4">すべて
場所</font >< /headertemplate >
<代替アイテムテンプレート>
< テーブル幅="75%" ボーダー="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >場所の名前</ td >
< tdcolspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", コンテナ) % >
</ /td >
< /tr >
<tr>
< td >市< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", コンテナ) % > </ /td >
< td width="24%" >アドレス</ td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", コンテナ) % > </ /td >
< /tr >
<tr>
< td >状態</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", コンテナ) % > < /td >
< td >コード< /td >
< td > < %# DataSet1.FieldValue("CODE", コンテナ) % > < /td >
< /tr >
<tr>
< td >電話< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", コンテナ) % > < /td >
< td >ファックス< /td >
< td > < %# DataSet1.FieldValue("FAX", コンテナ) % > < /td >
< /tr >
< /table >
< /AlternatingItemTemplate >
< separatortemplate >< hr width="70%" align="left" >
< /separatortemplate >
< footertemplate >< font color="#666666" size="4" >終了</font >< /footertemplate >
IIS がコードを解析すると、キーワードに基づいてテンプレートが相対位置に配置され、最初に要求されたページが取得されます。
上記のプログラムで生成されたページは次のとおりです。
[図2-1 最終ページ]
リピーター コンポーネントはより自由なページを作成できますが、各行に表示できるのは 1 セットのデータのみです。もっと自由なページを作成したい場合は、次のセクションに進み、DataList コントロールを使用してデータを表示しましょう。