ASP.NET MVCでQRコードを生成する方法

Iron Barcodeのインストール

まず、Visual Studioでパッケージマネージャーコンソールを開き、以下のコマンドを実行します。

Install-Package IronBarCode

このコマンドは、Iron Barcodeライブラリをインストールし、プロジェクトに必要な参照を追加します。

! ASP.NET MVCでQR コードを生成する方法: 図 2

さて、QRコードを作成するためのコードを書きましょう。

QRCodeModelの作成

Modelsフォルダ内にモデルクラスを作成し、以下のコードを書きます。

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

QRコードコントローラーの作成

ASP.NET MVCプロジェクトで、QrCodeControllerという新しいコントローラーを作成します。 プロジェクトの構造のControllersフォルダを右クリックし、"追加"、"コントローラー"を選択します。利用可能なオプションから"MVC Controller - Empty"を選択します。

QrCodeControllerに以下のコードを書きます。

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

このコードはQRコードを生成できるコントローラーを設定します。 CreateQRCodeアクションが呼び出されると、QRコードのテキストを取得し、QRコードの画像を生成し、保存し、表示用のURLをビューに提供します。 詳細は次のとおりです：

• コントローラーには、Webホスティング環境にアクセスするためのIWebHostEnvironment パラメータを受け取るコンストラクターがあります。
• CreateQRCodeアクションはビューを返します。
• [HttpPost]属性を持つCreateQRCodeアクションは、QRコードテキストを含むQRCodeModelパラメータを取ります。
• アクション内で、Iron BarcodeライブラリのQRCodeWriterクラスを使用してQRコードが生成されます。
• 生成されたQRコードは、WebルートパスのGeneratedQRCodeというフォルダにPNG画像ファイルとして保存されます。
• GeneratedQRCodeフォルダが存在しない場合は作成されます。
• 保存されたQRコード画像のファイルパスとURLが生成されます。
• QRコード画像のURLはViewBag.QrCodeUri プロパティに格納され、ビューで使用されます。
• プロセス中に発生する例外はすべてキャッチされ、ログに記録されます。

CreateQRCodeビューの追加

次に、新しいビューを追加するには、QrCodeControllerクラスのCreateQRCodeアクションメソッドを右クリックします。 "ビューの追加"を選択し、"Razorビュー"を選択し、"追加"ボタンをクリックします。

! ASP.NET MVCでQR コードを生成する方法: 図 3

下図のように新しいウィンドウが表示されます。

! ASP.NET MVCでQR コードを生成する方法: 図 4

ビューの名前を書き、テンプレート"作成"を選択し、新しく作成したモデルクラスQRCodeModelを選択します。 追加ボタンをクリックします。 ビューが作成されます。 表示を下記のコードに置き換えます。

@model QRCodeModel

@{
    ViewData["Title"] = "CreateQRCode";
}

<h1>Create QRCode in ASP.NET MVC</h1>

<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
            <div class="form-group">
                @if (ViewBag.QrCodeUri != null)
                {
                    <img src="@ViewBag.QrCodeUri" class="img-thumbnail" alt="Generated QR Code" />
                }
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Program.csクラスに移動し、デフォルトのコントローラルートを変更します。

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

これにより、デフォルトのルートがHomeControllerからQrCodeControllerに変更されます。

プロジェクトをコンパイルして実行します。

出力

! ASP.NET MVCでQR コードを生成する方法: 図 5

テキストボックスにテキストを入力し、作成ボタンをクリックします。 QRコードが作成され、以下に示すように画面に表示されます。

! ASP.NET MVCでQR コードを生成する方法: 図 6 - ASP.NETでのQRコード

次に、注釈テキスト、QRコード値の追加、QRコードの色の変更を行い、バーコードにビジュアルスタイリングを追加します。

QRコードのビジュアルスタイリングの追加

CreateQRCodeアクションメソッドの中に次のコード行を追加します。

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

プロジェクトを実行し、QRコードを生成します。

! ASP.NET MVCでQR コードを生成する方法: 図 7 - QR コードの生成