如何在ASP.NET MVC中生成QR碼

安裝 Iron Barcode

首先，在 Visual Studio 中開啟套件管理器控制台，然後執行以下命令：

Install-Package IronBarCode

此命令將安裝 Iron Barcode 庫，並將必要的引用新增至您的專案。

如何在 ASP.NET MVC 中產生二維碼：圖 2

現在，讓我們編寫一些程式碼來創建二維碼。

建立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; }
}

Imports System.ComponentModel.DataAnnotations

Public Class QRCodeModel
	<Display(Name := "Enter QR Code Text")>
	Public Property QRCodeText() As String
End Class

建立二維碼控制器

在您的 ASP.NET MVC 專案中，建立一個名為QrCodeController新控制器。 為此，請右鍵單擊專案結構中的Controllers資料夾，選擇"新增"，然後選擇"控制器"。從可用選項中，選擇"MVC 控制器 - 空"。

在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();
    }
}

Imports Microsoft.AspNetCore.Mvc
Imports IronBarCode
Imports System.IO

Public Class QrCodeController
	Inherits Controller

	Private ReadOnly _environment As IWebHostEnvironment

	Public Sub New(ByVal environment As IWebHostEnvironment)
		_environment = environment
	End Sub

	Public Function CreateQRCode() As IActionResult
		Return View()
	End Function

	<HttpPost>
	Public Function CreateQRCode(ByVal generateQRCode As QRCodeModel) As IActionResult
		Try
			' Creating QR Code
			Dim barcode As GeneratedBarcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText)
			Dim path As String = System.IO.Path.Combine(_environment.WebRootPath, "GeneratedQRCode")

			If Not Directory.Exists(path) Then
				Directory.CreateDirectory(path)
			End If

			Dim filePath As String = System.IO.Path.Combine(path, "qrcode.png")
			barcode.SaveAsPng(filePath)

			Dim fileName As String = System.IO.Path.GetFileName(filePath)
			Dim imageUrl As String = $"{Me.Request.Scheme}://{Me.Request.Host}{Me.Request.PathBase}/GeneratedQRCode/{fileName}"

			ViewBag.QrCodeUri = imageUrl
		Catch ex As Exception
			' Handle exceptions
			' Log the exception details here for troubleshooting and debugging.
			Throw
		End Try

		Return View()
	End Function
End Class

這段程式碼設定了一個可以產生二維碼的控制器。 當呼叫CreateQRCode操作時，它會獲取二維碼的文本，生成二維碼圖像，保存該圖像，並在視圖中提供該圖像的 URL 以進行顯示。 更多詳情如下：

• 控制器有一個建構函數，該建構函數接受一個IWebHostEnvironment參數來存取 Web 託管環境。
• CreateQRCode操作傳回一個視圖。
• 具有[HttpPost]特性的CreateQRCode操作接受一個QRCodeModel參數，其中包含二維碼文字。
• 在操作內部，使用 Iron Barcode 庫中的QRCodeWriter類別產生二維碼。 產生的二維碼以 PNG 圖像檔案的形式保存在網站根路徑下的GeneratedQRCode資料夾中。
• 如果GeneratedQRCode資料夾不存在，則會建立該資料夾。
• 產生已儲存二維碼影像的檔案路徑和 URL。
• 二維碼圖像的 URL 儲存在ViewBag.QrCodeUri屬性中，以便在視圖中使用。
• 過程中發生的任何異常都會被捕獲並記錄。

新增CreateQRCode視圖

現在，若要新增視圖，請右鍵點選QrCodeController類別中的CreateQRCode操作方法。 選擇"新增視圖"，然後選擇"Razor 視圖"，並按一下"新增"按鈕。

如何在 ASP.NET MVC 中產生二維碼：圖 3

新視窗將如下所示。

如何在 ASP.NET MVC 中產生二維碼：圖 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類別並更改預設的 Controller Route。

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

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 中產生二維碼：圖 5

在文本框中輸入文本，然後按一下建立按鈕。 螢幕上將產生並顯示一個二維碼，如下圖所示。

如何在 ASP.NET MVC 中產生二維碼：圖 6 - ASP.NET 中的二維碼

現在，讓我們透過添加註釋文字、二維碼值和更改二維碼顏色來為條碼添加視覺樣式。

為二維碼添加視覺樣式

在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);

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

現在，運行專案並產生二維碼。

如何在 ASP.NET MVC 中產生二維碼：圖 7 - 產生二維碼