QA@IT

asp.net mvc Ajaxで部分更新されない

9343 PV

お世話になっております。ASP.NET MVC4.0(VS2012 VB)で開発をしております。

部分更新(Indexビューの「mainForm」ブロック)の処理を行いたく、
下記のAjax.BeginFormのコードを記述しましたが、ボタンを押した際、
意図に反して、「ajaxロード」のみが表示されてしまいます。
(レイアウトの読み込みもなく_Part.Viewのみ表示される)
部分更新させる為にはなにがいけないのでしょうか?ご教授下さい。

~View「Index.vbhtml」~
<h2>Index</h2>
@Using Ajax.BeginForm("Edit", New AjaxOptions With {.UpdateTargetId = "mainForm"})
    @<input type="submit" name="btnEdit" value="Edit">
End Using

<div id="mainForm"></div>

~View 「_Part.vbhtml」~
<div>ajaxロード</div>

~AjaxTestコントローラメソッド~
Function Index() As ActionResult
   Return View()
End Function

Function Edit() As ActionResult
   Return PartialView("_Part")
End Function

回答

AjaxTestコントローラのEdit()アクセスできているなら、
Index.vbhtmlに以下の二つがないからではないかと思います。

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

上記ファイルはすでにプロジェクト内にいると思います。

ソリューションエクスプローラのScripts配下にあるファイルを
編集中(VSのエディタで開いてる)のIndex.vbhtmlの中にドロップすればタグが勝手に出来上がります。
ひょっとしたらバージョンは1.8.2じゃないかもしれませんが、現在のプロジェクトにいるファイルをそのまま使って問題ないと思います。
タグの順番は上記の通りにしてください。
場所はまずは一番先頭(1行目)にして、動作確認してから考えればいいと思います。
Headの中とか、ページの最後(読み込み時間を気にする場合)に置くのがセオリーでしょうかね。

関係ないですが、個人的に検証用のコードに "Test" という文字列を使うのはやめておいた方がいいと思います。理由はテストコードと紛らわしくなるからです。
じゃぁどうするのかって話ですが、私は最近は Inspectとか Spikeとか使ってます。世の中的にどうなのかはよく知りません(むしろいい単語があったら教えてほしいぐらいです)。

編集 履歴 (0)
  • 御回答有難うごさいます。
    おっしゃる通り、「jquery.unobtrusive-ajax.min.js」
    の読み込みがなかったのが原因でした。
    -
  • 上記jsファイルですが何故か該当プロジェクトのScriptフォルダ上には見当たらなかった為、Nugetで最新の「Microsoft jQuery Unobtrusive Ajax」をインストール後、コード上で「jquery.unobtrusive-ajax.min.js」を読込ませると正常に動作しました。(尚、jqueryのバージョンは1.10.2でしたが特に問題はありませんでした。) -
  • "Test"ついてはお恥ずかしながら、まだテストフレームワークでの開発を導入できていないといった現状なので、そういう誤解をまねく表現という意識すらありませんでした。以後気を付けたいと思います。ありがとうございました。 -
  • 失礼しました。空のASP.NET MVC4プロジェクトだと追加されないですね。基本だと追加されるので勘違いしてました。 -
  • "Test"に関しては私は昔から検証用のコードをガンガン書くタイプで、しかもずっと「Test」と名前につけてたんですが、テストコードをよく書くようになった頃に紛らわしいなぁと自分で思っただけです。参考になれば幸いです。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。