omachizura

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


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

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

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

クライアントIDの考え方

repeaterで表示・編集・登録処理 その1 の最後で少し触れましたが、aspxファイルに定義したrepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません。なので、ID=txtNameのテキストボックスを定義しても、レスポンスされるテキストボックスのIDは「repeater1_ctr0_txtName」などになってしまいます。なので、javascriptでgetElementById("txtName")とやっても取得できないので注意が必要です。

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

NAME属性が変わってしまうことにより、ラジオボタンの制御に問題が出てしまいます。ラジオボタンはNAME属性が同じものはその中で1つのみ選択することができるのですが、repeaterで出力するとNAME属性が一意にならずに複数選択することができてしまいます。具体的には下記のようになってしまいます

性別(両方選択できてしまいます)男:   女:

対策として、クライアント側のロードイベントでラジオボタンのNAME属性を変更します。

//jQuery
$(document).ready(function () {
  $("#repeater1 input:radio").attr("name", "cap");
});

jQueryを使わない場合は、少し複雑になります。 repeaterで出力したコントロールに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

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

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






  • 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...