はじめに
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呼び出しも可能です。