jQueryとASP.NETの機能競合

2023/09/04 23:42

このQ&Aのポイント

jQueryとASP.NETを組み合わせてカレンダーから日付を選択するモーダルウィンドウを作成しようとしていますが、JQueryとASP.NETのイベント処理の競合に困っています。
モーダルウィンドウの作成にはJQueryが使用され、DOMのコントロールが同じHTML内で追加・更新されます。しかし、モーダルウィンドウの表示は別のURLで行われるため、ASP.NETのイベントとJQueryのイベントの融合が難しい状況です。
解決策として、以下の2つの案が考えられます。案1はJQueryUIやJQuery Mobileのカレンダーを使い、ASP.NETのコントロールを使用せずに完結させる方法です。案2はJQueryのイベントをキャンセルして、DOMの差し替えを全て無効にする方法です。しかし、すべてのイベントを把握するのは現実的ではないため、この案は実現が難しいです。

ベストアンサー

jQuery と ASP.NETの、機能競合

2013/04/01 00:04

◆やろうとしていること JQuery＋JQueryMobile＋ASP.net2.0 を使用して、カレンダーから日付を選択させるモーダルウィンドウを作ろうとしています。 ◆質問内容モーダルウィンドウを作り、そっちでの入力値を親に返そうという処理を実装しようとしたとき、 ASPのイベントも、JQueryのイベントも、処理が終わったら「呼び元に戻す」ということをしていると思います。で、おそらく、 (1)JQueryの$("buttonのセレクター")．click でのハンドル (2)ASP.NETでの、with Event コントロール名、handles イベント名での、イベントハンドルとがあり、以下の２つの機能をうまく融合できなくて困っています。Ａ：モーダルウィンドウの作成は、JQueryでは、結局は同じHTML内に、DOMでコントロールが追加・更新されるだけで、<HTML></HTML>の単位ではなく、<data-role=page>の単位で書き換えをする。Ｂ：モーダルウィンドウを出そうとしているため、<HTML></HTML>の単位で、ウィンドウが作成され、ユーザが見ているページのURLは、「親ウィンドウ」のURLとは異なる。上記認識で合っていますでしょうか？宜しくお願い致します。 ****************************************************** ◆解決の方向性？案１：JQueryUIなり、JQuery Mobileのカレンダーを探し、それだけを使う。　　　その際は、ASP．NETでは、ASP：Clender などは使わない。　　　（asp:Calenderや、asp:HyperLink等は使わない。同じ画面のURLで処理ができなくなるため）案２：JQueryでの「$("buttonのセレクター")．click でのハンドル」など、　　　動いてしまうイベントを、かたっぱしから、処理がキャンセルされるようにする。　　　（jQueryのDOMの差し替えを、全て無効にするため。）　　　⇒　すべてのイベントを把握＆実装するのは現実ではないた、この案は取れない。上記認識で合っていますでしょうか？宜しくお願い致します。

TeferiMage
お礼率99% (215/217)

Microsoft ASP
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

shockatz
ベストアンサー率80% (153/191)

2013/04/04 03:29 回答No.1

ASP.NETの特徴は、・サーバコントロール・ビューステートによるコントロールの値保持・ポストバックです。イベントについては、かつてのWindowsフォームのプログラミングスタイルで移行できるように、プログラム的に「イベントハンドラ」の形態をとっているだけで、内実はポストバックと、サーバ側処理の連携を隠蔽したものです。 javascript側のイベントハンドラとは動作原理が全く異なります。 ASP.NET Ajaxはまたちょっと違った内容ですが、フォーム全体をポストバックすることに違いはありません。戻りによる画面書き直しを画面の一部に止め、Ajax「ふう」の遷移を実現するものです。で、jQueryとASP.NETの連携といいますと、DateTime Pickerを例にしますと、クライアントサイド側で取得した値をサーバコントロールにセットし、後はWebフォーム側でポストバックするか、javascriptからポストバックまでを起こすような形式がベストだと思います。 jQueryでデータ送信まで行う手法（$.Ajaxなど）もありますが、それですとASP.NETを使うメリットは全くなく、ASP.NET MVCを使うことになるでしょう。また、ASP.NET Ajaxを使うのであれば、jQuery連携は煩雑なだけで、ASP.NET Ajax側のコントロールを使うほうが合理的でです。最後に一言。 ASP.NETとjQueryを連携して使う場合の本命は、ASP.NET MVCです。また、Webフォームの場合も、サーバコントロールのIDを操作できる、ASP.NET 4.0の採用がベストです。 ASP.NET 2.0なんか使ってはいけません。javascript連携は良くありません。

質問者

お礼 2013/04/04 06:58

詳しいご回答、ありがとうございます! Jqueryで値をセットしておき、最後に１回だけサーバに送信するようにしました。今、HTML5とCSS3を使っているので新しいinput typeが対応しておらず、不便を感じていました… ASP.NET MVC、調べてみますありがとうございました！

関連するQ&A

ASP.net
asp:Textboxなどのサーバコントロールについて質問です。質問(1)サーバコントロールには、runat=Serverと記載しますが、これはサーバにリクエストが走っているということなのでしょうか？質問(2)それらのコントロールに対して、CSS3のプロパティは指定可能なのでしょうか？質問(3)JQUERYの、DOCUMENT.READYや、#Button.clickは、使用可能でしょうか？また、JQUERY Mobileは使用可能でしょうか？ ◆補則 (1)VBの部品を、ブラウザ上で動かすようなケースであれば、クライアントにダウンロードをさせずに動かすために、サーバで動くということもあるのでしょうが、asp:Textboxなどであれば、内部的にはHTMLのタグなのでしょうか？だとしたらリクエストはしないのですよね？ (2)動的に、page.UI.textboxなどを作成すると、HTMLタグが持っている要素をプロパティとして持っていますが、ユーザコントロールは、もしHTMLとして作成されているtextboxならCSSプロパティを指定できそうですが、ＶＢの部品なら操作できるのはＶＢのコントロールのプロパティですよね？ (3)AJAXの考え方は、DOMだけ書き換えようとするのにたいし、ASPでは、FormをSubmitしてリクエストしますよね。どうやって共存しているのでしょうか？
- ベストアンサー
- Microsoft ASP
jQueryでの書き方について
HTMLファイルから読み込まれるJavaScriptファイルに次のような書き方がありました。 (function($){ $(function(){ // DOM操作などの処理を記述 ... ... }); })(jQuery); このような書き方を初めて見たのですが、これはどのような意図があるのでしょうか？ HTMLの読み込みが完了してから処理を始めるように、次のような書き方はよく見るのですが、これとは何が違い、どう使い分けるのでしょうか？ $(function(){ // DOM操作などの処理を記述 ... ... }); ■環境 jQuery 2.1.3
- ベストアンサー
- JavaScript
jqueryのajaxに引数を指定
ajaxを利用して外部HTMLを読み込ませたいのですが$.ajax()などをonclickイベントなどで呼び出すとき引数を指定してurlを設定することはできませんかイメージとしては例えばjqueryでloadingpageという関数を作って HTMLを <input type="button" onclick="loadingpage(http://www.hogehoge.com);"> って感じにしてボタンをクリックするとhttp://www.hogehoge.comがページ内で読みだされるようにしたいです。
- 締切済み
- JavaScript
jQueryのイベント
いつもお世話になっております。 jQueryでスマートフォンのアプリを作成しております。背面に画像（１）を配置して、その画像の上にさらに画像（２）を配置し（１）のクリックイベントの取得がしたいのですがどのように実装したらよろしいでしょうか。クリックイベントのほかにスクロールの処理があるのでこちらの実装方法も合わせてご教示いただけると幸いです。
- ベストアンサー
- JavaScript
ajax反映後のjqueryが動かない
色々と簡略化してますが、以下のようなajaxを交えたコードを書いています。 <script type="text/javascript"> $(function() { /* 初期変数処理 */ ............ /* HTML内object操作 */ ............ /* ある箇所をclickでイベント */ $('#hoge').click(function(e)　←(1)画面アニメーション { test3(); } /* 数秒後に(1)を自動実行 setInterval(function(){ ...... } /* formを使って検索 */ $('#form').submit(function(event) { event.preventDefault(); ........(中略) $.ajax({ type:"POST", url: "hoge.php", data:{data: data}, timeout: xxxxx, beforesend: { ........ }, complete: { ........ } success: function(data){ ......... ← (2)HTML内object操作、jquery部分は避ける test2(); } }); return false; }); function test1(){ ........ }; function test2(){ ........ }; function test3(){ ........ }; }); </script> [HTML] <form id = "form"> <input name="list"/> <button>送信！</button> </form> <div id="hogehoge"> ................. ←(3)検索で内容変更する箇所 </div> としているのですが、一度送信ボタンを押して(2)の処理を行った後、 (1)のアニメーションも含め、すべてのjquery要素が使用できなくなってしまいました。 http://semooh.jp/jquery/api/events/live/type,+fn/ によればliveを使えばclick処理はできるとありましたが、これでも動きません。 setIntervalの効果や、submitイベントすら動きませんでした。なお、検索前は問題なく動作します。通常時は問題ないのですが、submit後からおかしいので、 ajaxに関してなにか見逃している箇所があるとは思うのですが、どこが悪いのかはっきりと検討がついていません。どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
JQueryはAJAXとは無関係？？
質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか？「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか？それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても（独自にプログラムを書いていなくても） AJAXの処理が行われているのでしょうか？ /************************************/ サーバへのリクエストはなくても、１つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。（※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね？） JQueryの技術情報のサイトを見ていると、よく「document.ready」と書かれていたりするソースを見かけますが、これはAjaxとは関係なく（通信とは関係なく）、また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。（「Form、submit」とも関係がない） XMLHttpRequestも「HttpRequest」とあるわけですし、「Form、submit」を書いているときに行われるわけではないけれども、かわりに、「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか？
- ベストアンサー
- AJAX
jQueryでの、引数を取るJS関数の呼出方法
jQueryの学習をしています。 HTML & JavaScriptで下記のように書かれているコード <input type=button id=button1 onclick=func_a() /> <script> function func1(){ //処理いろいろ } </script> は、jQueryを使って書くと、 $('#button1').live('click', func_a); このように書けます。 <input type=button id=button1 onclick=func_b(arg1, arg2) /> <script> function func_b(argument1, argument2){ //処理いろいろ } のように引数を取る関数は jQueryではどのように書けばよいのでしょうか？ $('#button1').live('click', func_b(arg1, arg2)); とは書けなかったので、今は、 if (arg1 == xxx){ $('#button1').live('click', func_b_1_1); } else { $('#button1').live('click', func_b_1_2); } などのように引数別に同じような関数を創って書いています。 DRY原則という同じコードを二度書くなという約束もあるようなので、きっといい方法があると思うのですが、お詳しい方、教えていただけるとうれしいです。どうぞ、よろしくお願いいたします。
- ベストアンサー
- JavaScript
Jqueryを使って値の合計を簡単に算出したい
複数のフィールドに設定されている値を特定のイベント発生時に合算しています。現在は、それぞれの項目をひとつづつ加算し合計を算出していたのですが、項目が徐々に増えてきており、項目を増やすたびに計算を修正しないといけない為、これをどうにかして一括処理できないか考えています。いろいろ調べるとJqueryではセレクタというものがあり、IDやCLASS等を前方一致で引っ掛けて一括処理できるようなのですが、いまいち処理方法がわかりません。いろいろなサンプルを試したのですが、条件に合致した部分に何かを設定するものばかりで、その項目の値を取得して処理をするようなイメージがつかめません。セレクタにこだわってはいません。動的に増える項目を関数化した処理で一括で合算したいのですがなにかよい方法はないでしょうか？
- 締切済み
- JavaScript
Jquery.ajaxでHTML読み込み
現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか？下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。
- 締切済み
- JavaScript
jQuery IEでctrl + click判別
jQueryは2.0.0を使用しております。 HTMLのpタグでくくった要素をクリックした際の判別を行いたいと思っております。以下は参考となりますが、 <p class="button">ボタン</p> 上記のボタンをクリックしたことを取得するため、 $(".button").click(function(event) { alert("アラート"); }); こちらでアラートが表示されるようになりましたが、 crtlキー + クリックしたことを取得したいと思っております。上記の処理でアラート部分を if (event.ctrlKey){ alert("アラート"); } としますと、Chrome、Firefoxの最新版でアラートが表示されますが、 IEでは表示されません。（私は、IE11、9で確認済みです） IEでもctrl + clickされたことを取得できるようにしたいのですが、ご教授いただけますと幸いです。
- ベストアンサー
- JavaScript