ASP.NETでAjax通信する際に注意すべきポイント

2012/08/29 22:44

このQ&Aのポイント

ASP.NET MVC3を使用してWEB画面でAjax通信を行う方法について説明します。
非同期通信の成功時にAjax応答のデータを取得する方法について教えます。
Ajax通信で返されたデータが空の場合と正常な場合の処理について説明します。

ASP.NETでAjax通信する際について

はじめまして。 ASP.NET MVC3を使用して WEB画面で1つのテキストボックスに値を入れ検索ボタンを押した時にその値をキーに該当するデータをメッセージ画面として出力。該当するデータがなければ「該当データがありません。」のメッセージを表示する処理の簡単な検証しており以下のように記述しています。＜View側の処理＞ ---------------------------------------------------------------------------------- <html> <head> <title>Form</title>  <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> <script type="text/javascript" language ="javascript"> // 非同期通信の成功時に呼び出されるイベント・ハンドラ function disp(context) { var data = context.get_data(); if (data == "") { // データが返されなかった場合は、その旨をメッセージ表示 window.alert("該当するデータがありません。"); } else { // データが正しく返された場合のみ、検索結果をダイアログ表示　var result = eval("(" + context.get_data() + ")"); var builder = new Sys.StringBuilder(); builder.append("タイトル：" + result.title); window.alert(builder.toString("\r")); } } </script> </head> <body> <div> @using(Ajax.BeginForm( "Search", new AjaxOptions {OnSuccess = "disp"})){ @Html.TextBox("isbn", "") <input type="submit" value="検索" /> } </div> </body> </html> --------------------------------------------------------------------------------- ＜サーバ側の処理＞ ---------------------------------------------------------------------------------- public ActionResult Form() { return View(); } //［検索］ボタンのクリック時に呼び出され、検索処理を実行 public ActionResult Search(String isbn) { // リクエストがAjax通信（非同期通信）である場合のみ検索を実行 if (Request.IsAjaxRequest()) { var _db = new MyMvcEntities(); var bok = (from b in _db.Book where b.isbn == isbn select new { b.title }).FirstOrDefault(); return Json(bok); } else { // リクエストがAjax通信以外の場合、何もしない return new EmptyResult(); } } } ---------------------------------------------------------------------------------- submit実行時にサーバ側でキーを取得しAjax通信が成功した場合はビュー側に記載しているDisp関数により取得値の出力を行う想定ですがここで var data = context.get_data();と定義し Sys.Mvc.AjaxContextオブジェクトのdataプロパティより応答文字列を取得しようとすると「オブジェクトは 'get_data' プロパティまたはメソッドをサポートしていません。」のメッセージが出力され処理が中断します。実際にget_dataのインテリセンス機能が働きません。どうすればAjax通信の応答文字列が取得できるか教授お願いします。

eiki0520
お礼率61% (59/96)

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

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

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

ベストアンサー

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

2012/09/05 17:55 回答No.2

うーん。。よく見れば、このコードはMVC1時代のものですよね。戻り値がstringで、それをeval()するために、Javascript側のライブラリを使用している。かつてMSは、Ajaxライブラリとしてけっこうリジットなオブジェクトモデルを提供していましたが、いまはほとんどjQuery任せになっているので、MVC3時代のMicrosoftAjax.jsには、すでにそのようなオブジェクトは存在していないのかもしれません（推測で失礼）。僕自身は、MicrosoftAjax.js、MicrosoftMvcAjax.jsは全く使ってないです。いっそ、完全にMVC3スタイルで組んだらどうですか？ jQueryも特に使ってなさそうなので削除、 <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> として、コールバックを変更。 <script type="text/javascript" language ="javascript"> function disp(data) { 　if (data == "" || data==null) { 　　alert("該当するデータがありません。"); 　} else { 　　alert("タイトル：" + data.title); 　} } </script> 正しくJSONを戻していれば、これだけでJavascriptのオブジェクトが取得できるはずです。あとエンコーディングはutf-8になってますよね？

質問者

お礼 2012/09/13 23:14

shockatzさんお世話になります。回答が遅くなり申し訳ありません。自宅では環境がないため確認に時間を費やしてしまいました。教えていただいた上記のやり方でJavaScriptのオブジェクトが取得できました。本当にありがとうございます。あと余談ですがdata.titleの箇所でdata.を打ち込んだ時点でインテリセンス機能が働くかと思いましたが機能しなかったのは意外でした。一応、取得はできたのでよかったのですが。。

その他の回答 (2)

WebSurfer
ベストアンサー率55% (33/59)

2012/09/08 11:07 回答No.3

iQuery Ajax を使って web サービスもしくは WCF サービスを呼び出すようにしてはいかがですか？　自分のブログで恐縮ですが、具体例は以下の URL のページにあります。呼び出すのは web サービスのメソッドでなくても、ページの静的メソッドでも可能です。

参考URL：: http://surferonwww.info/BlogEngine/post/2011/06/04/jQuery-AJAX-and-Web-Service.aspx

質問者

お礼 2012/09/13 23:16

WebSurferさんお世話になります。回答と参考URLありがとうございます。ただ解読に時間がかかりそうなのでゆっくり拝見させてもらいます。

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

2012/08/31 03:34 回答No.1

コードを拝見すると、ASP.NET MVC1時代ふうのAjax通信なので、 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> の２行は不要。あと、蛇足だけど、javascript読み込みはドキュメントルートかヘルパ記述にしないと、パスが狂って大変じゃないかと。 <script src="/Scripts/jquery.min.js" type="text/javascript"></script> とか、 <script src='@Url.Content("~/Scripts/jquery.min.js")' type="text/javascript"></script> みたいに。

質問者

お礼 2012/09/03 20:40

hockatzさん。お世話になります。アドバイスありがとうございます。しかし、不要な２行を削除してもget_data()メソッドでコンパイルエラーになってしまいます。依然、原因は不明なままです。

ASP.NETでAjax通信する際に注意すべきポイント

ASP.NETでAjax通信する際について