<asp:RadioButton >の変化をクライアントで検知して別部品のvisibleを操作したい
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 2,033
前提・実現したいこと
現状はラジオボタンの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/ツール等のバージョンなど)
ドットネットフレームワーク4.5.2
C#
webform
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+3
サーバー側とクライアント側をしっかり区別して考えることができているでしょうか? どうも質問文からはそのあたりが曖昧なように見えます。
サーバー側で起こることとクライアント側で起こることの違いを強く意識してください。そのあたりが理解できていれば、頓挫することは今よりはるかに少なくなくなってくるはずですので。
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>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+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/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 90.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/11/02 17:06
ただ、asp部品のままとりうる手段はないでしょうか。
<asp:Button>のOnClientClickのようにjavascriptが書けたり、asp部品も実際にはhtmlタグとして展開されているはずですのでそれを指定してjqueryが動かせたり等。
(すでにasp radioが設置されてしまっているためです)
2016/11/02 18:28
"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/04 09:50 編集
不明なのは
「(RadioButton と TextBox は両方とも html では input 要素になります)。"」
の展開ルールの部分です。
再度同内容の質問になってしまい大変恐縮ですが<asp:Button>の展開後を特定して
javascriptで指定する方法はありませんでしょうか。(展開前と展開後で同様の名前を保持する等
展開を意識しないで指定できる方法はありませんでしょうか。)
2016/11/04 10:25
「既知です」と言っておられますが、それなら質問者さんのコードの RadioButton や TextBox が html に変換されてブラウザが受信した html ソースも既知ですよね? もし、html ソースを見ていないなら今すぐ見てください。それから質問してください。
html ソースが既知なら、JavaScript / jQuery を使って当該 DOM 要素を特定するのは、JavaScript / jQuery の基本的な知識がある人なら何の苦労もないはずです。
なぜ name 属性にこだわっているのか分かりません。name 属性がなくても id 属性があれば特定できます。
サーバーコントロールの ID とそれが html 要素に変換された後の id が異なるのが問題なら、それにも対応可能です。
id 属性を使わなくても jQuery のセレクタ機能を使って容易に特定できる方法はあるはずです。
jQuery のセレクタの使い方はちょっとググれば分かるので、まずご自分で調べて基本的な知識をつけてから質問してください。
2016/11/04 11:14 編集
質問の仕方が悪く申し訳ありません。
質問の内容としては
>サーバーコントロールの ID とそれが html 要素に変換された後の id が異なるのが問題なら、それにも対応可能です。
この手段についてです。
idやnameの値が変化してしまうことに対する対応がわからずとん挫し続けている状況です。
2016/11/04 12:08
結局、タイトルの「<asp:RadioButton >の変化をクライアントで検知して別部品のvisibleを操作したい」と言う話ではなくて、「ASP.NET のサーバーコントロールの ID が html ソースで変わってしまうことの対応」という話だったようですね。
次回は表題・内容を良く練ってから質問していただければと思います。
2016/11/04 12:47 編集
おっしゃるとおり質問の仕方が一番の問題でした。
また、いつもいつも詳細な解説も含めご指南いただきありがとうございます。
本来ならばベストアンサーとさせていただきたいのですが
複数選べないため、今回はkei344様とさせてください。
次回以降衝動的に質問せず、落ち着いて考えるよう留意いたしますが
どうしても聞き方がおかしい場合も出てくるかと思いますので
その際はご指摘いただければ幸いです。