asp.netのrepeaterで表示・編集・登録処理を行うその１

ASP.NETのWEBサーバコントロールのRepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。

具体的には、DBに登録されているデータをRepeaterコントロールを使い、エクセルのような表形式で表示し、ユーザがデータを編集して、更新するという流れです。

下記のようにテキストボックス、ラジオボタン、チェックボックス、コンボボックスでそれぞれのパターンで編集できるようにします。

Repeaterコントロールの基本

まず初めに、Repeaterの基本的な使い方について説明します。

RepeaterはGridViewと同じように、データテーブルをバインドして、データテーブルの件数分、htmlを生成してくれるコントロールです。

データテーブルだけでなく、配列などもバインドすることができますが、今回は表形式で出力するため、データテーブルをバインドします。

Repeaterコントロールの中にhtmlサーバコントロールを定義

まずはユーザがデータを編集できるようにテキストボックスを定義します。

webサーバコントロールでも問題ありませんが、レスポンスをわかりやすくするためにhtmlサーバコントロールを使用します。

htmlサーバコントロールとwebサーバコントロールの違いについてはasp.netのhtmlサーバコントロールの基本とasp.netのwebサーバコントロールの基本をご覧ください。

サーバ処理でコントロールにアクセスするためにrunat="server"をつけるのを忘れないようにします。

HeaderTemplateはバインドした際に１度だけ実行されます。
ItemTemplateはバインドしたデータの件数分実行されます。
FooterTemplateは最後に１度だけ実行されます。

今回はデータ件数分の行(tableのtr要素)を出力するため、trをItemTemplateの中に定義します。

_{国籍コンボボックスの中身はあらかめhtmlに定義しておいてもいいのですが、コンボボックスの中身もDBから読み込んで動的に設定することが多いので、この時点ではセットしません。}

<table>
  <thead>
    <tr>
      <td>選手名</td>
      <td>国籍</td>
      <td>怪我</td>
      <td>キャプテン</td>
    </tr>
  </thead>
  <tbody>
    <asp:Repeater ID="repeater1" runat="server">
      <ItemTemplate>
        <tr>
          <td><input type="text" id="txtName" runat="server" /></td>
          <td><select id="selCountry" runat="server"></select></td>
          <td><input type="checkbox" id="chkInjure" runat="server" /></td>
          <td><input type="radio" id="rdoCap" runat="server" /></td>
        </tr>
      </ItemTemplate>
    </asp:Repeater>
  </tbody>
</table>

サーバ処理でレスポンスするhtmlを作成

まずはRepeaterにバインドするデータテーブルをDBなどから取得します。今回はバインドするデータテーブルの中身は下記のようにします。

DateTable変数の中身
NAME	COUNTRY	INJURE	CAPTAIN
選手名１	jp	0	1
選手名2	us	1	0
選手名3	jp	0	0

このデータをRepeaterコントロールにバインドします。

repeater1.DataSource = dt
repeater1.DataBind()

しかし、バインドしただけではテキストボックスに値をセットしたり、チェックボックスにチェックをしたりすることはできません。

また、Repeaterの中に定義したコントロールはrunat="server"がついていても、そのままアクセスできません。例えばtxtName.value="test"としても、ビルドエラーになってしまいます（どの行のtxtNameかわからないので）。

取得するには対象の１行に対してFindControlを使用して取得します。

バインドしたあとにRepeaterコントロールにアクセスして、コントロールに値をセットしてもいいのですが、今回はRepeaterにはバインドしたら１行ごとに発生するItemDataBoundというイベントが用意されていますので、そのイベントの中でテキストボックスなどのコントロールに値をセットします。

Sub repeater1_ItemDataBound(Byval Sender As Object, _
                            Byval e As RepeaterItemEventArgs) Handles repeater1.ItemDataBound
    'HeaderTemplateとFooterTemplateのときは処理を飛ばします
    If e.Item.ItemType = ListItemType.Item Or _
        e.Item.ItemType = ListItemType.AlternatingItem Then
        '現在のバインドしている行を取得します DataTableをバインドした場合はDataRowViewになります
        Dim row As DataRowView = CType(e.Item.DataItem, DataRowView)
        'テキストボックスのコントロールを取得 e.Itemで現在の行のhtml(aspx)を取得できます
        Dim textControl As HtmlInputTextBox = CType(e.Item.FindControl("txtName"), HtmlInputTextBox)
        'コントロールにバインドしたデータの値をセットします
        textControl.value = row("NAME").ToString

        'コンボボックスのコントロールを取得
        Dim selectControl As HtmlSelect = CType(e.Item.FindControl("selCountry"), HtmlSelect)
        'コンボボックスの値をセットします
        selectControl.Add(new ListItem("日本", "jp"));
        selectControl.Add(new ListItem("アメリカ", "us"));
        'コントロールにバインドしたデータの値をセットします
        selectControl.value = row("COUNTRY").ToString

        'チェックボックスのコントロールを取得
        Dim checkboxControl As HtmlInputCheckBox = CType(e.Item.FindControl("chkInjure"), HtmlInputCheckBox)
        'コントロールにバインドしたデータの値をセットします
        If row("INJURE").ToString = "1" Then
          checkboxControl.checked = True
        Else
          checkboxControl.checked = False
        End If

        'ラジオボタンのコントロールを取得
        Dim radioControl As HtmlInputRadioButton = CType(e.Item.FindControl("rdoCap"), HtmlInputRadioButton)
        'コントロールにバインドしたデータの値をセットします
        If row("CAPTAIN").ToString = "1" Then
          radioControl.checked = True
        Else
          radioControl.checked = False
        End If
    End If
End Sub

埋め込みで値を出力する方法

バインドした変数などをclassic aspやphpのように埋め込みで出力することもできます。

ASP.NETでも普通の変数なら<%= 変数名 %>で埋め込みで出力することができますが、RepeaterやGridViewのようにバインドしたテーブルの値を出力したい場合は下記のような方法になります。

<%# DataBinder.Eval(Container.DataItem, "NAME") %>

なので、例えばtxtNameの値を埋め込みで出力する場合は下記のようになります。

<input type="text" id="txtName" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "NAME") %>' />

これでクライアント側にデータを表示することが出来ました。しかし、RepeaterやGridViewなどで動的に作成したhtmlのコントロールはIDやNAME属性が連番に置き換わってしまいます。

例えば１行目のtxtNameだと、repeater1_ctr0_txtNameなどになってしまいます。

置き換わる文字列は一見規則性があるように見えますが、環境によってパターンが変わったりします。

これがクライアント側での処理を少し複雑にしてしまいます。

選手一覧
選手名	国籍	怪我	キャプテン

asp.netのrepeaterで表示・編集・登録処理を行う その１

Repeaterコントロールの基本

Repeaterコントロールの中にhtmlサーバコントロールを定義

サーバ処理でレスポンスするhtmlを作成

埋め込みで値を出力する方法

asp.netのrepeaterで表示・編集・登録処理を行うその１