C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ASP.NET ajaxについて

[トピック内 9 記事 (1 - 9 表示)]  << 0 >>

■87746 / inTopicNo.1)  ASP.NET ajaxについて
  
□投稿者/ 研修生 (9回)-(2018/06/27(Wed) 09:34:41)

分類:[ASP.NET (VB)] 

いつもお世話になっております。
環境はASP.NET(VB)です。

ラジオボタンのはいを選択し非同期通信ボタンを押すとラベルに旅行先を表示するようにしたいです。

下記のようにソースを書いてみました。

javascript:
$(function () {
            $("#button").bind("click", function () {
                var prm = { "name": "北海道" };
                if ($("input[name='cmd']").prop("checked")) {
                    $("input[name='cmd']:eq(0)").prop("checked", true);
                    $.ajax({
                    type: "POST",
                    url: "Handler1.ashx",           //ashx:HTTPハンドラ。データのみの通信用
                    datatype: "json",                //データタイプ
                    data: prm,                       //データ(必要な場合)
                    cache: false,                    //キャッシュの利用指定
                    async: true,                     //非同期(true)/同期(false)
                    timout: 30000,                   //タイムアウト(ミリ秒)
                    //通信が成功した場合の処理
                    success: function (data) {
                        if (data != null) {
                            //受信データ確認
                            $("#Label2").text(data);
                        }
                    }
                },     
                    //エラー処理
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("error");
                    }
              });
                return false;
      });
     });

html:
<asp:Label ID="Label1" runat="server" Text="旅行がしたい"></asp:Label>
        <asp:RadioButton ID="RadioButton1" runat="server" Text="はい" GroupName="cmd" />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="いいえ" GroupName="cmd" />
              <asp:Label ID="Label2" runat="server"></asp:Label>
        <br />
        <br />
        <asp:Button ID="button" runat="server" Text="Ajax通信" />

ですが、ボタンを押しても反応がなくなかなか上手くいきません。
どこが間違っているのかも分からず…
すみませんがご教授お願いします。

引用返信 編集キー/
■87747 / inTopicNo.2)  Re[1]: ASP.NET ajaxについて
□投稿者/ WebSurfer (1531回)-(2018/06/27(Wed) 11:02:01)
No87746 (研修生 さん) に返信

何を作っているのかと開発環境を書いてください。

ASP.NET と言っても Web Forms, MVC, Web Pages などがあり、それぞれ話が違ってきます。コードを
見ると Web Forms ではないかと想像していますが、回答者・閲覧者そういう余計な想像に時間を費や
さなくて済むように、質問の一番最初に書いておいていただけると助かります。

OS, .NET, Visual Studio のバージョンなどの開発環境の情報も重要です。特に .NET のバージョン。
それによってまるで話が違ってくることがあります。

ところで、もし Web Forms アプリだとすると、UpdatePanel を使わない理由はなんでしょう? jQuery
ajax の勉強がしたいから jQuery ajax でやりたいということですか?
引用返信 編集キー/
■87748 / inTopicNo.3)  Re[2]: ASP.NET ajaxについて
□投稿者/ 研修生 (10回)-(2018/06/27(Wed) 11:39:52)
No87747 (WebSurfer さん) に返信
> ■No87746 (研修生 さん) に返信
>
> 何を作っているのかと開発環境を書いてください。
>
記述不足でした。すみませんでした。ご指摘ありがとうございます。

> ASP.NET と言っても Web Forms, MVC, Web Pages などがあり、それぞれ話が違ってきます。コードを
> 見ると Web Forms ではないかと想像していますが、回答者・閲覧者そういう余計な想像に時間を費や
> さなくて済むように、質問の一番最初に書いておいていただけると助かります。
>
Web Formsをつかっています。

> OS, .NET, Visual Studio のバージョンなどの開発環境の情報も重要です。特に .NET のバージョン。
> それによってまるで話が違ってくることがあります。
>
Visual Studioのバージョンは2010です。.netは4.0だと思います。

> ところで、もし Web Forms アプリだとすると、UpdatePanel を使わない理由はなんでしょう? jQuery
> ajax の勉強がしたいから jQuery ajax でやりたいということですか?
最終的にはUpdatePanelを使うのですが、まずはjQuery ajax の方を学習するということで今はjQuery ajaxを使っています。

引用返信 編集キー/
■87749 / inTopicNo.4)  Re[3]: ASP.NET ajaxについて
□投稿者/ WebSurfer (1532回)-(2018/06/27(Wed) 12:55:28)
No87748 (研修生 さん) に返信

> 最終的にはUpdatePanelを使うのですが、まずはjQuery ajax の方を学習するということで今はjQuery ajaxを使っています。

UpdatePanel とは何だか分かったうえでその返事をしているとは思えませんけど、そこはとりあえず置
いといて・・・

問題切り分けのためご自分で調べてもらわなけれなならないことがあるのでまずそれをやってください。

(1) ボタンクリックで制御が click イベントにアタッチした function に飛んでくるか。(デバッガで
  ブレークポイントを置いて調べてください)

(2) if 文の判定が期待通りで、$.ajax(...) に制御が飛ぶか。

(3) $.ajax(...) の実行で、期待通りの要求がブラウザからサーバーに出て行っているか、期待通りの
  応答がサーバーからブラウザに返ってきているか。(Fiddler などのキャプチャツールを利用して
  調べてください)

(4) success: function (data) に制御が飛んでくるか。data は期待通りか。
引用返信 編集キー/
■87750 / inTopicNo.5)  Re[4]: ASP.NET ajaxについて
□投稿者/ 研修生 (11回)-(2018/06/27(Wed) 13:08:52)
No87749 (WebSurfer さん) に返信
> ■No87748 (研修生 さん) に返信
>
>>最終的にはUpdatePanelを使うのですが、まずはjQuery ajax の方を学習するということで今はjQuery ajaxを使っています。
>
> UpdatePanel とは何だか分かったうえでその返事をしているとは思えませんけど、そこはとりあえず置
> いといて・・・
>
> 問題切り分けのためご自分で調べてもらわなけれなならないことがあるのでまずそれをやってください。
>
> (1) ボタンクリックで制御が click イベントにアタッチした function に飛んでくるか。(デバッガで
>   ブレークポイントを置いて調べてください)
>
> (2) if 文の判定が期待通りで、$.ajax(...) に制御が飛ぶか。
>
> (3) $.ajax(...) の実行で、期待通りの要求がブラウザからサーバーに出て行っているか、期待通りの
>   応答がサーバーからブラウザに返ってきているか。(Fiddler などのキャプチャツールを利用して
>   調べてください)
>
> (4) success: function (data) に制御が飛んでくるか。data は期待通りか。

ボタンクリックのみで実装したところ、動きとしては問題なかったです。
ラジオボタンを使って動かすとなるとやはり上手くいきませんでした。ラジオボタンのソースを書くところが悪いのでしょうか?
引用返信 編集キー/
■87751 / inTopicNo.6)  Re[1]: ASP.NET ajaxについて
□投稿者/ ぽぴ王子 (56回)-(2018/06/27(Wed) 13:10:50)
ぽぴ王子 さんの Web サイト
No87746 (研修生 さん) に返信
> ですが、ボタンを押しても反応がなくなかなか上手くいきません。
> どこが間違っているのかも分からず…
> すみませんがご教授お願いします。

たぶんですけど

>         <asp:Button ID="button" runat="server" Text="Ajax通信" />

の "button" はサーバーから見ると "button" という名前なのですが、クライアント
(ブラウザー)側から見るとまた別の名前がついているんです。
そこで名前が食い違っていて

>             $("#button").bind("click", function () {

の "#button" が機能していないんじゃないかと思います。
ブラウザーに表示したページのHTMLソースを一度確認してみてください。

修正するとしたら

>             $("#<%=button.ClientID%>").bind("click", function () {

というような感じでどうでしょうか。
あ、"#Label2" も同じだと思うので、そこも修正しないとまずいかもしれないです。

#不毛なやり取りを毎回やらないといけないんですかね

引用返信 編集キー/
■87752 / inTopicNo.7)  Re[5]: ASP.NET ajaxについて
□投稿者/ WebSurfer (1533回)-(2018/06/27(Wed) 13:34:25)
No87750 (研修生 さん) に返信

> ボタンクリックのみで実装したところ、動きとしては問題なかったです。
> ラジオボタンを使って動かすとなるとやはり上手くいきませんでした。ラジオボタンのソースを書くところが悪いのでしょうか?

何を言っているのか分かりません。「問題ない」って何が問題ないのですか?

上の私のレスの (1) 〜 (4) を全て順番に一つ一つ調べてその結果を書いてもらえないのでしょうか。
話はそれからにしたいのですが。
引用返信 編集キー/
■87754 / inTopicNo.8)  Re[2]: ASP.NET ajaxについて
□投稿者/ 研修生 (12回)-(2018/06/28(Thu) 11:02:33)
No87751 (ぽぴ王子 さん) に返信
> ■No87746 (研修生 さん) に返信
>>ですが、ボタンを押しても反応がなくなかなか上手くいきません。
>>どこが間違っているのかも分からず…
>>すみませんがご教授お願いします。
>
> たぶんですけど
>
>> <asp:Button ID="button" runat="server" Text="Ajax通信" />
>
> の "button" はサーバーから見ると "button" という名前なのですが、クライアント
> (ブラウザー)側から見るとまた別の名前がついているんです。
> そこで名前が食い違っていて
>
>> $("#button").bind("click", function () {
>
> の "#button" が機能していないんじゃないかと思います。
> ブラウザーに表示したページのHTMLソースを一度確認してみてください。
>
> 修正するとしたら
>
>> $("#<%=button.ClientID%>").bind("click", function () {
>
> というような感じでどうでしょうか。
> あ、"#Label2" も同じだと思うので、そこも修正しないとまずいかもしれないです。
>
> #不毛なやり取りを毎回やらないといけないんですかね

返信遅くなってしまい申し訳ありませんでした。
わざわざご丁寧にありがとうございます。buttonやlabelの名前を確認したところ大丈夫でした。
自分で色々とソースをいじってみたところ、ラジオボタンのif文の終わりの括弧の書く場所が間違っているようでした。
本当にありがとうございました。
引用返信 編集キー/
■87755 / inTopicNo.9)  Re[6]: ASP.NET ajaxについて
□投稿者/ 研修生 (13回)-(2018/06/28(Thu) 11:05:44)
No87752 (WebSurfer さん) に返信
> ■No87750 (研修生 さん) に返信
>
>>ボタンクリックのみで実装したところ、動きとしては問題なかったです。
>>ラジオボタンを使って動かすとなるとやはり上手くいきませんでした。ラジオボタンのソースを書くところが悪いのでしょうか?
>
> 何を言っているのか分かりません。「問題ない」って何が問題ないのですか?
>
> 上の私のレスの (1) 〜 (4) を全て順番に一つ一つ調べてその結果を書いてもらえないのでしょうか。
> 話はそれからにしたいのですが。

説明不足で本当に申し訳ありませんでした。(1) 〜 (4)の全ての動作が問題なく動きました。という意味でした。
自分で色々とソースをいじってみたところ、ラジオボタンのif文の終わりの括弧の書く場所が間違っているようでした。
わざわざご回答していただき本当にありがとうございました。
解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ