●  DataList2のテンプレート列作成 (ch66Template2.aspx)

 

DataList2に挿入するHeaderTemplate、FooterTemplate、ItemTemplateのHTMLソースを作成します。

 

このサンプルでは、以下のノウハウを習得することができます。

 

▼デザイナに表（Table）を作成する方法

▼表の列を結合する方法

▼表にLabelコントロールを作成する方法

▼LabelコントロールのTextプロパティにデータ連結式を記述する方法

▼表にDataGridコントロールを作成する方法

 

1. Webフォーム追加

 

ソリューションエクスプローラからフォルダ[ch6]を右クリックして、新規Webフォーム「ch66Template2」を追加します。

 

2. Table作成

 

メニューバーから[テーブル]→[挿入]→[テーブル]を選択します。「表の挿入」ダイアログが表示されたら、「行」から[3]、「列」から[4]を選択して、3x4の表を作成します。[OK]をクリックしてダイアログを閉じます。デザイナに3x4の表が作成されます。表3行目の2番目、3番目、4番目のセルを選択したら、右クリックから[セルの結合]を選択します。

 

fig6-6-11

図 デザイナに3x4の表作成

 

3. 表のヘッダー作成

 

表の1行目の2番目のセルから順番に「受注ID」、「受注日」、「出荷日」を入力します。デザイナの最下位から[HTML]タブをクリックして、HTMLビューに切り替えます。表のヘッダー用の<TD>タグを<TH>タグに書き換えます。

 

<TR>

  <TH></TH>

  <TH>受注ID</TH>

  <TH>受注日</TH>

  <TH>出荷日</TH>

</TR>

 

4. ImageButton作成

 

ツールボックスの[Webフォーム]からImageButtonをドラッグしたら、表2行目の1番目のセルにドロップします。表にImageButton1のオブジェクトが作成されます。プロパティウィンドウから[ImageButton1]を選択したら、「(ID)」プロパティを「ImageButton2」に書き換えます。「CommandName」プロパティに「Select」を入力します。「ImageUrl」プロパティに「img/bookclose.gif」を入力します。

 

5. Label作成

 

ツールボックスの[Webフォーム]からLabelをドラッグしたら、表2行目の2番目のセルにドロップします。表にLabel1のオブジェクトが作成されます。プロパティウィンドウから[Label1]を選択したら、「(ID)」プロパティを「lblOrderID」に書き換えます。「(DataBindings)」プロパティのiconRightArrowをクリックします。「lblOrderIDデータ連結」が表示されたら、「Textの連結」から[カスタム連結式]を選択して、テキストボックスに以下の連結式を入力します。

 

Container.DataItem("OrderID")

 

[OK]をクリックして「データ連結」を閉じます。

 

fig6-6-12

図 lblOrderIDのTextプロパティにカスタム連結式入力

 

同様の手順で、表2行目の3番目と4番目のセルに受注日、出荷日のLabelを作成してプロパティを設定します。

 

LabelのID

Textプロパティのデータ連結式

lblOrderID

Container.DataItem(“OrderID”)

lblOrderDate

DataBinder.Eval(Container.DataItem, “OrderDate”, “{0:d}”)

lblShippedDate

DataBinder.Eval(Container.DataItem, “ShippedDate2, “{0:d}”)

 

fig6-6-13

図 LabelのTextプロパティにデータ連結式入力

 

6. DataGrid作成

 

ツールボックスの[Webフォーム]からDataGridをドラッグして、表3行目の2番目のセルにドロップします。表にDataGrid1のオブジェクトが作成されます。DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[クラシック1]を選択します。[OK]をクリックしてダイアログを閉じます。

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側の[列]を選択します。[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択したら、iconRightArrowをクリックします。「選択された列」に連結列が表示されます。連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「受注商品」、「データフィールド」に「ProductName」を入力します。同様の手順で、「数量」の連結列を作成します。

 

表 連結列(BoundColumn)のプロパティ

ヘッダーテキスト

データフィールド

データフォーマット式

受注商品

ProductName

 

数量

Quantity

{0:n0}

 

fig6-6-14

図 プロパティビルダの[列]から連結列作成

 

「プロパティビルダ」の左側から[書式]を選択したら、「オブジェクト」から[ヘッダー]を選択して「水平方向の配置」から[中央]を選択します。「オブジェクト」から[列]をクリックして展開したら、[Columns[1] – 数量]をクリックして展開します。「数量」の[ヘッダー]をクリックして「水平方向の配置」から[右]を選択します。[項目]を選択したら、「水平方向の配置」から[右]を選択します。

 

fig6-6-15

図プロパティビルダの[書式]から「水平方向の配置」設定

 

最後に、[OK]をクリック「プロパティビルダ」を閉じます。

 

プロパティウィンドウから[DataGrid1]を選択したら、「Visible」プロパティから[False]を選択します。

 

7. Tableのプロパティ書き換え

 

プロパティウィンドウから[Table1]を選択したら、「(ID)」プロパティを「Table2」に書き換えます。「Border」プロパティに「0」を設定します。「cellpadding」、「cellspacing」、「width」プロパティの値を消去して空白にします。

 

fig6-6-16

図 Tableのプロパティ設定