使用IRONBARCODE

建立Razor條碼生成器Web應用

Curtis Chau
Curtis Chau
Updated: 2026年5月11日

Razor Barcode Generator是一個方便的工具，可以簡化開發人員和企業生成條碼的過程。在網頁應用程式中整合條碼生成功能，提升了功能和使用者體驗，使得生成多種條碼型別變得簡單。不論您是在管理庫存、追蹤資產，還是簡化結帳流程，使用Razor Barcode Generator都能顯著提高效率和準確性。 我們將在本教程中使用IronBarcode來建立條碼生成器。

IronBarcode介紹

IronBarcode是開發人員在.NET Core中工作的必備工具，提供一個易於使用的條碼生成和讀取的程式庫。 它之所以突出是因為簡單地整合到您的項目中，僅需少量程式碼即可生成或解碼條碼和QR碼。 這使得IronBarcode成為增強應用程式功能的多用途選擇，從使用Razor頁面的網頁應用程式到桌面和移動應用程式。 其廣泛支援的條碼格式範圍確保它能滿足各種專案需求，包括.NET MVC、Blazor WebAssembly應用程式和Blazor應用程式，使其成為開發人員可靠的選擇。

建立條碼生成器的步驟

步驟1：建立ASP.NET Core Web App (Razor Pages)

使用Visual Studio建立帶有Razor Pages的ASP.NET Core Web App是很簡單的。 本指南將幫助您從頭開始設置專案：

  1. 打開Visual Studio：啟動Visual Studio。 在啟動窗口中，選擇"建立新項目"來開始設置新的網頁應用程式。
  2. 選擇專案型別：在"建立新項目"窗口中，從項目模板列表中選擇"ASP.NET Core Web App"。 然後，點擊"下一步"繼續。

現在配置新的項目

  1. 配置您的專案：現在，您需要配置您的新專案。
    • 鍵入您的網頁應用程式的"專案名稱"。
    • 選擇您電腦上的適合位置來儲存專案文件。
    • 可選地，調整"解決方案名稱"。
    • 點擊"下一步"繼續。

項目名稱、解決方案名稱和文件路徑的配置

  1. 設置專案詳情：在"附加資訊"窗口中，確認：
    • 選擇適當的.NET版本。
    • 確認"配置HTTPS"已選中。
    • 點擊"建立"來啟動新的Razor Pages網頁應用程式的建立。

設置附加資訊

步驟2：安裝IronBarcode程式庫

要在Visual Studio中使用NuGet套件管理器安裝IronBarcode：

  1. 存取NuGet套件管理器：在解決方案導覽解析欄中右鍵點擊您的專案名稱。 選擇"管理NuGet套件…"打開NuGet套件管理器標籤。
  2. 搜索IronBarcode：在"瀏覽"標籤中，鍵入"IronBarcode"以找到程式庫。
  3. 安裝IronBarcode：選擇"IronBarcode"並點擊"安裝"。 檢查所有依賴項和授權協議，然後接受以繼續。

通過NuGet套件管理器安裝IronBarcode

步驟3：設計UI

通過編輯index.cshtml文件來增強索引頁。應用自定義樣式：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
HTML

新增歡迎消息：

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML

結構化主要內容：

<div class="container">
    <div class="row justify-content-center">
        <!-- Form and Image Column will go here -->
    </div>
</div>
HTML

設計輸入表單：

包含表單以收集使用者輸入來生成條碼：

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <!-- Form elements omitted for brevity -->
        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
HTML

圖片欄位：

用於顯示和下載生成的條碼：

<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <!-- Image and download button elements omitted for brevity -->
    </div>
</div>
HTML

腳本：

使用jQuery新增處理輸入和下載操作的功能：

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
JavaScript

步驟4：編寫功能程式碼

定義顏色：

在您的index.cshtml文件的頂部新增：

using Color = IronSoftware.Drawing.Color;

條碼顏色枚舉：

定義可用的條碼顏色：

public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}

條碼型別枚舉：

定義可用的條碼型別：

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}

助手功能：

將枚舉轉換為顏色和條碼編碼：

private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }

OnPostUpload函式：

處理條碼生成的表單提交：

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}

佈局編輯：

編輯\_Layout.cshtml以獲取極簡設計：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
HTML

運行應用程式

按F5或Ctrl + F5運行應用程式。按螢幕上的說明進行資料輸入，選擇條碼型別，設置尺寸並生成條碼。

輸出網頁應用程式

結論

條碼生成器網頁應用程式提供了一個建立自定義條碼的簡單方法。 您可以輸入資料，選擇條碼型別，設置尺寸並選擇顏色後生成條碼。 IronBarcode為此應用程式提供免費試用，授權費從$999開始。

要生成QR Code圖像，請考慮使用IronQR。

Curtis Chau
Curtis Chau
技術作家

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

閱讀更多

相關文章