DreamwaverMX と ASP.NET(4)

著者：Eve Cole 更新時間：2009-05-31 21:06:17

4. DataList コンポーネントを使用してデータセットを表示します

関連紹介:

DataList は、Repeater の本来の機能に加え、1 行に表示するデータ数 (RepeatColumn)、選択したテンプレート (SelectedItemTemple)、編集項目のテンプレート (EditTemplate) を設定できる機能を強化したコントロールです。ただし、DataList は出力データをテーブルに並べて出力しますが、Repeater はテンプレートの定義に忠実で、HTML タグを追加しません。 (注: コードを表示するために、以下のコードはすべて「<」の後と「>」の前にスペースが入っています。ご迷惑をおかけして申し訳ありません。)

STEP 1ページを作成する

作成したいページは以下のようなページです。「詳細」のハイパーリンクをクリックすると、最初の項目に示すように、詳細情報がポップアップ表示されます。「閉じる」をクリックすると、詳細が閉じられ、元の外観に戻ります。

[図 1-1 ページのデモ]

まずは表示したいデータを選択します。ヨーロッパ (つまり、Region_ID=3) のデータを表示するには、データセット設定で Regional_ID=3 のデータをフィルターすることを選択できます。

【図1-2 データスクリーニング】

Datalist コントロールを使用して、データを簡単に表示するページを作成します。まずはデータのないページを作成してみましょう。次に、[アプリケーション] パネルで [サーバーの動作] を選択します。「+」をクリックしてDataListを選択します。

[図1-3 DataList選択画面]

表示されるダイアログボックスで、必要に応じてページテンプレートを追加できます。

u ヘッダー: ヘッダーテンプレート

u 項目: データ項目テンプレート

u 代替アイテム：クロスディスプレイテンプレート

u 項目の編集: テンプレートを変更します ((デフォルトでは表示されません。イベント応答を通じて表示する必要があります)

u 選択された項目: 選択後に表示されるテンプレート (イベント応答を通じても表示される必要があります)

u セパレータ: 別のテンプレート

u フッター: テーブル下部のテンプレート

[図1-4 DataList編集ダイアログボックス]
コンテンツに HTML コードを追加することで必要なテンプレートを作成できます。また、

ボタンをクリックしてデータ項目を追加します。ボタンをクリックすると、データ項目ダイアログボックスが表示され、必要なデータを選択できます。そして、それをコンテンツ入力ボックスに追加します

< %# DataBinder.Eval(Container.DataItem, "データ項目") % >

コードはデータを表示するために使用されます。

[図1-5 データ項目の追加]

プレビュー効果を実現するには、まずコード「場所名」をヘッダーに追加します。タイトルを表示するために使用します。コードを項目に追加します。

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % > では、Location_name を各項目のタイトルとして使用します。

代替アイテムにコードを追加

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >

データを異なるフォント色で表示します。

選択した項目はすぐには表示できませんが、後で呼び出すためにコードも書き留めておく必要があります。次のように：

住所：

< %# DataSet1.FieldValue("ADDRESS", コンテナ) % >

 

市：

< %# DataSet1.FieldValue("CITY", コンテナ) % >

 

電話：

< %# DataSet1.FieldValue("TELEPHONE", コンテナ) % >

 

[OK] をクリックし、ページをプレビューします。下の図は、上記のコードの結果です。選択したアイテムを表示するエフェクトをすぐに実装します。

[図 1-6 初期プレビュー]
DataList と Replyer の違いの 1 つは、複数のデータを 1 行に表示するように設定できることです。これは、DataList 編集ウィンドウで設定できます。

[図1-7 複数のデータを1行で表示する設定]

[改行を使用] オプションを選択すると、データを区切るための タグが追加されるだけです。 [表を使用] を選択して表形式で出力すると、表の列を設定することで 1 行に表示されるデータの数を決定できます。

STEP2 コードを書く

選択した項目はイベントを通じて表示する必要があるため、イベントを開始するボタンを作成する必要があります。

j イベントを生成するための LinkButton を追加します。ソースコードウィンドウで <ItemTemplate> と </ItemTemplate> の間にカーソルを移動し、その他のタグをクリックします

、ポップアップダイアログボックスで asp:LinkButton コントロールを選択します。

[図 2-1 タグ選択ダイアログボックス]

[リンクボタンの編集] ダイアログボックスで、リンクボタンのプロパティを設定します。 ID 入力ボックスに名前:詳細を入力します。

イベントを発生させるコマンドのコマンド名に「詳細」と入力し、表示されるテキストダイアログに詳細を入力します。

[図 2-2 LinkButton エディットボックス]

次に、[レイアウト] で目的の色を選択し、[OK] をクリックしてコードを生成します。

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >

クロス表示でこの効果を持たせるには、<AlternatingItemTemplate> と </AlternatingItemTemplate> に同じコードを挿入する必要があります。
同時に、ポップアップ選択テンプレートを閉じるためにコマンドも生成する必要があるため、リンクボタンをもう 1 つ追加する必要があります。これには、<SelectedItemTemplate></SelectedItemTemplate> にコードを挿入する必要があります。

< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >

k コマンドでは、コマンドを解釈するプログラムも使用する必要があります。実際、このプロセスは複雑ではなく、少量のコードを追加するだけで済みます。次のコードを < head ></ /head > に追加します。

< スクリプト言語="VB" runat="サーバー" >

Sub DataList_ItemCommand (オブジェクトとして送信者、DataListCommandEventArgs として送信)

e.CommandSource.CommandName="Detail" の場合

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" then

DataList1.SelectedIndex=-1

終了の場合

DataList1.DataBind()

エンドサブ

</ /スクリプト >

LinkButtonをクリックするとプログラムはコマンド(CommandName)を取得し、実行するプログラムを決定します。 DataList の SelectedIndex プロパティが e.Item.ItemIndex に設定されている場合、SelectedItemTemplate ページが開きます。コマンドが Close で、DataList の SelectedIndex プロパティが -1 に設定されている (つまり、データ項目が選択されていない) 場合、DataList は、ItemTemplate 項目テンプレートを使用してこのデータ項目を表示します。

< asp:DataList > にもコードスニペットを追加します。

OnItemCommand="データリスト_アイテムコマンド"

プログラムセグメントDataList_ItemCommandとの関係を宣言します。

「F12」を押してプレビューすると、ページに期待される効果が表示されます。

[図 2-3 最終プレビュー版]
メインプログラムセグメントのソースコードを添付します。

Sub DataList_ItemCommand (オブジェクトとして送信者、DataListCommandEventArgs として送信)

e.CommandSource.CommandName="Detail" の場合

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" then

DataList1.SelectedIndex=-1

終了の場合

DataList1.DataBind()

エンドサブ

< フォーム runat="サーバー" >

< asp:DataList id="DataList1"

runat="サーバー"

繰り返し列 = "1"

繰り返し方向 = "垂直"

RepeatLayout="フロー"

DataSource="< %# DataSet1.DefaultView % >"

OnItemCommand="データリスト_アイテムコマンド" >

<ヘッダーテンプレート>

ロケーション名 < /HeaderTemplate >

<アイテムテンプレート>

< %# DataSet1.FieldValue("LOCATION_NAME", コンテナ) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >

< /ItemTemplate >

< AlternatingItemTemplate >

< %# DataSet1.FieldValue("LOCATION_NAME", コンテナ) % >



< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

<SelectedItemTemplate>アドレス:

< %# DataSet1.FieldValue("ADDRESS", コンテナ) % >

 

市：

< %# DataSet1.FieldValue("CITY", コンテナ) % >

 

電話：

< %# DataSet1.FieldValue("TELEPHONE", コンテナ) % >

 

< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >

< /SelectedItemTemplate >

< /asp:DataList >

< /form>

DataList には、主にデータの更新に使用される編集項目のテンプレートもあります。この本については後ほど紹介します。