none
GridView内でHtmlInputCheckBoxの値変更イベントを取得したい RRS feed

  • 質問

  • いつもありがとうございます。

    GridViewコントロール内でinput type="checkbox"の値変更イベントを受け取りたいのですが、うまく取得することができません。

    asp:CheckBoxコントロールであれば、AutoPostBack="True" OnSelectedIndexChangedを用いて、値の変更取得ができるのですが、

    HtmlInputCheckBoxのServerChangeを使うとイベント自体が発生しません。

    asp:CheckBoxコントロールを使わず、HtmlInputCheckBoxコントロールを使っている理由は、見た目をチェックボックスではなく

    ボタンON/OFFのようなUIを実現したかったためです。

    HtmlInputCheckBoxコントロールで値の変更イベントを監視するにはどのようにすればよいでしょうか?

    <asp:templatefield headertext="テスト列" headerstyle-cssclass="success">
        <itemtemplate>
            <div data-toggle="buttons" id="menu" runat="server">
                <label class="btn btn-default btns">
                    <input type="checkbox" id="chk_2" runat="server" value="0" OnServerChange="chk_ServerChange">
                        パン
                    </input>
                </label>
                <label class="btn btn-default btns">
                    <input type="checkbox" id="chk_3" runat="server" value="0"OnServerChange="chk_ServerChange">
                        牛乳
                    </input>
                </label>
                <label class="btn btn-default btns">
                    <input type="checkbox" id="chk_4" runat="server" value="0" OnServerChange="chk_ServerChange">
                        チーズ
                    </input>
                </label>
            </div>
        </itemtemplate>
    </asp:templatefield>
    

    ----------------------------------------------------------------

    開発環境

    Windows10 Pro、

    Vsiaul Studio Community 2015(ASP.net C#)、

    ASP.NET開発サーバ、Framework4.5.2
    MySQL Server 5.6、MySQL Connector Net 6.6.9
    -------------------------------------------------------------------

    2015年11月13日 10:15

回答

  • サイトに不具合があるようで、質問者さんが前に立てた別スレッド(URL は上の私のレスを見てください)がホーラムの入り口のページにリストされないですね。

    質問者さんは前に立てたスレッドが消えてしまったと思って、同じ内容・質問のこのスレッドを立てたのでしょうか?

    念のため、上の URL のスレッドでの私のレスと同じものをここにも書いておきます。

    > asp:CheckBoxを使わず、HtmlInputCheckBoxを使っている理由は見た目上、チェックボックスではなく、
    > ボタンのON/OFFのようなUIにしたかった為です。
     
    そこのところ(特に「ボタンのON/OFFのようなUI」というところ)をもっと詳しく説明していただけませんか?

    【追伸】
     
    クライアントのイベントでポストバックするには GetPostBackEventReference メソッド と RaisePostBackEvent メソッド を使うという方法があります(詳しくは以下の記事を見てください)。
     
    __doPostBack を使ってはいけません
    http://surferonwww.info/BlogEngine/post/2012/04/21/How-to-use-GetPostBackEventReference-and-RaisePostBackEvent-methods.aspx
     
    しかし、それを考える前に「ボタンのON/OFFのようなUI」というところだけが問題ならそこの解決方法を考えた方が早いかもしれないと思って聞いています。

    【追伸2】
     
    上のレスで紹介した GetPostBackEventReference, RaisePostBackEvent メソッド を使う方法より、隠しボタン(Button の CssClass に display: none; を設定)を追加して、checkbox がクリックされたらクライアントスクリプトを使ってその隠しボタンをクリックしてポストバックをかける方が簡単かもしれません。具体的な例は以下の記事を見てください。
     
    GirdView 内の隠しボタンでポストバック
    http://surferonwww.info/BlogEngine/post/2014/03/26/postback-by-clicking-hiddenbutton-in-gridview.aspx
     
    ただし、前にも書きましたが、上記のようなことを考える前に「ボタンのON/OFFのようなUI」というところだけが問題ならそこの解決方法を考えて、CheckBox サーバーコントロールを使ったほうが早いかもしれません。

    • 回答としてマーク hys73 2015年11月14日 10:31
    2015年11月14日 3:30
  • > 『ボタンのON/OFFのようなUI』についてですが、下記のURLにある『Checkbox』にしたいと思いました。

    それは CSS と JavaScript で「見え方」を変えているのでしょう。

    CheckBox サーバーコントロールを ASP.NET が html ソースにレンダリングすると <input type="checkbox" ...  になるので、同様に CSS と JavaScript を適用できれば(多分 html 要素に属性を追加しているだけだと思います)同じ「見え方」になるはずです。

    なので先のレスで、

    > そこのところ(特に「ボタンのON/OFFのようなUI」というところ)をもっと詳しく説明していただけませんか?

    と言ったのですが・・・

    同じ「見え方」になるように属性を追加するのと、隠しボタンとスクリプトを追加するのと、どちらが簡単かを考えて、質問者さんは後者の方法を取ったということでしたら私の言うことは余計なお世話なのですが。


    • 編集済み SurferOnWww 2015年11月14日 15:07 一部訂正
    • 回答としてマーク hys73 2015年11月14日 16:17
    2015年11月14日 15:06

すべての返信

  • 質問者さんが立てた別スレッド(URL 下記)と基本的には同じ質問に見えます。

    https://social.msdn.microsoft.com/Forums/ja-JP/31eb0e62-bdd5-4dc7-9e65-04ed2cd021d8/gridviewhtmlinputcheckbox

    そうだとすればスレッドの乱立は止めてまとめていただきたいのですが。

    そうでなけれれば何が違うのか具体的に書いていただけませんか。

    2015年11月13日 10:58
  • サイトに不具合があるようで、質問者さんが前に立てた別スレッド(URL は上の私のレスを見てください)がホーラムの入り口のページにリストされないですね。

    質問者さんは前に立てたスレッドが消えてしまったと思って、同じ内容・質問のこのスレッドを立てたのでしょうか?

    念のため、上の URL のスレッドでの私のレスと同じものをここにも書いておきます。

    > asp:CheckBoxを使わず、HtmlInputCheckBoxを使っている理由は見た目上、チェックボックスではなく、
    > ボタンのON/OFFのようなUIにしたかった為です。
     
    そこのところ(特に「ボタンのON/OFFのようなUI」というところ)をもっと詳しく説明していただけませんか?

    【追伸】
     
    クライアントのイベントでポストバックするには GetPostBackEventReference メソッド と RaisePostBackEvent メソッド を使うという方法があります(詳しくは以下の記事を見てください)。
     
    __doPostBack を使ってはいけません
    http://surferonwww.info/BlogEngine/post/2012/04/21/How-to-use-GetPostBackEventReference-and-RaisePostBackEvent-methods.aspx
     
    しかし、それを考える前に「ボタンのON/OFFのようなUI」というところだけが問題ならそこの解決方法を考えた方が早いかもしれないと思って聞いています。

    【追伸2】
     
    上のレスで紹介した GetPostBackEventReference, RaisePostBackEvent メソッド を使う方法より、隠しボタン(Button の CssClass に display: none; を設定)を追加して、checkbox がクリックされたらクライアントスクリプトを使ってその隠しボタンをクリックしてポストバックをかける方が簡単かもしれません。具体的な例は以下の記事を見てください。
     
    GirdView 内の隠しボタンでポストバック
    http://surferonwww.info/BlogEngine/post/2014/03/26/postback-by-clicking-hiddenbutton-in-gridview.aspx
     
    ただし、前にも書きましたが、上記のようなことを考える前に「ボタンのON/OFFのようなUI」というところだけが問題ならそこの解決方法を考えて、CheckBox サーバーコントロールを使ったほうが早いかもしれません。

    • 回答としてマーク hys73 2015年11月14日 10:31
    2015年11月14日 3:30

  • 回答ありがとうございます。

    >質問者さんは前に立てたスレッドが消えてしまったと思って、同じ内容・質問のこのスレッドを立てたのでしょうか?

    おっしゃる通り、質問を投稿した後、フォーラムからも自分のアカウントからも確認することができず、

    スレッド自体が消えてしまったと思い再投稿させて頂いた次第です。

    『ボタンのON/OFFのようなUI』についてですが、下記のURLにある『Checkbox』にしたいと思いました。

    http://labs.thecssninja.com/bootleg/#

    (レ☑ではなく、トグルボタンのような表現をしたかったのですが、asp:CheckBoxで実現する方法が分からなかった為、input type="checkbox"を使った次第です)

    内容につきましては、ご提案頂きました、GirdView 内に隠しボタンを配置する方法で、うまく実現することができました。

    重複しているスレッドについては、削除ができなかった為、念のため、回答済マークをつけ、解決済とさせて頂きました。


    2015年11月14日 10:32
  • > 『ボタンのON/OFFのようなUI』についてですが、下記のURLにある『Checkbox』にしたいと思いました。

    それは CSS と JavaScript で「見え方」を変えているのでしょう。

    CheckBox サーバーコントロールを ASP.NET が html ソースにレンダリングすると <input type="checkbox" ...  になるので、同様に CSS と JavaScript を適用できれば(多分 html 要素に属性を追加しているだけだと思います)同じ「見え方」になるはずです。

    なので先のレスで、

    > そこのところ(特に「ボタンのON/OFFのようなUI」というところ)をもっと詳しく説明していただけませんか?

    と言ったのですが・・・

    同じ「見え方」になるように属性を追加するのと、隠しボタンとスクリプトを追加するのと、どちらが簡単かを考えて、質問者さんは後者の方法を取ったということでしたら私の言うことは余計なお世話なのですが。


    • 編集済み SurferOnWww 2015年11月14日 15:07 一部訂正
    • 回答としてマーク hys73 2015年11月14日 16:17
    2015年11月14日 15:06
  • >CheckBox サーバーコントロールを ASP.NET が html ソースにレンダリングすると <input type="checkbox" ...  になるので

    >同様に CSS と JavaScript を適用できれば(多分 html 要素に属性を追加しているだけだと思います)同じ「見え方」に

    >なるはずです。

    こちらも検証し、見え方が同じになることが確認できました。

    うまくいかなかった理由はラベルタグの中にCheckBoxサーバーコントロールを記述しなければならないところを、

    ラベルタグの外側に記述していたようです。

    上記により、CheckBoxサーバーコントロールのOnCheckedChangedイベントで値取得できることも確認できましたが、

    チェックボックスが複数あるため、機能的に隠しボタンを使用した方がシンプルに書けそうなので、今回は隠しボタン方式で

    実装することに致します。ありがとうございました。

    2015年11月14日 16:33