DataListをフォーマットする

ASP.NET + Oracle Part2 のホームへ戻る

DataListをフォーマットする

VS.NETの自動フォーマット機能を利用してDataListをフォーマットします。

●DataListにSuppliers表をフォーマットして表示する (ch42DataList1.aspx)

OracleデータベースのSuppliers表をDataListにフォーマットして表示します。このサンプルでは、以下のノウハウを習得することができます。

▼DataListにDataReaderをバインドする方法

▼テンプレートの編集からItemTemplate、AlternatingItemTemplateにLabelを作成する方法

▼自動フォーマットからDataListをフォーマットする方法

▼プロパティビルダの書式からヘッダーをフォーマットする方法

▼CSS(Cascading Style Sheets)の使い方

1. Webフォーム追加

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

2. DataList作成

ツールボックスの[Webフォーム]から、DataListをドラッグ＆ドロップします。デザイナにDataList1のオブジェクトが作成されます。

3. テンプレートの編集

DataList1の右クリックから[テンプレートの編集]→[ヘッダーおよびフッターテンプレート]を選択します。「DataList1 – ヘッダーおよびフッターテンプレート」が表示されたら、HeaderTemplateに「仕入先」を入力します。

fig4-2-1

図 HeaderTemplateに見出し入力

「DataList1 – ヘッダーおよびフッターテンプレート」の右クリックから[テンプレートの編集]→[項目テンプレート]を選択します。「DataList1 – 項目テンプレート」が表示されたら、ツールボックスの[Webフォーム]からLabelをドラッグしてItemTemplateにドロップします。ItemTemplateにLabel1のオブジェクトが作成されます。Label1のプロパティウィンドウから(DataBindings)プロパティを選択して右側の(iconEllipsis.gif)をクリックします。「Label1データ連結」が表示されたら、「Textの連結」から「カスタム連結式」を選択して、次の連結式を入力します。

DataBinder.Eval(Container.DataItem,"CompanyName")

同様の手順で、ツールボックスからLabelをドラッグしたらAlternatingItemTemplateにドロップして、Label2のTextプロパティに、次の連結式を入力します。

DataBinder.Eval(Container.DataItem,"CompanyName")

「DataList1 – 項目テンプレート」の右クリックから[テンプレート編集の終了]を選択します。

fig4-2-2

図　ItemTemplate/AlternatingItemTemplateにLabel作成

4. 自動フォーマット

DataList1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル１]を選択して[OK]をクリックして閉じます。

fig4-2-3

図自動フォーマットから[プロフェッショナル1]を選択

5. プロパティビルダ

DataList1の右クリックから[プロパティビルダ]を選択します。「DataList1プロパティ」が表示されたら、左側から[書式]を選択します。右側のオブジェクトから[ヘッダー]を選択したら、「水平方向の配置」から[中央]を選択します。[OK]をクリックしてウィンドウを閉じます。

fig4-2-4

図ヘッダーを中央揃えに設定

6.　コードビューに切り替え

メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下のImportsステートメントを追加します。

Imports Oracle.DataAccess.Client

Imports Oracle.DataAccess.Types

Page_Loadイベントに、以下のコードを追加します。

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

Handles MyBase.Load

Repeater1.DataSource = CreateDataReader("SupplierPackage.GetSuppliers")

Repeater1.DataBind()

End Sub

クラスモジュールの最後に、Function CreateDataReaderを追加します。

Private Function CreateDataReader(ByVal strPackage As String) As OracleDataReader

Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

Dim cmd As New OracleCommand(strPackage, con)

cmd.CommandType = CommandType.StoredProcedure

con.Open()

cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

Return cmd.ExecuteReader(CommandBehavior.CloseConnection)

End Function

7. ブラウザに表示

ソリューションエクスプローラから[ch42DataList1]を右クリックしてブラウザに表示します。DataListにSuppliers表の仕入先がフォーマットされて表示されます。

fig4-2-5

図 DataListにSuppliers表がフォーマットされて表示される

■解説

DataListをフォーマットするには、「自動フォーマット」と「プロパティビルダ」を利用します。「自動フォーマット」は、DataList全体をフォーマットするときに利用します。自動フォーマットには、カラフル、プロフェッショナル、シンプルなどのスキームが用意されています。自動フォーマットからスキームを選択すると、DataListのHeaderStyle、ItemStyle、AlternatingItemStyle、SelectedItemStyle、FooterStyleが生成されます。

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

BorderColor="#999999" BorderStyle="None" BackColor="White"

CellPadding="3" GridLines="Vertical"

BorderWidth="1px" Width="222px">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center"

ForeColor="White" BackColor="#000084">

</HeaderStyle>

</ItemStyle>

</AlternatingItemStyle>

<SelectedItemStyle Font-Bold="True" ForeColor="White"

BackColor="#008A8C">

</SelectedItemStyle>

</FooterStyle>

　・・・

</asp:DataList>

「プロパティビルダ」から[書式]を選択すると、「オブジェクト」に「ヘッダー」、「フッター」、「項目」、「区切り文字」が表示されます。「項目」を展開すると、「標準項目」、「項目の変更」、「選択されたアイテム」、「編集モード項目」が表示されます。

「オブジェクト」から項目を選択すると右側に「表示」と「配置」のプロパティが表示されます。「表示」からは、「前景色、「背景色、「フォント名」、「フォントサイズ」、「太字」、「斜体」、「下線」、「取り消し線」、「重線」などのプロパティが設定できます。「配置」からは、「水平方向の配置」、「垂直方向の配置」、「セル内の文字列を折り返す」プロパティが設定できます。

fig4-2-6

図オブジェクトに表示と配置のプロパティ設定

DataListの書式は、この他にCSS(Cascading Style Sheets)を使用して設定することができます。この場合、DataListのCssClassプロパティにCSSのIDを設定します。

<asp:DataList CssClass=”dlstShadow”　・・・>

・・・

</asp:DataList>

CSSを使用すると、CSSの定義を外部ファイルに作成してすべてのWebページの書式を一元管理することも可能です。

.dlstShadow {

filter:progid:DXImageTransform.Microsoft.dropshadow(

OffX=3, OffY=3, Color='gray', Positive='true')

}

.dlstHeaderStyle {

background-color: SteelBlue;

color: white;

text-align: center;

font-size: x-small;

font-weight: normal;

}

.dlstItemStyle {

background-color: darkgray;

color: DarkSlateGray;