omachizura

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


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

前ページの repeaterで表示・編集・登録処理 その2 でrepeaterを使って、表示→編集→登録の一連の流れが実装できました。

今回は、表示→編集→登録のうち、編集について、もっと細かい制御を追加します。

イベントを定義する

詳細ボタンの列を追加し、クリック時にクリックした行の選手の詳細画面をポップアップで起動するという処理を追加します。

詳細画面はクエリストリングで選手のIDを受け取って表示する仕様とします。

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

まずはapsxファイルに詳細ボタンと、詳細画面を起動するjavascriptのファンクションを定義します。

<script>
  //詳細画面を起動します
  //id:選手のID
  function showDetail(id){
    //クエリストリングで選手のIDを渡します
    window.open('detail.html?id=' + id, null);
  }
</script>

<table>
  <thead>
    <tr>
      <td></td>
      <td>選手名</td>
      <td>国籍</td>
      <td>怪我</td>
      <td>キャプテン</td>
    </tr>
  </thead>
  <tbody>
    <asp:Repeater ID="repeater1" runat="server">
      <ItemTemplate>
        <tr>
          <td><input type="button" id="btnDetail" value="詳細" runat="server" /></td><!--詳細ボタンを定義します-->
          <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>

btnDetailonclick属性(イベント)をaspxに定義してしまうと、引数で必要な選手のIDがわからないので、サーバー処理でのイベントでonclickを定義します。

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 buttonControl As HtmlInputTextBox = CType(e.Item.FindControl("btnDetail"), HtmlInputButton)
        'コントロールにonclickのイベントを定義します
        '引数に選手のIDを渡すようにします
        buttonControl.Attributes.Add("onclick", "showDetail(" & row("ID").ToString & ");")

    End If
End Sub

これで行ごとにイベントを定義することができました。

独自データ属性

今回は選手のIDだけを引数にしましたが、渡したい情報が増えたときは、その分だけ引数を増やすよりも、btnDetailの要素に独自データ属性を定義して、btnDetailそのもの(this)を引数として渡すほうが簡単です。

属性とはvalue, readonly, disabledなど、htmlの要素の中に定義する情報です。

独自データ属性は、独自に属性を定義することができます。data-を先頭につけて定義します。例えば選手のIDを独自データ属性で定義する場合は、data-sidなどとします。

以下のようにサーバー処理で独自データ属性を定義します。

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 buttonControl As HtmlInputTextBox = CType(e.Item.FindControl("btnDetail"), HtmlInputButton)
        '独自データ属性を定義します
        buttonControl.Attributes.Add("data-sid", row("ID").ToString)
    End If
End Sub

aspxは以下のように書き換えます。

<script>
  //詳細画面を起動します
  //obj: btnDetailボタン
  function showDetail(obj){
    //クエリストリングで選手のIDを渡します
    window.open('detail.html?id=' + obj.getAttribute("sid"), null);
  }
</script>

<table>
  <thead>
    <tr>
      <td></td>
      <td>選手名</td>
      <td>国籍</td>
      <td>怪我</td>
      <td>キャプテン</td>
    </tr>
  </thead>
  <tbody>
    <asp:Repeater ID="repeater1" runat="server">
      <ItemTemplate>
        <tr>
          <!--引数が固定のため、onclickイベントは予め定義することができます-->
          <td><input type="button" id="btnDetail" value="詳細" runat="server" onclick="showDetail(this);" /></td>
          <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>

注意

data-をつけずにsidとしてもブラウザによってはエラーにならずにうまく動きますが、将来的にdisabledなどのようにsidという属性にhtmlで意味付けされてしまうと、うまく動かなくなるかもしれないので、data-を先頭につけて独自データ属性ということを明示的に定義します。






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