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

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

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

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

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

Repeaterコントロールの基本

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

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

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

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

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

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

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

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

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

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

国籍コンボボックスの中身はあらかめ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変数の中身
NAMECOUNTRYINJURECAPTAIN
選手名1jp01
選手名2us10
選手名3jp00

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

repeater1.DataSource = dt
repeater1.DataBind()

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

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

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

バインドしたあとにRepeaterコントロールにアクセスして、コントロールに値をセットしてもいいのですが、今回はRepeaterにはバインドしたら1行ごとに発生する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 aspphpのように埋め込みで出力することもできます。

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

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

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

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

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

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

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

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


関連記事