※ ChatGPTを利用し、要約された質問です(原文:ASP.NETでAjax通信する際について)
ASP.NETでAjax通信する際に注意すべきポイント
このQ&Aのポイント
ASP.NET MVC3を使用してWEB画面でAjax通信を行う方法について説明します。
非同期通信の成功時にAjax応答のデータを取得する方法について教えます。
Ajax通信で返されたデータが空の場合と正常な場合の処理について説明します。
はじめまして。
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通信の応答文字列が取得できるか教授お願いします。
お礼
shockatzさん お世話になります。 回答が遅くなり申し訳ありません。 自宅では環境がないため確認に時間を費やしてしまいました。 教えていただいた上記のやり方でJavaScriptのオブジェクトが取得できました。 本当にありがとうございます。 あと余談ですがdata.titleの箇所でdata.を打ち込んだ時点でインテリセンス機能が働くかと 思いましたが機能しなかったのは意外でした。一応、取得はできたのでよかったのですが。。