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

Repeaterをフォーマットする

 

HTML<table>タグとCSS(Cascading Style Sheets)を使用してRepeaterをフォーマットします。

 

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

 

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

 

Repeaterをフォーマットする方法

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

▼表(TABLEタグ)のプロパティを設定する方法

 

 

1. Webフォーム追加

 

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

 

2. Repeater作成

 

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

 

 

デザイナの最下位に表示されている[HTML]タブをクリックしてHTMLビューに切り替えます。<asp:Repeater>...</asp:Repeater>タグの間に、以下のHeaderTemplateItemTemplateAlternatingItemTemplateFooterTemplateを追加します。

 

<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がフォーマットされて表示されます。

 

fig3-2-1

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)

cccHandles 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]を右クリックしてブラウザに表示します。RepeaterEmployees表の社員ID、社員名、支社、部署がフォーマットされて表示されます。

 

fig3-2-2

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

 

 

■解説

 

Repeaterをフォーマットするには、以下にようなテンプレートを使用します。

 

  HeaderTemplate

  ItemTemplate

  AlternatingItemTemplate

  SeparatorTemplate

  FooterTemplate

 

HeaderTemplateFooterTemplateは、Repeaterのヘッダーとフッターを定義します。ItemTemplateAlternatingItemTemplateは、Repeaterのデータ部を定義するときに使用します。ItemTemplateは奇数行、AlternatingItemTemplateは偶数行を定義します。SeparatorTemplateは、データの境界を定義します。

 

データをフォーマットするには、HTML<table>...</table>タグを利用すると便利です。デザイナからHTML<table>を作成するには、メニューバーから[テーブル][挿入][テーブル]を選択します。「表の挿入」が表示されたら、「行」に「3」、「列」に「4」を入力して[OK]をクリックして閉じます。

 

fig3-2-3

「表の挿入」から行と列を入力

 

デザイナに3x4の表が作成されます。表の1行目を見出し、2行目を奇数行、3行目を偶数行としてフォーマットします。1行目の見出しのセルに左から順番に「ID」、「社員名」、「支社」、「部署」を入力します。1行目の左端にマウスを移動するとマウスの形状が右矢印(→)に変化しますので、クリックして1行目を選択します。

fig3-2-4

1行目の見出しを選択する

 

右側のプロパティウィンドウからalignプロパティにcenterを設定します。これで、表見出しがセンタリングされます。続いて、bgcolorプロパティの右側からiconEllipsisをクリックします。「カラーピッカー」が表示されたら、見出しの背景色として使用するカラーを選択します。[OK]をクリックして「カラーピッカー」を閉じます。表の見出しに、選択した背景色が表示されます。同様の手順で、データの奇数行と偶数行の背景色を選択します。

 

 

fig3-2-5

図「カラーピッカー」からお好みの背景色を選択する

 

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)

cccHandles 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

 

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