Repeaterをフォーマットする
HTMLの<table>タグとCSS(Cascading Style Sheets)を使用してRepeaterをフォーマットします。
●RepeaterにEmployees表をフォーマットして表示する (ch32Repeater1.aspx)
OracleデータベースのEmployees表をRepeaterにフォーマットして表示します。このサンプルでは、以下のノウハウを習得することができます。
▼Repeaterをフォーマットする方法
▼デザイナに表(TABLEタグ）を作成する方法
▼表(TABLEタグ）のプロパティを設定する方法
1. Webフォーム追加
ソリューションエクスプローラからフォルダ[ch3]を右クリックして、新規Wevフォーム「ch32Repeater1」を追加します。
2. Repeater作成
ツールボックスの[Webフォーム]から、Repeaterをドラッグ＆ドロップします。デザイナにRepeater1のオブジェクトが作成されます。
デザイナの最下位に表示されている[HTML]タブをクリックしてHTMLビューに切り替えます。<asp:Repeater>...</asp:Repeater>タグの間に、以下のHeaderTemplate、ItemTemplate、AlternatingItemTemplate、FooterTemplateを追加します。
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table border="1" bordercolor="ForestGreen">
<tr style="COLOR: lightcyan; BACKGROUND-COLOR: mediumblue">
<th>ID</th>
<th>社員名</th>
<th>支社</th>
<th>部署</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="BACKGROUND-COLOR: powderblue">
<td><%# Container.DataItem("EmployeeID") %></td>
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("Branch") %></td>
<td><%# Container.DataItem("Title") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="BACKGROUND-COLOR: aliceblue">
<td><%# Container.DataItem("EmployeeID") %></td>
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("Branch") %></td>
<td><%# Container.DataItem("Title") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
HTMLビューの最下位から[デザイン]タブをクリックしてデザインビューに切り替えると、Repeaterがフォーマットされて表示されます。
図 Repeaterがフォーマットされて表示される
3. コードビューに切り替え
メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下の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("EmployeePackage.GetEmployees")
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
4. ブラウザに表示
ソリューションエクスプローラから[ch32Repeater1]を右クリックしてブラウザに表示します。RepeaterにEmployees表の社員ID、社員名、支社、部署がフォーマットされて表示されます。
図 RepeaterにEmployees表がフォーマットされて表示される
■解説
Repeaterをフォーマットするには、以下にようなテンプレートを使用します。
・ HeaderTemplate
・ ItemTemplate
・ AlternatingItemTemplate
・ SeparatorTemplate
・ FooterTemplate
HeaderTemplateとFooterTemplateは、Repeaterのヘッダーとフッターを定義します。ItemTemplateとAlternatingItemTemplateは、Repeaterのデータ部を定義するときに使用します。ItemTemplateは奇数行、AlternatingItemTemplateは偶数行を定義します。SeparatorTemplateは、データの境界を定義します。
データをフォーマットするには、HTMLの<table>...</table>タグを利用すると便利です。デザイナからHTMLの<table>を作成するには、メニューバーから[テーブル]→[挿入]→[テーブル]を選択します。「表の挿入」が表示されたら、「行」に「3」、「列」に「4」を入力して[OK]をクリックして閉じます。
図 「表の挿入」から行と列を入力
デザイナに3x4の表が作成されます。表の１行目を見出し、２行目を奇数行、３行目を偶数行としてフォーマットします。１行目の見出しのセルに左から順番に「ID」、「社員名」、「支社」、「部署」を入力します。１行目の左端にマウスを移動するとマウスの形状が右矢印（→）に変化しますので、クリックして１行目を選択します。
図 1行目の見出しを選択する
右側のプロパティウィンドウからalignプロパティにcenterを設定します。これで、表見出しがセンタリングされます。続いて、bgcolorプロパティの右側から
をクリックします。「カラーピッカー」が表示されたら、見出しの背景色として使用するカラーを選択します。[OK]をクリックして「カラーピッカー」を閉じます。表の見出しに、選択した背景色が表示されます。同様の手順で、データの奇数行と偶数行の背景色を選択します。
図「カラーピッカー」からお好みの背景色を選択する
HTMLビューに切りかえたら、<asp:Repeater>...</asp:Repeater>の間に<HeaderTemplate>、<ItemTemplate>、<AlternatingItemTemplate>、<FooterTemplate>を追加して、先程作成した表から見出しとデータ行をコピー＆ペーストします。
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
・・・<table>タグと見出し行<tr>...</tr>タグを挿入
</HeaderTemplate>
<ItemTemplate>
・・・データの奇数行の<tr>...</tr>タグを挿入
</ItemTemplate>
<AlternatingItemTemplate>
・・・データの偶数行の<tr>...</tr>タグを挿入
</AlternatingItemTemplate>
<FooterTemplate>
・・・</table>タグを挿入
</FooterTemplate>
</asp:Repeater>
<ItemTemplate>と<AlternatingItemTemplate>の<td>...</td>タグには、データ連結式を挿入してEmployees表の社員ID(EmployeeID)、社員名(Name)、支社(Branch)、部署(Title)の列をバインドします。
<ItemTemplate>
<tr style="BACKGROUND-COLOR: powderblue">
<td><%# Container.DataItem("EmployeeID") %></td>
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("Branch") %></td>
<td><%# Container.DataItem("Title") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="BACKGROUND-COLOR: aliceblue">
<td><%# Container.DataItem("EmployeeID") %></td>
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("Branch") %></td>
<td><%# Container.DataItem("Title") %></td>
</tr>
</AlternatingItemTemplate>
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
Repeater1.DataSource = CreateDataReader("EmployeePackage.GetEmployees")
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