omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


repeaterで表示・編集・登録処理 その1

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

具体的には、DBに登録されているデータをrepeaterコントロールを使い、エクセルのような表形式で表示し、ユーザがデータを編集して、更新するという流れです。下記のようにテキストボックス、ラジオボタン、チェックボックス、コンボボックスでそれぞれのパターンで編集できるようにします。

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

repeaterコントロールの基本

まず初めに、repeaterの基本的な使い方について説明します。repeaterはgridviewと同じように、データテーブルをバインドして、データテーブルの件数分、htmlを生成してくれるコントロールです。データテーブルだけでなく、配列などもバインドすることができますが、今回は表形式で出力するため、データテーブルをバインドします。

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

まずはユーザがデータを編集できるようにテキストボックスを定義します。webサーバコントロールでも問題ありませんが、レスポンスをわかりやすくするためにhtmlサーバコントロールを使用します。htmlサーバコントロールとwebサーバコントロールの違いについては htmlサーバコントロールの基本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 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属性が連番に置き換わってしまいます。例えば1行目のtxtNameだと、「repeater1_ctr0_txtName」などになってしまいます。置き換わる文字列は一見規則性があるように見えますが、環境によってパターンが変わったりします。これがクライアント側での処理を少し複雑にしてしまいます。次ページの repeaterで表示・編集・登録処理 その2 で詳しく紹介します。






  • asp.netの基本・aspとの違い

    classic aspとasp.net(aspx)の違いやaspx.netの基本的な考え方ついて説明します。ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見て...


  • htmlサーバコントロールの基本

    asp.netのhtmlサーバコントロールの基本の基本的な考え方ついて説明します。htmlサーバコントロールを使えば、サーバ処理でhtmlの要素(コントロール)にアクセスできるようになります。フォーム...


  • webサーバコントロールの基本

    asp.netにはwebサーバコントロールというコントロールが用意されています。webサーバコントロールはhtmlのスタイルや属性を直接編集するわけではなく、サーバ処理ではフォームアプリのように、コン...


  • ポストバックの基本

    asp.netでは保持したいコントロールにrunat="server"属性を指定してsubmitすると、自動的に内部処理でコントロールの値を復元してくれます。基本的にasp.net...


  • イベントの基本と注意事項

    asp.netではsubmitコントロールにrunat="server"属性を指定してsubmitするようにすれば、サーバ処理ではフォームアプリと同じようにイベントのファンクション...


  • repeaterで表示・編集・登録処理 その1

    asp.netのWEBサーバコントロールのrepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。具体的には、DBに登録されているデータをrepeaterコントロ...


  • repeaterで表示・編集・登録処理 その2

    aspxファイルに定義したrepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません。なので、ID=txtNameのテキストボックス...


  • repeaterで出力時にjavascriptのイベントを定義する

    apsxファイルに詳細ボタンと、詳細画面を起動するjavascriptのファンクションを定義します。onclick属性(イベント)をaspxに定義してしまうと、引数で必要な行事の情報がわからないので、...


  • repeaterで出力したコントロールにjavascriptでアクセスする

    asp.netのrepeaterで動的に出力したコントロールにjavascriptでアクセスする方法を紹介します。javascriptで要素にアクセスする場合はgetElementById(取得したい...


  • javascriptでtableタグの中のコントロールにアクセスする

    例えばrepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById('コントロールID')のようにID...