質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • jQuery

    7550questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ASP.NET

    585questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • .NET Framework

    506questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,033

doremifa

score 25

前提・実現したいこと

現状はラジオボタンの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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 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様とさせてください。
    次回以降衝動的に質問せず、落ち着いて考えるよう留意いたしますが
    どうしても聞き方がおかしい場合も出てくるかと思いますので
    その際はご指摘いただければ幸いです。

    キャンセル

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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/04 10:00

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

    キャンセル

  • 2016/11/04 10:52

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

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

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

    キャンセル

  • 2016/11/04 11:33 編集

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

    キャンセル

  • 2016/11/04 11:40

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

    キャンセル

  • 2016/11/04 11:42 編集

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

    キャンセル

  • 2016/11/04 11:44

    付ければよいのでは?

    キャンセル

  • 2016/11/04 11:48 編集

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

    キャンセル

  • 2016/11/04 11:54

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

    キャンセル

  • 2016/11/04 12:00

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

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

    キャンセル

  • 2016/11/04 12:19

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

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

    キャンセル

  • 2016/11/04 12:42

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

    キャンセル

  • 2016/11/04 14:29

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    7550questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ASP.NET

    585questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • .NET Framework

    506questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。