DataListをフォーマットする

 

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

 

DataListSuppliers表をフォーマットして表示する (ch42DataList1.aspx)

 

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

 

DataListDataReaderをバインドする方法

▼テンプレートの編集からItemTemplateAlternatingItemTemplateLabelを作成する方法

▼自動フォーマットから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にドロップします。ItemTemplateLabel1のオブジェクトが作成されます。Label1のプロパティウィンドウから(DataBindings)プロパティを選択して右側のiconEllipsis(iconEllipsis.gif)をクリックします。「Label1データ連結」が表示されたら、「Textの連結」から「カスタム連結式」を選択して、次の連結式を入力します。

 

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

 

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

 

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

 

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

 

fig4-2-2

図 ItemTemplate/AlternatingItemTemplateLabel作成

 

4. 自動フォーマット

 

DataList1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル1]を選択して[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)

cccHandles 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]を右クリックしてブラウザに表示します。DataListSuppliers表の仕入先がフォーマットされて表示されます。

 

fig4-2-5

DataListSuppliers表がフォーマットされて表示される

 

 

■解説

 

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

 

<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 ForeColor="Black" BackColor="#EEEEEE">

  </ItemStyle>

  <AlternatingItemStyle BackColor="Gainsboro">

  </AlternatingItemStyle>

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

    BackColor="#008A8C">

  </SelectedItemStyle>

  <FooterStyle ForeColor="Black" BackColor="#CCCCCC">

  </FooterStyle>

 ・・・

</asp:DataList>

 

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

 

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

 

fig4-2-6

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

 

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

 

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

  <HeaderStyle CssClass=”dlstHeaderStyle” />

  <ItemStyle CssClass=”dlstItemStyle” />

  ・・・

</asp:DataList>

 

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

 

.dlstShadow {

filter:progid:DXImageTransform.Microsoft.dropshadow(

cccOffX=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;

font-size: x-small;

}

 

 

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

cccHandles MyBase.Load

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

  Repeater1.DataBind()

End Sub

 

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