<asp:RadioButton >の変化をクライアントで検知して別部品のvisibleを操作したい

Question

###前提・実現したいこと
現状はラジオボタンのautopostbackをtrueにし、OnCheckedChangedイベントをサーバ側で拾って
別部品の表示をコントロールしているのですが、ラジオボタン変更のたびにポストバックするのは動作が重いので
クライアントで処理したいと思いますが、inputタグではなくaspのradiobuttonの変化を取得し、別asp部品を指定して
表示操作する方法がわからずとん挫しています。

###該当のソースコード

<!-- 変化検知したいラジオボタン-->
<asp:RadioButton ID="Radio1" runat="server"  GroupName="testradio" Text="テキスト1" OnCheckedChanged="Radio1_CheckedChanged"/>
<asp:RadioButton ID="Radio2" runat="server"  GroupName="testradio" Text="テキスト2" OnCheckedChanged="Radio2_CheckedChanged"/>

<!--Radio2選択時に非表示にしたいテキストボックス-->
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

###試したこと
javascriptで
$('input[name=Radio1]').change(function(){
});
みたいに書いたらなんとかならないかと思いましたが<asp:RadioButton >にnameが設定できませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
ドットネットフレームワーク４．５．２
C#
webform

Answer 1

サーバー側とクライアント側をしっかり区別して考えることができているでしょうか？ どうも質問文からはそのあたりが曖昧なように見えます。

サーバー側で起こることとクライアント側で起こることの違いを強く意識してください。そのあたりが理解できていれば、頓挫することは今よりはるかに少なくなくなってくるはずですので。

inputタグではなくaspのradiobuttonの変化を取得し、別asp部品を指定して表示操作する方法がわからずとん挫しています。

JavaScript / jQuery は input 要素の変化をイベントで検出して他の html 要素を操作することはできますが、それはあくまでクライアント側だけの話です。

「aspのradiobutton」や「別asp部品」はサーバーコントロールです。サーバー側でしか操作できません。JavaScript / jQuery のようなクライアント側だけで動くスクリプトでは何ともなりません。（TextBox の Visible プロパティを JavaScript / jQuery で操作して非表示にするなんてことはできません）

JavaScript / jQuery で操作できるとしたら、ASP.NET が「aspのradiobutton」や「別asp部品」を html ソースに変換してブラウザに送信した後、ブラウザが保持して表示している DOM です（RadioButton と TextBox は両方とも html では input 要素になります）。

なので、上記で「inputタグではなく・・・」というところで話がおかしくなっています。（言い方の問題だけなのかもしれませんが、掲示板に書いてあることが全てのこのようなサイトでは正しい用語で書いていただかないと話が通じにくいです）

質問者さんのやりたいことは、(1) 前のスレッド https://teratail.com/questions/53476 の話の AutoPostBack を使うのは止める、(2) クライアント側で input type="radio" の選択結果に応じて、それに関連する input type="text" の表示・非表示を切り替える（display;none; を設定するなどして）・・・ということではないかと想像していますが、そのあたりを明確にしてください。

【2016/11/4 12:10 追記】

下の 2016/11/04 12:08 のコメントで「上の回答欄に追記しておきます」と書きましたが、それを以下に追記しておきます。

ASP.NET 4 以降では ClientIDMode プロパティが利用できます。

方法: ID によって JavaScript からコントロールにアクセスする
https://msdn.microsoft.com/ja-jp/library/dd410598.aspx

Predictable に設定すれば、その通り予想可能ですので、予想した id を使って JavaScript / jQuery のコードを書けるはずです。

予期できない副作用があるかもしれませんので、十分な検証が必要かと思います。その意味で、Static を利用するのはできれば避けた方がよさそうな気がします。

ASP.NET 3.5 以前、もしくは ClientIDMode プロパティを使うのが面倒という場合は、インラインのスクリプトであれば、以下のように昔からあるコード表示ブロック（<%=Radio11.ClientID%> の部分に注目）を利用することもできます。

</script>
<script type="text/javascript">
//<![CDATA[
  $(function () {
    $('#<%=Radio11.ClientID%>').change(
      function () {
        // ・・・必要な処置・・・
      });
  });
//]]>
</script>

Comments

[doremifa]

挙動としてはおっしゃる通りです。
ただ、asp部品のままとりうる手段はないでしょうか。
<asp:Button>のOnClientClickのようにjavascriptが書けたり、asp部品も実際にはhtmlタグとして展開されているはずですのでそれを指定してjqueryが動かせたり等。
(すでにasp radioが設置されてしまっているためです)

[退会済みユーザー]

私のレスを理解していないです。よく読んでください。特に以下の部分：

"JavaScript / jQuery で操作できるとしたら、ASP.NET が「aspのradiobutton」や「別asp部品」を html ソースに変換してブラウザに送信した後、ブラウザが保持して表示している DOM です（RadioButton と TextBox は両方とも html では input 要素になります）。"

なので、その input 要素に対しては、

"(1) 前のスレッド https://teratail.com/questions/53476 の話の AutoPostBack を使うのは止める、(2) クライアント側で input type="radio" の選択結果に応じて、それに関連する input type="text" の表示・非表示を切り替える（display;none; を設定するなどして）"

は可能です。

この説明でも分からなければ、どこが分からないかまた質問してください。

[doremifa]

レスしていただいている内容については既知です。
不明なのは
「（RadioButton と TextBox は両方とも html では input 要素になります）。"」
の展開ルールの部分です。
再度同内容の質問になってしまい大変恐縮ですが<asp:Button>の展開後を特定して
javascriptで指定する方法はありませんでしょうか。(展開前と展開後で同様の名前を保持する等
展開を意識しないで指定できる方法はありませんでしょうか。)

[退会済みユーザー]

話がかみ合ってないような気がします。

「既知です」と言っておられますが、それなら質問者さんのコードの RadioButton や TextBox が html に変換されてブラウザが受信した html ソースも既知ですよね？　もし、html ソースを見ていないなら今すぐ見てください。それから質問してください。

html ソースが既知なら、JavaScript / jQuery を使って当該 DOM 要素を特定するのは、JavaScript / jQuery の基本的な知識がある人なら何の苦労もないはずです。

なぜ name 属性にこだわっているのか分かりません。name 属性がなくても id 属性があれば特定できます。

サーバーコントロールの ID とそれが html 要素に変換された後の id が異なるのが問題なら、それにも対応可能です。

id 属性を使わなくても jQuery のセレクタ機能を使って容易に特定できる方法はあるはずです。

jQuery のセレクタの使い方はちょっとググれば分かるので、まずご自分で調べて基本的な知識をつけてから質問してください。

[doremifa]

たしかにかみ合っていないように思います。
質問の仕方が悪く申し訳ありません。

質問の内容としては
>サーバーコントロールの ID とそれが html 要素に変換された後の id が異なるのが問題なら、それにも対応可能です。
この手段についてです。
idやnameの値が変化してしまうことに対する対応がわからずとん挫し続けている状況です。

[退会済みユーザー]

上の回答欄に追記しておきます。

結局、タイトルの「<asp:RadioButton >の変化をクライアントで検知して別部品のvisibleを操作したい」と言う話ではなくて、「ASP.NET のサーバーコントロールの ID が html ソースで変わってしまうことの対応」という話だったようですね。

次回は表題・内容を良く練ってから質問していただければと思います。

[doremifa]

大変申し訳ありません。
おっしゃるとおり質問の仕方が一番の問題でした。

また、いつもいつも詳細な解説も含めご指南いただきありがとうございます。
本来ならばベストアンサーとさせていただきたいのですが
複数選べないため、今回はkei344様とさせてください。
次回以降衝動的に質問せず、落ち着いて考えるよう留意いたしますが
どうしても聞き方がおかしい場合も出てくるかと思いますので
その際はご指摘いただければ幸いです。

Answer 2

inputタグではなくaspのradiobuttonの変化を取得し

ASPは触った事もありませんが、ブラウザが解釈できるHTMLをASPで生成して送っているだけのはずなので、「aspのradiobutton」は <input type="radio"> をブラウザに出力しているはずです。それをJavaScriptで取得することは当然出来ます。

別asp部品を指定して表示操作

全体像がわからないですが部品を両方出力した上で、JavaScriptで表示／非表示を切り替えるのが良くあるやり方だとは思います。

<asp:RadioButton >にnameが設定できませんでした。

出力されたHTML（ブラウザで「ページのソースを表示」）を確認してみてください。何らかの識別のための要素が有ると思いますよ。デベロッパーツールで確認するのも良いと思います。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

Comments

[doremifa]

正しくはnameもidもあるにはあるのですが<input>に変化する過程で名前が変化しており、
プログラム上に書いていない名前になってしまっているため、プログラム上にある要素で指定できる方法を探している次第です。

[kei344]

> nameもidもあるにはあるのですが<input>に変化する過程で名前が変化
ASPってそんな言語なんですか？使いにくいですね。

<div id="radio001"><asp:RadioButton></div>

とかで出力できないものですか？

[doremifa]

$(“#divのID″).find(“.radioのclass″)のような特定方法を最終手段として考えてはいるのですが
今は<asp:RadioButton>の要素で特定できないかと考えているような状況です。
やはり部品単独を直接指定する方向では難しいでしょうか・・・。

[kei344]

radioにclassが付いているのであればそれを使えばよいのでは？

[doremifa]

いえ、現段階ではついていないのです。

[kei344]

付ければよいのでは？

[doremifa]

おっしゃる通りなのですが、コーディング外の部分で避けたい事情があって質問させていただいている次第なのです。

[kei344]

> nameもidもあるにはあるのですが<input>に変化する過程で名前が変化
これは生成のたびに毎回ランダム値が入るという状況ですか？ASPは規則性も法則も無い変換を行うのですか？

[doremifa]

いえ、法則性はあります。
頭にそのプログラムの固定文字列がついているだけのように見えます。
ただ、コード上にでてない値を指定しているjavascriptが書いてあってはいけないらしいのです。

自分でも無理を言っている点は理解していますので
何かしら特定できるものを追加できないか交渉を始めることにします。
いろいろありがとうございました。

[kei344]

先頭に付くのが決まっているなら後方一致。
$( 'input[name$="Radio1"]' )

【属性セレクタ (E[foo$="bar"])｜セレクタ｜CSS HappyLife ZERO】
http://zero.css-happylife.com/selectors/attribute_selectors_06.shtml

[doremifa]

なるほど！ありがとうございます！！！

[退会済みユーザー]

それは NG だと思います。異なるネーミングコンテナに配置した同名 ID のコントロール（例えば、マスターページと子ページ、GridView の Template 内と GridView の外などに同名 ID のコントロールを配置するような場合）の区別ができないと言う問題があります。今のケースでは良くても、将来的なことも考えて、そういう力技的なことは避けた方が無難でしょう。