Asp.net coreで非同期でフォームデータを送信する

Posted on by 股下ニッパチ

こんにちは。ニッパチです。
最近ようやくあたたかくなり、日々快適に生活ができています。
今回はAsp.net coreのアプリケーションでjavascriptからフォームを送信する処理ついて書いていこうと思います。

処理

public class Person
{
    public string Name { get; set; }
    public int age { get; set; }
}
@{ Person person = new Person(); }
<form action="/Home/Download" name="form">
<input type="text" name="person.Name" />
<input type="text" name="person.Age" />
<button type="button" onclick="submitForm">送信</button>
</form>
<script>
function submitForm() {
    let formData = new FormData($('form[name="form"]');
    $.ajax({
        url: '/Home/Download',
        type: 'post',
        processData: false,
        data: formData,
    }).done(function (data) {
    }).fail(function () {
    })
</script>
public class HomeController: Controller
{
    public IActionResult Download(Person person)
    {
        personにデータが格納されている
    }
}

これでOK
processDataをfalseに指定してあげるのがポイントです。

感想

FormDataというクラスがあるのは知らなかったです。
今後も使う機会が多そうなので覚えておこうと思います。
余談ですが、今回コントローラー側では画像データを返す想定で実装しました。
ただjqueryのajaxだとバイナリデータがテキストとなって返ってきたため結局普通のXMLHttpRequestで実装しました。
こちらの方がリクエスト時もよくわからんプロパティを指定せずにいけたのでわかりやすかったです。

全然違う話ですがinputタグのタイプでdatetime-localてのができたらしくjavascripの実装無しでいい感じの日付入力ができるようになったらしいです。