DataList1のテンプレート列作成 (ch66Template1.aspx)

 

DataList1ItemTemplateに挿入するHTMLソースを作成します。

 

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

 

▼デザイナに表(Table)を作成する方法

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

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

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

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

 

1. Webフォーム追加

 

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

 

2. Table作成

 

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

 

 

fig6-6-6

「表の挿入」から2x2の表を作成

 

3. ImageButton作成

 

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

 

 

fig6-6-7

 1行目の左のセルにImageButton作成

 

4. Label作成

 

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

 

Container.DataItem("CompanyName")

 

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

 

fig6-6-8

lblCompanyNameTextプロパティにカスタム連結式入力

 

5. DataList作成

 

ツールボックスの[Webフォーム]からDataListをドラッグしたら、表2行目の右のセルにドロップします。表にDataList1のオブジェクトが作成されます。プロパティウィンドウから[DataList1]を選択したら、「(ID)」プロパティを「DataList2」に書き換えます。「Visible」プロパティから[False]を選択します。

 

fig6-6-9

図 2行目の右のセルにDataList作成

 

デザイナの最下位に表示されている、[HTML]タブをクリックしてHTMLビューに切り替えます。<asp:DataList1>に、SelectedIndexChangedイベントを追加します。

 

<asp:DataList id="DataList2" runat="server"

  OnSelectedIndexChanged="DataList2_SelectedIndexChanged"

  Visible="False">

</asp:DataList>

 

<asp:DataList>...</asp:DataList>の間に、HeaderTemplateFooterTemplateItemTemplateを入力します。

 

<asp:DataList id="DataList2" runat="server"

  OnSelectedIndexChanged="DataList2_SelectedIndexChanged"

  Visible="False">

  <HeaderTemplate></HeaderTemplate>

  <FooterTemplate></FooterTemplate>

  <ItemTemplate></ItemTemplate>

</asp:DataList>

 

6. Tableのプロパティ変更

 

プロパティウィンドウから[Table1]を選択したら、「border」プロパティに「0」を設定します。「cellpadding」、「cellspacing」、「width」パラメータの値を消去して空白にします。

 

fig6-6-10

Tableのプロパティ設定