2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-03

#概要
.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);
}
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?