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

asp.netのrepeaterで表示・編集・登録処理を行う その1Repeaterを使って、下記のようなhtmlを動的に出力することが出来ました。今回はクライアント側での入力制御とサーバ側での登録処理を説明します。

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

クライアントIDの考え方

asp.netのrepeaterで表示・編集・登録処理を行う その1の最後で少し触れましたが、aspxファイルに定義したRepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません

なので、ID=txtNameのテキストボックスを定義しても、レスポンスされるテキストボックスのIDはrepeater1_ctr0_txtNameなどになってしまいます。

なので、javascriptgetElementById("txtName")とやっても取得できないので注意が必要です。

ラジオボタンを1つのみ選択可能にする

NAME属性が変わってしまうことにより、ラジオボタンの制御に問題が出てしまいます。

ラジオボタンはNAME属性が同じものはその中で1つのみ選択することができるのですが、Repeaterで出力するとNAME属性が一意にならずに複数選択することができてしまいます。

具体的には下記のようになってしまいます

性別(両方選択できてしまいます)男:   女:
対策として、クライアント側のロードイベントでラジオボタンのNAME属性を変更します。 ```javascript //jQuery $(document).ready(function () { $("#repeater1 input:radio").attr("name", "cap"); }); ``` `jQuery`を使わない場合は、少し複雑になります。[[aspnet-repeater-access-javascript]]で`Repeater`で動的に出力したコントロールにアクセスする方法を紹介しています。

サーバ処理でRepeater内のコントロールを取得

クライアント側でユーザが値を変更して、submitし、その値をサーバ処理で取得します。

ItemDataBoundで値をセットした時と同じように、1行に対してFindControlを使用して取得します。

For Each Item As RepeaterItem In repeater1.Items
  'テキストボックスのコントロールを取得 Itemは現在の行のhtml(aspx)です
  Dim textControl As HtmlInputTextBox = CType(Item.FindControl("txtName"), HtmlInputTextBox)
  'コントロールにバインドしたデータの値を更新項目にセットします
  parameter_test = textControl.value
  '更新処理...
Next

これで基本的な、表示→編集→登録の一連の流れが実装できました。

次回は、行ごとにイベントを定義して、編集での機能をいろいろと追加します。


関連記事