はじめまして。
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通信の応答文字列が取得できるか教授お願いします。
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>
の2行は不要。
あと、蛇足だけど、javascript読み込みはドキュメントルートかヘルパ記述にしないと、パスが狂って大変じゃないかと。
<script src="/Scripts/jquery.min.js" type="text/javascript"></script>
とか、
<script src='@Url.Content("~/Scripts/jquery.min.js")' type="text/javascript"></script>
みたいに。
hockatzさん。お世話になります。
アドバイスありがとうございます。
しかし、不要な2行を削除してもget_data()メソッドでコンパイルエラーになってしまいます。
依然、原因は不明なままです。
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になってますよね?
shockatzさん
お世話になります。
回答が遅くなり申し訳ありません。
自宅では環境がないため確認に時間を費やしてしまいました。
教えていただいた上記のやり方でJavaScriptのオブジェクトが取得できました。
本当にありがとうございます。
あと余談ですがdata.titleの箇所でdata.を打ち込んだ時点でインテリセンス機能が働くかと
思いましたが機能しなかったのは意外でした。一応、取得はできたのでよかったのですが。。
No.3
- 回答日時:
iQuery Ajax を使って web サービスもしくは WCF サービスを呼び出すようにしてはいかがですか? 自分のブログで恐縮ですが、具体例は以下の URL のページにあります。
呼び出すのは web サービスのメソッドでなくても、ページの静的メソッドでも可能です。
参考URL:http://surferonwww.info/BlogEngine/post/2011/06/ …
WebSurferさん
お世話になります。
回答と参考URLありがとうございます。
ただ解読に時間がかかりそうなのでゆっくり拝見させてもらいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryでのkeydownイベント発生...
-
文字サイズの大中小について
-
画像をゆっくりと切り替える方法
-
日本語記述が出来ません(XML?)
-
外部JSファイルで値を受け取る方法
-
音楽再生用jQueryプラグイン「j...
-
jQueryの基本的なことについて...
-
jQuery-datepicker on IE8
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
pythonのWebスクレイピングでfi...
-
条件分岐で、読み込む外部スク...
-
Safariで<iframe>のinnerHTMLを...
-
bodyにidをつける理由は何ですか?
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
リンクをクリックすると文字が...
-
ウィンドウ名の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
jqueryでのkeydownイベント発生...
-
Jqueryの干渉について
-
Base64に変換したHTMLの<script...
-
プラグイン無しでContactform7...
-
jQuery-datepicker on IE8
-
サイトにアクセスした際、数秒...
-
jQuery が動作しません。
-
javaスクリプトについて質問で...
-
jQueryでloadした要素の操作が...
-
jqueryについて(Lightboxとbxs...
-
scrollsmoothly.jsが動かない
-
JavaScriptで背景や文字色を色→...
-
jQuery UIのdraggableについて
-
colorboxの直接呼び出し方法に...
-
「jquery.csv2table.js」から生...
-
●jQuery;スクロールでついてく...
-
jQueryのdraggable縦書き出来ま...
-
Camera slideshowの使い方について
おすすめ情報