跳至頁尾內容
使用 IRONBARCODE

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

在當今快節奏的數位化環境中,二維碼的生成已成為高效資訊共享的重要工具。 這些緊湊的二維條碼能夠儲存各種數據,包括網址、文字、聯絡資訊、產品詳情等等,在現代通訊中發揮關鍵作用。 將二維碼生成功能整合到您的 ASP.NET MVC 應用程式中,您可以透過無縫生成二維碼來增強用戶體驗,簡化交互,並促進輕鬆的資訊交換,從而賦能用戶。

如果您正在開發 ASP.NET MVC 應用程式並希望整合二維碼產生功能, IronBarcode是一個優秀的函式庫,可以簡化流程。 本文將探討如何使用 Iron Barcode 函式庫在 ASP.NET MVC 中產生二維碼。

IronBarcode。

IronBarcode 是一個功能強大且功能豐富的 .NET 應用程式二維碼產生和識別函式庫。 借助 IronBarcode,開發人員可以輕鬆地將條碼和二維碼功能整合到他們的 ASP.NET MVC 專案中,包括產生二維碼的功能。 該庫提供了一套全面的工具和 API,簡化了創建和自訂二維碼的過程,使開發人員能夠根據自己的特定需求進行自訂。

IronBarcode 為各種條碼類型(包括二維碼)提供廣泛的支持,使其成為需要二維碼生成功能的專案的理想選擇。 它為開發者提供了靈活性,可以指定要編碼的數據,控制生成的二維碼的大小和分辨率,甚至添加顏色和徽標等視覺樣式元素。 此函式庫可確保產生高品質的條碼,並精確控制二維碼外觀的各個方面。

除了產生二維碼之外,IronBarcode 還包含強大的條碼讀取和解碼功能。 它支援掃描和提取二維碼中的數據,使應用程式能夠處理其中編碼的資訊。 此功能適用於需要條碼掃描和資料提取的場景,例如庫存管理、票務系統和行動應用程式。

現在,讓我們建立一個項目,在 ASP.NET Core MVC Web 應用程式中產生二維碼。

設定專案

在深入探討實作細節之前,讓我們確保您的 ASP.NET MVC 專案已設定完畢並準備就緒。 無論您是開始一個新項目還是處理現有項目,以下步驟將引導您完成將 Iron Barcode 庫整合到您的應用程式中的過程。 就我而言,我創建了一個新專案。

建立新專案的步驟如下:

  1. 開啟 Microsoft Visual Studio 2022。
  2. 在起始頁上,點選"建立新專案",或從頂部選單中選擇"檔案">"新建">"專案"。
  3. 在"建立新項目"視窗中,您將看到不同的項目範本可供選擇。 選擇專案範本"ASP.NET Core Web 應用程式(模型-視圖-控制器)",然後按一下"下一步"。
  4. 輸入項目名稱和地點。 選擇電腦上適當的位置儲存項目檔案。
  5. 選擇所需的框架版本。 Visual Studio 通常會建議使用最新的穩定版本,但如果需要,您可以選擇其他版本。 我選擇了.NET 7。
  6. 根據您的需求,自訂任何其他項目設置,例如身份驗證選項或項目資料夾。
  7. 點選"建立"按鈕建立項目。

Visual Studio 隨後將產生專案文件並開啟解決方案資源管理器,您可以在其中查看專案結構並開始編寫程式碼。

如何在 ASP.NET MVC 中產生二維碼:圖 1

現在,我們需要將 Iron 條碼庫安裝到我們的應用程式中。

安裝 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; }
}
$vbLabelText   $csharpLabel

建立二維碼控制器

在您的 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();
    }
}
$vbLabelText   $csharpLabel

這段程式碼設定了一個可以產生二維碼的控制器。 當呼叫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?}"
);
$vbLabelText   $csharpLabel

這將把預設路由從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);
$vbLabelText   $csharpLabel

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

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

結論

在 ASP.NET MVC 中,整合 IronBarcode 非常簡單。 它提供了一個用戶友好的介面,使用戶可以輕鬆使用二維碼。 透過利用 IronBarcode,您可以添加二維碼功能來增強您的應用程序,使用戶能夠輕鬆共享和存取資訊。 IronBarcode 是一個很有價值的函式庫,它簡化了在 ASP.NET MVC 中產生二維碼和讀取二維碼的過程。 它使開發者能夠創建動態應用程序,利用二維碼的強大功能實現高效的資料共享和檢索。

Iron Barcode 可供個人免費使用。 但是,如果用於商業用途,則需要購買其商業許可證,該許可證附帶免費試用版。 如果您購買完整的鐵人套裝,還可以享受大幅折扣。 Iron Suite 是一套全面的 .NET 軟體元件,旨在簡化開發任務並增強功能。 它提供了五個強大的庫,包括 Iron Barcode、 IronOCRIronPDFIronXLIron Webscraper ,使開發人員能夠無縫地處理條碼、光學字元識別、PDF 處理、Excel 和 CSV 檔案。 如果您選擇購買完整的 Iron Suite 套裝,您將以兩件產品的價格獲得全部五件產品。

常見問題解答

如何在 ASP.NET MVC 中建立二維碼?

您可以透過在 Visual Studio 中設定項目,透過 NuGet 使用Install-Package IronBarCode命令安裝 IronBarcode 庫,然後在控制器中使用 IronBarcode 的類別產生二維碼並將其顯示在視圖中,從而在 ASP.NET MVC 中建立二維碼。

我可以自訂應用程式中二維碼的外觀嗎?

是的,IronBarcode 可讓您透過調整大小、解析度、顏色以及添加徽標或註釋來自訂二維碼,從而增強二維碼的視覺吸引力和功能性。

如何在 ASP.NET MVC 視圖中顯示二維碼?

使用 IronBarcode 產生二維碼後,您可以將圖像 URL 儲存在 ViewBag 中,並在 Razor 視圖中使用 HTML <img>標籤來呈現二維碼圖像,從而在 ASP.NET MVC 視圖中顯示該二維碼。

如何使用 .NET 應用程式解碼二維碼?

您可以使用 IronBarcode 在 .NET 應用程式中解碼 QR 碼,它提供了掃描和提取各種條碼格式(包括 QR 碼)資料的功能,使其適用於庫存管理和票據驗證等應用程式。

IronBarcode庫有免費版本嗎?

IronBarcode 可供個人免費使用,開發者可以藉此試驗並測試其各項功能。商業用途則需要購買許可證,許可證提供免費試用版供評估。

QR碼在ASP.NET MVC專案有哪些應用?

在 ASP.NET MVC 專案中,二維碼可用於快速存取網站、非接觸式支付、票務、庫存管理和行動應用程式集成,從而增強用戶互動和資訊傳播。

如何設定用於產生二維碼的 ASP.NET MVC 專案?

若要設定用於產生二維碼的 ASP.NET MVC 項目,請使用 Visual Studio 建立新的 ASP.NET Core Web 應用程序,並使用「模型-視圖-控制器」模板,然後安裝 IronBarcode 庫,即可開始在應用程式中產生二維碼。

Iron Suite 包含哪些函式庫?

Iron Suite 包含各種 .NET 庫,例如 Iron Barcode、Iron OCR、Iron PDF、Iron XL 和 Iron Webscraper,每個庫都提供專門的功能,用於條碼生成、光學字元辨識、PDF 處理、Excel 處理和網路抓取等任務。

柯蒂斯·週
技術撰稿人

Curtis Chau擁有卡爾頓大學電腦科學學士學位,專長於前端開發,精通Node.js、TypeScript、JavaScript和React。他熱衷於打造直覺美觀的使用者介面,喜歡使用現代框架,並擅長撰寫結構清晰、視覺效果出色的使用者手冊。

除了開發工作之外,柯蒂斯對物聯網 (IoT) 也抱有濃厚的興趣,致力於探索硬體和軟體整合的創新方法。閒暇時,他喜歡玩遊戲和製作 Discord 機器人,將他對科技的熱愛與創造力結合。