
如何在ASP.NET MVC中動態生成和顯示條碼
ASP.NET MVC是一個受歡迎的 Web 開發框架,可以讓開發者構建強大且動態的 Web 應用程式。 Web 應用程式中一個常見的要求是生成和顯示條碼圖像的能力。 條碼圖像用於以機器可讀格式表示資料,並可以由條碼掃描器讀取。
使用市場領先的 C# 程式庫 IronBarcode,可以在 ASP.NET MVC 中動態生成和顯示條碼圖像。 此程式庫提供 API,允許開發者輕鬆跨平台生成各種格式的條碼圖像,如 Code 39、Code 128 及 QR Code。 在不依賴遺留的 System.Drawing.Common 和 .NET Graphics API 的情況下,從 .NET 6 開始,這些都是Windows 特定的,IronBarcode允許跨平台功能並允許更高的源程式碼相容性。
IronBarcode
IronBarcode 是一個受歡迎的 .NET 條碼程式庫,提供了多種功能來建立、讀取和操作 .NET 應用程式中的條碼圖像。 該程式庫由 Iron Software 開發和維護,這家公司專注於 .NET 元件和程式庫。 IronBarcode 支援多種條碼格式,包括 Code 128、Code 39、QR Code、Data Matrix 和 PDF417。該程式庫還提供生成自訂維度、顏色和字體的條碼以及向條碼圖像新增文字和標誌的功能。
除了條碼生成之外,IronBarcode 還包括讀取和解碼條碼圖像的功能。 該程式庫可以從圖像、PDF 文件和實時攝像頭中讀取和解碼條碼。 它支援 1D 和 2D 條碼格式,甚至可以識別部分遮擋或損壞的條碼。
必要條件
在 .NET 應用程式中使用 IronBarcode 之前,有一些前提條件需要滿足。
- .NET Framework 或 .NET Core: IronBarcode 設計用於與 .NET Framework 和 .NET Core 配合使用。 確保您的開發環境已安裝適當的 .NET 版本。
- Visual Studio: IronBarcode可以與Visual Studio整合,使開發和測試變得簡單。 可以使用 Visual Studio Community, Professional 或 Enterprise 版本。 可以從Visual Studio網站下載。
- IronBarcode 程式庫: 從Iron Software 網站或透過 NuGet 套件管理器下載並安裝 IronBarcode 程式庫。 可以在 NuGet 套件管理器主控台中運行以下命令來安裝該程式庫:
Install-Package BarCode。
IronBarcode 是免費用於開發的,但必須授權才能用於商業和部署用途。 您可以嘗試免費試用版來測試其所有功能。
建立新的 ASP.NET MVC 專案
打開 Visual Studio 並點擊建立一個新專案。

在新視窗中,找到並選擇"ASP.NET MVC (Web App) Model View Controller",然後點擊下一步按鈕。

輸入新專案的名稱和位置,然後點擊下一步。

選擇您想使用的 .NET 版本並保持其他選項不變,然後點擊建立。

建立了一個 .NET 專案。

安裝IronBarcode
1. 使用 NuGet 套件管理器
此選項可在 Visual Studio 中使用,將直接安裝 IronBarcode 套件到您的解決方案中。 前往工具並點擊 NuGet 套件管理器,如圖所示。
using NuGet 套件管理器中的搜索框搜尋 IronBarcode 程式庫。 從可用套件列表中選擇 IronBarcode 選項。

2. 使用 Visual Studio 命令行
在 Visual Studio 選單中,前往工具 > NuGet 套件管理器 > 套件管理器控制台。

在包管理器控制台標籤中輸入以下行: Install-Package BarCode。
該套件將下載/安裝到當前專案並可供使用。

使用 IronBarcode 生成和顯示條碼圖像
現在我們的環境設置完成,可以開始編寫程式碼以在 ASP.NET MVC 中動態生成條碼圖像。
首先,在模型文件夾下建立一個名為 GenerateBarcodeModel.cs 的類
using System.ComponentModel.DataAnnotations;
namespace GenerateBarcodeMVCCore6_Demo.Models
{
public class GenerateBarcodeModel
{
[Display(Name = "Enter Barcode Text")]
public string Barcode { get; set; }
}
}Imports System.ComponentModel.DataAnnotations
Namespace GenerateBarcodeMVCCore6_Demo.Models
Public Class GenerateBarcodeModel
<Display(Name := "Enter Barcode Text")>
Public Property Barcode() As String
End Class
End Namespace在 wwwroot 文件夾下建立一個名為"GeneratedBarcode"的文件夾以儲存生成的條碼圖像。

在 'controllers' 文件夾中,將以下操作方法新增到 HomeController.cs 類中。
using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System;
using System.Drawing;
using System.IO;
namespace YourNamespace.Controllers
{
public class HomeController : Controller
{
private readonly IWebHostEnvironment _environment;
public HomeController(IWebHostEnvironment environment)
{
_environment = environment;
}
public IActionResult CreateBarcode()
{
return View();
}
// Handling POST operation inside this Action method
[HttpPost]
public IActionResult CreateBarcode(GenerateBarcodeModel generateBarcode)
{
try
{
// Create a barcode using the input text
GeneratedBarcode barcode = BarcodeWriter.CreateBarcode(generateBarcode.Barcode, BarcodeWriterEncoding.Code128);
// Adding annotation text to barcode
barcode.AddBarcodeValueTextBelowBarcode();
// Styling the Barcode
barcode.ResizeTo(400, 120);
barcode.ChangeBarCodeColor(Color.Red);
barcode.SetMargins(10);
// Define path to save the barcode image
string path = Path.Combine(_environment.WebRootPath, "GeneratedBarcode");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
// Save the generated barcode as a PNG file
string filePath = Path.Combine(_environment.WebRootPath, "GeneratedBarcode/barcode.png");
barcode.SaveAsPng(filePath);
// Get the file name and URL for the generated barcode image
string fileName = Path.GetFileName(filePath);
string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedBarcode/{fileName}";
ViewBag.QrCodeUri = imageUrl;
}
catch (Exception)
{
throw;
}
return View();
}
}
}Imports Microsoft.AspNetCore.Mvc
Imports IronBarCode
Imports System
Imports System.Drawing
Imports System.IO
Namespace YourNamespace.Controllers
Public Class HomeController
Inherits Controller
Private ReadOnly _environment As IWebHostEnvironment
Public Sub New(ByVal environment As IWebHostEnvironment)
_environment = environment
End Sub
Public Function CreateBarcode() As IActionResult
Return View()
End Function
' Handling POST operation inside this Action method
<HttpPost>
Public Function CreateBarcode(ByVal generateBarcode As GenerateBarcodeModel) As IActionResult
Try
' Create a barcode using the input text
Dim barcode As GeneratedBarcode = BarcodeWriter.CreateBarcode(generateBarcode.Barcode, BarcodeWriterEncoding.Code128)
' Adding annotation text to barcode
barcode.AddBarcodeValueTextBelowBarcode()
' Styling the Barcode
barcode.ResizeTo(400, 120)
barcode.ChangeBarCodeColor(Color.Red)
barcode.SetMargins(10)
' Define path to save the barcode image
Dim path As String = System.IO.Path.Combine(_environment.WebRootPath, "GeneratedBarcode")
If Not Directory.Exists(path) Then
Directory.CreateDirectory(path)
End If
' Save the generated barcode as a PNG file
Dim filePath As String = System.IO.Path.Combine(_environment.WebRootPath, "GeneratedBarcode/barcode.png")
barcode.SaveAsPng(filePath)
' Get the file name and URL for the generated barcode image
Dim fileName As String = System.IO.Path.GetFileName(filePath)
Dim imageUrl As String = $"{Me.Request.Scheme}://{Me.Request.Host}{Me.Request.PathBase}/GeneratedBarcode/{fileName}"
ViewBag.QrCodeUri = imageUrl
Catch e1 As Exception
Throw
End Try
Return View()
End Function
End Class
End Namespace程式碼中的操作方法將處理我們稍後建立的視圖生成的提交請求。 使用 IronBarcode,您可以自訂條碼格式、圖像元素、條碼字體和 HTML 圖像元素。 可能需要額外的庫以進行更多自訂,比如用於安裝條碼字體的 IronDrawing。 可以在 這裡找到更詳細的 API 文件。
現在我們可以為條碼生成器方法建立一個視圖。
在 HomeController.cs 文件中,右擊 CreateBarcode 方法,然後點擊新增視圖。

選擇 Razor 視圖並點擊新增。

選擇下圖所示的參數,然後點擊新增。 它會自動為該方法新增一個視圖。

您可以修改生成的程式碼以按需更改介面。
@model GenerateBarcodeMVCCore6_Demo.Models.GenerateBarcodeModel
@{
ViewData["Title"] = "CreateBarcode";
}
<h1>CreateBarcode</h1>
<form asp-action="CreateBarcode" method="post">
<div>
<label asp-for="Barcode"></label>
<input asp-for="Barcode" />
<span asp-validation-for="Barcode"></span>
</div>
<button type="submit">Generate Barcode</button>
</form>
@if (ViewBag.QrCodeUri != null)
{
<div>
<img src="@ViewBag.QrCodeUri" alt="Barcode Image" />
</div>
}
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
現在一切都已設置好,只需打開 _Layout.cshtml 文件並新增程式碼以在 navbar 中新增 CreateBarcode 選項。
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Home" asp-action="CreateBarcode">CreateBarcode</a>
</li>
現在運行應用程式,在文字字段中輸入文字並點擊生成條碼按鈕,它將動態建立並顯示條碼圖像。
5.1. 輸出

6. 結論
可以使用 IronBarcode 程式庫在 ASP.NET MVC 應用程式中動態生成和顯示條碼圖像,這是一個強大的 .NET 條碼程式庫,提供了多種功能來建立、讀取和操作 .NET 應用程式中的條碼圖像。 通過安裝 .NET Framework、Visual Studio 和 IronBarcode 程式庫等前提條件,開發人員可以輕鬆建立 ASP.NET MVC 專案,並生成和顯示各種格式的條碼圖像,如 Code 39、Code 128 和 QR Code。 IronBarcode 程式庫為開發人員提供了生成具有自訂維度、顏色和字體的條碼,並向條碼圖像新增文字和標誌的功能。 除了條碼生成之外,IronBarcode 還包括讀取和解碼條碼圖像的功能。 使用 IronBarcode,開發人員可以輕鬆建立強大且動態的 Web 應用程式,以滿足其業務需求。 有關此主題的相關教程,請存取以下連結。 有關條碼和 QR 碼生成的分步教程,請參閱以下連結。

Curtis Chau擁有Carleton大學的電腦科學學士學位,專精於前端開發,擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面,喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。
相關文章


