-PR-
  • 困ってます
  • 質問No.7670522
解決
済み

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

  • 閲覧数1290
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 61% (59/96)

はじめまして。

ASP.NET MVC3を使用して
WEB画面で1つのテキストボックスに値を入れ検索ボタンを押した時に
その値をキーに該当するデータをメッセージ画面として出力。
該当するデータがなければ「該当データがありません。」のメッセージを
表示する処理の簡単な検証しており以下のように記述しています。

<View側の処理>
----------------------------------------------------------------------------------
<html>
<head>
<title>Form</title>
<!--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>
<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通信の応答文字列が取得できるか教授お願いします。
通報する
  • 回答数3

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

  • 回答No.2
レベル11

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

うーん。。
よく見れば、このコードは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になってますよね?
お礼コメント
eiki0520

お礼率 61% (59/96)

shockatzさん

お世話になります。
回答が遅くなり申し訳ありません。

自宅では環境がないため確認に時間を費やしてしまいました。
教えていただいた上記のやり方でJavaScriptのオブジェクトが取得できました。

本当にありがとうございます。

あと余談ですがdata.titleの箇所でdata.を打ち込んだ時点でインテリセンス機能が働くかと
思いましたが機能しなかったのは意外でした。一応、取得はできたのでよかったのですが。。
投稿日時 - 2012-09-13 23:14:40
-PR-
-PR-

その他の回答 (全2件)

  • 回答No.1
レベル11

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

コードを拝見すると、ASP.NET MVC1時代ふうのAjax通信なので、 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery ...続きを読む
コードを拝見すると、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>

の2行は不要。
あと、蛇足だけど、javascript読み込みはドキュメントルートかヘルパ記述にしないと、パスが狂って大変じゃないかと。

<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
とか、
<script src='@Url.Content("~/Scripts/jquery.min.js")' type="text/javascript"></script>

みたいに。
お礼コメント
eiki0520

お礼率 61% (59/96)

hockatzさん。お世話になります。

アドバイスありがとうございます。

しかし、不要な2行を削除してもget_data()メソッドでコンパイルエラーになってしまいます。
依然、原因は不明なままです。
投稿日時 - 2012-09-03 20:40:07
  • 回答No.3
レベル9

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

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

呼び出すのは web サービスのメソッドでなくても、ページの静的メソッドでも可能です。
お礼コメント
eiki0520

お礼率 61% (59/96)

WebSurferさん

お世話になります。

回答と参考URLありがとうございます。
ただ解読に時間がかかりそうなのでゆっくり拝見させてもらいます。
投稿日時 - 2012-09-13 23:16:04
  • 回答数3
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ