複雑な一覧だからこそGUI画面でデザインしたい！ Webで1レコード複数行表示を実現するMultiRow for ASP.NETの実力

1レコード複数行表示を実現するMultiRow for ASP.NETの実力（前編）

　ASP.NETでDB上の1レコードを複数行として表示させるためには、通常、なかなか骨の折れる作業が必要になります。しかし、MultiRow for ASP.NETを利用することで容易に実現可能です。今回は、Repeaterコントロールを使った場合の実装方法と比較しながら、MultiRow for ASP.NETの魅力に迫ってみたいと思います。

1レコード複数行表示をWebで容易に実現するMultiRow for ASP.NET

　ASP.NETでDB上の1レコードを複数行として表示させるためには、GridViewコントロールでの実装は難しく、Repeaterコントロールを使ってHTMLの<table>タグを駆使して実装しなければなりません。

　<table>タグを駆使する方法は、ASP.NET以外の方法でWebアプリを作成するときも同じようなものですが、例えば交互に背景色を切り替えて表を見やすくするときには同じ行定義を<ItemTemplate>タグと<AlternatingItemTemplate>タグに定義しなければならないなど、使い勝手の悪さが気になります。ソート機能やページ制御についても工夫をしなければなりません。

　また、ASP.NETのWebフォーム用コントロールの使いやすさに慣れてしまうと、Repeaterコントロールは必ずしも使いやすいコントロールとは言えません。Windowsフォーム用にグレープシティから発売されている、MultiRowコントロールのASP.NET版でもあればと数年前から待ちわびていましたが、遂にMultiRow for ASP.NETが登場してくれました。

Repeaterコントロールを使った実装例

　MultiRow for ASP.NETでどれくらい楽ができるかを知るために、まずはRepeaterコントロールを使った場合、どれくらい苦労するかを再検証してみましょう。サンプルソースにこちらのRepeaterコントロールを使った場合の完成版も同梱してあるので、参考にしてみてください（サンプルソース内「CZ1007RepeterControlSample」）。

　作成する複数行表示は、図1のようになります。面倒なのでページ制御やソート機能は実装していません。

図1 Repeaterコントロールによる実現例

　このデザインを実現するためのHTMLは、リスト1のようになります。

リスト1 Repeaterコントロールの使用例（RepeaterControlSample.aspxファイル）

<form id="RepeaterControlSample_Form" runat="server">
<div>
    <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
    <table border='1'>
    <tr><th rowspan="2">日付</th><th colspan="5">製品名</th></tr>
    <tr><th>伝票No</th><th>区分</th><th>単価</th><th>数量</th><th>金額z</th></tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr style="background-color:White;">
    <td rowspan="2"><%# Format(DataBinder.Eval(Container.DataItem, "Date"), "yyyy/MM/dd")%> </td>
    <td colspan="5"><%# DataBinder.Eval(Container.DataItem, "Products").ToString%> </td>
    </tr>
    <tr style="background-color:White;">
    <td><%# DataBinder.Eval(Container.DataItem, "SlipNo")%> </td>
    <td><%# DataBinder.Eval(Container.DataItem, "Category")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "UnitPrice"), "#,##0")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "Number"), "#,##0")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "UnitPrice") *
                                             DataBinder.Eval(Container.DataItem, "Number"), "#,##0")%> </td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <tr style="background-color:#e0ffe0;">
    <td rowspan="2"><%# Format(DataBinder.Eval(Container.DataItem, "Date"), "yyyy/MM/dd")%> </td>
    <td colspan="5"><%# DataBinder.Eval(Container.DataItem, "Products").ToString%> </td>
    </tr>
    <tr style="background-color:#e0ffe0;">
    <td><%# DataBinder.Eval(Container.DataItem, "SlipNo")%> </td>
    <td><%# DataBinder.Eval(Container.DataItem, "Category")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "UnitPrice"), "#,##0")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "Number"), "#,##0")%> </td>
    <td style="text-align:right;"><%# Format(DataBinder.Eval(Container.DataItem, "UnitPrice") *
                                             DataBinder.Eval(Container.DataItem, "Number"), "#,##0")%> </td>
    </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>
</div>
</form>

　Repeaterコントロールのデータソースとして指定したDataSetに格納されたレコードを<td>タグで囲んで出力するために、DataBinder.Evalを使っています。デザイナの［デザイン］タブでは編集できないため、［コード］タブでHTMLを直書きして行います。

　Repeaterコントロールで交互に背景色を変えるときは、<ItemTemplate>タグと<AlternatingItemTemplate>タグの中に同じ行定義を記述し、<tr>タグのStyleに指定するBackground-Colorを別の背景色にすることで実現します。

　この実現方法の場合、データの配置などを変えるときは、次のような作業を行わなくてはなりません。

1. <HeaderTemplate>でヘッダ行の変更
2. <ItemTemplate>でデータ行の変更
3. （2）の変更を<AlternatingItemTemplate>に反映

　実際、開発現場でお客様からのレビューを受けてデザイン変更していると、つい（3）のステップを忘れてしまうときがあります。私自身、実装していて非常に面倒で嫌になってしまう手順でした。

Repeaterコントロールの実行

　Repeaterコントロールに値を表示するためには、リスト2のようにDataSetのテーブルをDataSourceプロパティに設定してから、DataBindメソッドを実行します。

リスト2 Repeaterコントロールの使用例（RepeaterControlSample.aspx.vbファイル）

Imports System.Data

Partial Class RepeaterControlSample
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object,
                            ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Call GetRecords()
        End If
    End Sub

    Private Function GetRecords() As Boolean
        Dim isOK As Boolean = False
        Using _proc As New CZ1007Bound
            Dim ds As DataSet = _proc.GetRecords("admin", "", "WS-DF502")
            Me.Repeater1.DataSource = ds.Tables("Bill")
            Me.Repeater1.DataBind()
            isOK = True
        End Using
        Return isOK
    End Function
End Class

　次にMultiRow for ASP.NETを使った際の、実現方法を見ていきましょう。