MVC5 Ajax.BeginForm()を利用するための手順

はじめに

MVC5でAjaxを使って遅延読み込みをしようと思い、Ajaxヘルパーを使ってみたら色々と手こずったので、それについてまとめます。

Ajax通信にならない

@using (Ajax.BeginForm("AjaxList","Person",
    new AjaxOptions {
        HttpMethod = "POST",
        UpdateTargetId = "table-1"
    }))
{
    <button type="submit" value="更新"></button>
}

AjaxHelperの拡張メソッドにBegingForm()があり、こんな感じでHtml.BeginFormと似た感覚で簡単にAjax通信・・・と思いきや、Action側を見てみるとAjax通信になっていない。

public PersonControler : Controller
{
    public async Task<ActionResult> AjaxList()
    {
        if (!Request.IsAjaxRequest())
        {
            // ここに入ってくる
        }
    }
}

パッケージの参照が足りなかった

色々と調べた結果、Microsoft.jQuery.Unobtrusive.Ajax の参照がないことが原因でした。

パッケージを追加しないと動かないメソッドが System.Web.Mvc.Ajax.AjaxExtensionsの拡張メソッドに含まれてるのって罠ですよね。

ビューでjsの参照が足りなかった

Microsoft.jQuery.Unobtrusive.Ajaxを追加したのに、まだ、Ajaxにならない。

Microsoft.jQuery.Unobtrusive.Ajaxをインストールすると

• jquery.unobtrusive-ajax.js
• jquery.unobtrusive-ajax.min.js

の2つのjavascriptがScriptsフォルダに追加されています。

MVCに慣れている人には当たり前すぎるかもしれませんが、ビュー側で追加されたjavascriptの参照を追加しないといけません。

そこで、validateにならって、ajaxもBundleに追加。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    　              "~/Scripts/jquery.validate*"));

        // Ajax通信用に追加
        bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
                    "~/Scripts/jquery.unobtrusive-ajax*"));
    }
}

レイアウトもしくは個別のビューに@Scripts.Render("~/bundles/jqueryajax")の追加も忘れずに。

これでAjax通信が動作するようになりました。