RazorPageでAjax(axios)を利用する場合

概要

　今回はASP.NET CoreのRazorPageを利用した際のAjaxの利用についてです。

複数POSTのページモデルのハンドリング

　RazorPageでは複数のPOSTを実行する場合、submitボタンに「asp-page-handler="Send"」という属性を付けて利用します。その際、モデルページ側では「public IActionResult OnPostSend()」(非同期の場合は「public async Task OnPostSendAsync()」)という風に「OnPost」にハンドラー名を追加して受けます。

hoge.cshtml

<button type="submit" asp-page-handler="Send">送信</button>

hoge.cs

        public IActionResult OnPostSend()
        {
            ここに処理を記述して、結果を返す
        }

　Ajaxの場合も、上記と同じハンドラーをページモデルに記述します。

JavaScript

　上記の「OnPostSend」をAjaxで呼び出す場合、URLパラメータとして「?handler=Send」を追加します。ここではaxiosを利用した例を示します。
　この時、XSRF対策の為にページに埋め込まれているトークンをヘッダに設定して渡す必要があります。（これが無いとstatus:400のBadRequestが返ってきます。）　

hoge.js

    axios.post('/Hoge?handler=Send' , {
        hoge: 'hoge',
    }, {
        headers: {
            "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val(),
        }
    })
    .then(() => {
        // 成功の処理
        alert("送れたよ")
    })
    .catch(err => {
        // エラーの処理
        if (err.response) {
            alert('えらー');
        }
    });

ちょっとしたメモとして記述しておきます。