Help us understand the problem. What is going on with this article?

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('えらー');
        }
    });

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

nosa67
老害の高齢SEでーす。 おもにC#で業務アプリ作ってます。 今いる派遣先は開発をやめるとのことですので、だれか拾ってください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした