ASP.NET Core Razor Pagesで Web APIを定義する

はじめに

ASP.NET Core Razor PagesのプロジェクトにWeb APIを定義する方法を示します。

環境は、ASP.NET Core Razor Pages + .NET 6です。

ここで定義するWeb APIは、与えられた文字列をQRコードに変換するAPIです。「ASP.NET Core(C#)でQRコードを生成しブラウザに表示する」での記事で利用したQrCoderパッケージを使ってQRコードを作成します。

NuGetを使いQRCoderパッケージインストールする

QRCoderは、C＃.NETで記述されたQRコードを作成するライブラリです。とても簡単なコードで、QRコードを生成できます。.NET Framework にも、.NET Core系にも対応しています。

NuGetパッケージマネージャーを使いQRCoderパケージをインストールします。
csprojファイルに、以下の記述を追加します。Visual Studio の NuGetの機能を使ってインストールしてもOKです。

  <ItemGroup>
      <PackageReference Include="QRCoder" Version="1.4.3" />
  </ItemGroup>

QRコード（PNG画像）を返すAPIを定義する

では、WebAPIを定義してみましょう。

ASP.NET Core Razor Pages は、ASP.NET Core MVCと異なり、Controllerフォルダがデフォルト存在しないので、プロジェクトの下にControllerフォルダを作成し、QrCodeControllerクラスを定義します。

using Microsoft.AspNetCore.Mvc;
using QRCoder;

namespace QrCodeExample.Controller;

[Route("api/[controller]")]
[ApiController]
public class QrCodeController : ControllerBase
{
    public QrCodeController()
    {
    }

    [HttpGet()]
    public ActionResult Get([FromQuery] string text)
    {
        var qrGenerator = new QRCodeGenerator();
        var qrCodeData = qrGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);
        var bytes = qrCode.GetGraphic(10);
        return File(bytes, "image/png", "example.png");
    }
}

ここでは、パラメータtextを受け取り、この文字列をQRコードにしています。

これで、以下のようにAPIを呼び出しことができます。

https://localhost:7281/api/qrcode?text=サンプルプログラム

Web APIのコードは、ASP.NET Core MVCの場合と全くですね。

Program.csを変更する

しかし、ASP.NET Razor Pagesの場合は、これだけだとルーティングの設定が不足していて404　Not Foundになってしまいます。

そのため、以下のようにProgram.csを変更します。

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
// 次の行を追加. Web API を提供するために必
builder.Services.AddControllers();

... 省略 ...

app.MapRazorPages();
// 次の行を追加 （ルーティングの設定）
app.MapControllers();

cshtmlを変更

次に、QRコードをindexページに表示するようIndex.cshtmlを変更します。例えば以下のようにIndex.cshtmlを定義します。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">QRコードサンプル</h1>
    <img src="/api/qrcode?text=https%3A%2F%2Fqiita.com%2Fgushwell" />
</div>

上記例のtextパラメータは、https://qiita.com/gushwell をURLエンコードした値です。

実行する

では、実行してみます。

無事にAPI呼び出せたようです。

ここでは、imgタグのsrc属性でAPIを指定していますが、当然ですが、JavaScriptを使ったAjax呼び出しも可能です。