● DataList1のテンプレート列作成 (ch66Template1.aspx)
DataList1のItemTemplateに挿入するHTMLソースを作成します。
このサンプルでは、以下のノウハウを習得することができます。
▼デザイナに表（Table）を作成する方法
▼表にImageButtonコントロールを作成する方法
▼表にLabelコントロールを作成する方法
▼表にDataListコントロールを作成する方法
▼LabelコントロールのTextプロパティにデータ連結式を記述する方法
1. Webフォーム追加
ソリューションエクスプローラからフォルダ[ch6]を右クリックして、新規Webフォーム「ch66Template1」を追加します。
2. Table作成
メニューバーから[テーブル]→[挿入]→[テーブル]を選択します。「表の挿入」ダイアログが表示されたら、「行」から[2]、「列」から[2]を選択して、2x2の表を作成します。[OK]をクリックしてダイアログを閉じます。デザイナに2x2の表が作成されます。
図 「表の挿入」から2x2の表を作成
3. ImageButton作成
ツールボックスの[Webフォーム]からImageButtonをドラッグしたら表１行目の左側のセルにドロップします。表にImageButton1のオブジェクトが作成されます。プロパティウィンドウから[ImageButton1]を選択したら、「CommandName」プロパティに「Select」を入力します。さらに、「ImageUrl」プロパティに「img/bookclose2.gif」を入力します。
図 1行目の左のセルにImageButton作成
4.
ツールボックスの[Webフォーム]からLabelをドラッグしたら表１行目の右のセルにドロップします。表にLabel1のオブジェクトが作成されます。プロパティウィンドウから[Label1]を選択したら、「(ID)」プロパティを「lblCompanyName」に書き換えます。「(DataBindings)」プロパティを選択して
をクリックします。「lblCompanyNameデータ連結」が表示されたら、右側の「Textの連結」から[カスタム連結式]を選択して、テキストボックスに以下の連結式を入力します。
Container.DataItem("CompanyName")
[OK]をクリックして「データ連結」を閉じます。
図 lblCompanyNameのTextプロパティにカスタム連結式入力
5. DataList作成
ツールボックスの[Webフォーム]からDataListをドラッグしたら、表２行目の右のセルにドロップします。表にDataList1のオブジェクトが作成されます。プロパティウィンドウから[DataList1]を選択したら、「(ID)」プロパティを「DataList2」に書き換えます。「Visible」プロパティから[False]を選択します。
図 2行目の右のセルにDataList作成
デザイナの最下位に表示されている、[HTML]タブをクリックしてHTMLビューに切り替えます。<asp:DataList1>に、SelectedIndexChangedイベントを追加します。
<asp:DataList id="DataList2" runat="server"
OnSelectedIndexChanged="DataList2_SelectedIndexChanged"
Visible="False">
</asp:DataList>
<asp:DataList>...</asp:DataList>の間に、HeaderTemplate、FooterTemplate、ItemTemplateを入力します。
<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」パラメータの値を消去して空白にします。
図 Tableのプロパティ設定