なか日記

一度きりの人生、楽しく生きよう。

トップ > ASP.NET > MVC5でAjax.BeginFormが使えなくてハマった件（恥ずかしい話）

MVC5でAjax.BeginFormが使えなくてハマった件（恥ずかしい話）

ASP.NET

ASP.NET MVCを勉強するぞ！って宣言したのっていつだっけと見返してみると、もう丸4ヶ月経つみたいですね。

進捗は163p/501pなので、約33%しか進んでません。単純計算でいくと今年中に完了ですが、さすがにそれはひどいのでもう少し時間取って勉強します。

で、ここからが本題。

Ajax.BeginFormを使って、ページ遷移なしの実装を試してみたのですが、ページ全体が更新されてしまいます。

結論（訂正）

単なる自分のミスでした（赤面

速攻で、しばやんからツッコんでもらった。

間違い1：算数ができてなかった

そもそも、jQueryのバージョンが1.10なのが問題みたいなことを書いてたけど、1.3<1.10でした。なので、1.10なのはまったく関係ないですね。

間違い2：そもそもパッケージを間違えてた

確かにいろいろやっててはっきり覚えてないけど、jquery.unobtrusive-ajax.jsをダウンロードしてインストールした気もする。

改めて、NuGetを使って試してみた。

PM> Install-Package jQuery.Ajax.Unobtrusive
依存関係 'Microsoft.jQuery.Unobtrusive.Ajax (≥ 2.0.20613.0)' の解決を試みています。
依存関係 'jQuery (≥ 1.4.4 && < 2.0)' の解決を試みています。
'Microsoft.jQuery.Unobtrusive.Ajax 2.0.20710.0' をインストールしています。
Microsoft.jQuery.Unobtrusive.Ajax を Microsoft からダウンロードします。このライセンス条項は http://go.microsoft.com/fwlink/?LinkID=227523 で参照できます。固有のライセンス条項がある追加の依存関係がパッケージに含まれていないかどうかを確認してください。パッケージおよび依存関係を使用することで、該当するライセンス条項に同意したものとみなされます。ライセンス条項に同意しない場合は、関係のあるコンポーネントをデバイスから削除してください。
'Microsoft.jQuery.Unobtrusive.Ajax 2.0.20710.0' が正常にインストールされました。
'jQuery.Ajax.Unobtrusive 2.0.20710.0' をインストールしています。
jQuery.Ajax.Unobtrusive を Microsoft からダウンロードします。このライセンス条項は http://www.microsoft.com/web/webpi/eula/aspnetcomponent_rtw_enu.htm で参照できます。固有のライセンス条項がある追加の依存関係がパッケージに含まれていないかどうかを確認してください。パッケージおよび依存関係を使用することで、該当するライセンス条項に同意したものとみなされます。ライセンス条項に同意しない場合は、関係のあるコンポーネントをデバイスから削除してください。
'jQuery.Ajax.Unobtrusive 2.0.20710.0' が正常にインストールされました。
'Microsoft.jQuery.Unobtrusive.Ajax 2.0.20710.0' を WebApplication2 に追加しています。
'Microsoft.jQuery.Unobtrusive.Ajax 2.0.20710.0' が WebApplication2 に正常に追加されました。
'jQuery.Ajax.Unobtrusive 2.0.20710.0' を WebApplication2 に追加しています。
'jQuery.Ajax.Unobtrusive 2.0.20710.0' が WebApplication2 に正常に追加されました。

それでもうまくいかないので、改めてしばやんに助けを求めた。

えっ？パッケージが違う？確かに、こっちをインストールするとちゃうと動いた。

じゃぁ、自分が入れようとしたのは何よ？ということで、確認すると…

Legacy package, jQuery.Ajax.Unobtrusive is now included in the 'Microsoft.jQuery.Unobtrusive.Ajax' package.

れ、れがしーぱっけーじ(´Д`)

教訓

  • NuGet使おう
  • パッケージを確認してインストールしよう

所感

恥ずかしいのひと言。でも、おかげで変な理解したままにならなくて良かったです。しばやんのおかげですね。

6月に松山に来られたときには最後までお付き合いしようと思います。

以下は見なくていいです（恥ずかしいから）

結論（最初）

Visual Studio 2013のASP.NETプロジェクトで初期作成時に追加されてたjQueryのバージョンが1.10になってて、Ajaxでデータ取得&反映する処理が動いていませんでした。

必要なことは以下の2点かな。

  • jquery.unobtrusive-ajax.jsを追加する
  • jQueryのバージョンを1.3以上にする

解決までの経緯

Ajax.BeginFormの使い方は間違ってないし、コントローラではPartialViewを返してるしなんでやねん！

MVC5やからなんか違うんかいのう？とググったり*1、ダウンロードした本のサンプルソースを見てみたりしたけどさっぱりわからん*2。

ここで足踏みしてても仕方ないので、一旦いじったソースをブランチによけといて先に進もうとしたところ、あの人からこんなツイートが！

そうか、その手があったか！とGitHubにリポジトリを作って速攻push。ここやねんっていう話をするためにいらないファイルを削除して…などしながら、ふとJavaScriptのデバッグができるのを思い出した（おい

Chromeでデバッグ実行してみると、jquery.unobtrusive-ajax.jsの

$("form[data-ajax=true] input[type=image]").live("click", function (evt) {

でliveメソッドがないってエラー出てた(´▽｀)

liveメソッドってなんぞ？とググってみると、

jQuery1.3で実装されたメソッドっぽい。で、プロジェクトのjQueryのバージョンを見てみると・・・

ﾎﾟﾎﾟﾎﾟﾎﾟﾎﾟ(　ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾟдﾟ)ﾎﾟｶｰﾝ…

1.10じゃないか！というわけで、さっそく Update-Package jQueryしてみたら2.10に更新された。

そして実行してみると、あっさり動いちゃった・・・

なんで1.10なの？

いじってる間になんかやらかしたのかと思い、新規ASP.NETプロジェクトを作成してみましたが、やはりjQueryのバージョンは1.10でした。

なんで新しめのバージョンじゃないんだろう？

無駄にハマらないために

プロジェクト作成したら速攻で、Update-Pachageするのがいいのかもしれない。

余談

あの人にお礼したらネタにされてた

プログラミングMICROSOFT ASP.NET MVC (Microsoft Press)

プログラミングMICROSOFT ASP.NET MVC (Microsoft Press)

*1:ビングってなかったわ

*2:4時間くらい悩んだ