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

解決済

質問者：eiki0520
質問日時：2012/08/29 22:44
回答数：3件

はじめまして。

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通信の応答文字列が取得できるか教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： shockatz
回答日時：2012/09/05 17:55

うーん。

。
よく見れば、このコードは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になってますよね？

- 0
- 件

通報する

この回答へのお礼

shockatzさん

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

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

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

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

通報する

お礼日時：2012/09/13 23:14