.NET Core WebAppにおけるajax通信のメモ

概要

.NET Core WebAppにおいて、ajax通信をする際のクライアントサイド・サーバサイドのお作法を時々忘れてしまうので、
世の中には同じ方がおられるかもしれない、ということで忘備録としてまとめておきます。

クライアントサイド

・URLについて
「/Hoge/」については、C#プロジェクトの「Pages」フォルダ直下のフォルダ名を指定します。
「/Index/」は上記フォルダ直下のファイル名を指定します。
例: 「/Pages/Hoge/Index.cshtml.cs」ファイルにリクエストする場合、リクエストURLは「/Hoge/Index/」と指定します。
その後続けて「?handler=」(決り文句)を記述し、
「GetList」はサーバサイドのメソッド名を指定します。
パラメーターを追加する場合は、「&{キー}={値}」と連ねて記述できます。

POSTの場合は、typeに「POST」を指定し、
「data: JSON.stringify(オブジェクト指定)」プロパティを追加するだけの違いです。

$.ajax({
    type: 'GET',
    url: '/Hoge/Index/?handler=GetList&param1=1&param2=2',
    dataType: 'JSON',
    contentType: 'application/json; charset=utf-8',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    processData: true,
    cache: false,
}).done(function (data) {
    // OK時の処理
}).fail(function (data) {
    // NG時の処理
});

サーバサイド

・メソッド名のプレフィックスに「OnGet」を書く必要があります。
ただし、クライアントサイドからリクエストする場合は、「OnGet」は省略します。
例: メソッド名が「OnGetGetList」の場合、リクエスト先URLは「GetList」となります。

・返り値の型はIActionResultになります。

public IActionResult OnGetGetList(int param1, int param2)
{
    try
    {
    }
    catch (Exception e)
    {
    }

    return new JsonResult(json);
}