跳至頁尾內容
  1. IronBarcode
  2. IronBarcode博客
  3. 使用 IronBarcode
  4. Razor條碼產生器
使用 IRONBARCODE

建立 Razor 條碼產生器 Web 應用程式

柯蒂斯·週
柯蒂斯·週
更新:

Razor條碼產生器教學

Razor 條碼產生器是一款方便的工具，可簡化開發人員和企業建立條碼的流程。將條碼產生功能整合到 Web 應用程式中，可增強應用程式的功能和使用者體驗，並輕鬆產生各種類型的條碼。無論您是管理庫存、追蹤資產還是簡化結帳流程，使用 Razor 條碼產生器都能顯著提高效率和準確性。 本教學將使用IronBarcode來建立一個條碼產生器。

IronBarcode簡介

IronBarcode是使用 .NET Core 的開發人員的必備工具，它提供了一個易於使用的條碼生成和讀取庫。 它之所以脫穎而出，是因為它易於整合到您的專案中，只需極少的程式碼即可產生或解碼條碼和二維碼。 這使得 IronBarcode 成為一個用途廣泛的選擇，它既能產生條碼，又能讀取條碼，可以增強各種應用程式的功能，從使用 Razor 頁面的 Web 應用程式到桌面和行動應用程式。 它支援的條碼格式範圍廣泛，確保能夠滿足各種專案需求，包括 .NET MVC、Blazor WebAssembly 應用程式和 Blazor 應用程序，使其成為開發人員的可靠選擇。

建立條碼產生器的步驟

步驟 1：建立 ASP.NET Core Web 應用程式（Razor Pages）

在 Visual Studio 中使用 Razor Pages 建立 ASP.NET Core Web 應用程式非常簡單。 本指南將協助您從零開始建立專案：

1.開啟 Visual Studio：啟動 Visual Studio。 在開始視窗中，選擇"建立新專案"以開始設定新的 Web 應用程式的過程。 2.選擇項目類型：在"建立新項目"視窗中，從項目範本清單中選擇"ASP.NET Core Web App"。 然後，點擊"下一步"繼續。

！建立一個新的 Razor 項目

3.設定您的專案：現在系統會提示您設定您的新專案。

  • 輸入您的 Web 應用程式的"專案名稱"。
  • 選擇電腦上一個適當的"位置"，用於儲存項目檔案。
  • （可選）調整"解決方案名稱"。 點選"下一步"繼續。

配置專案名稱、解決方案名稱和檔案路徑

4.設定項目詳情：在"附加資訊"視窗中，請確保：

  • 選擇合適的 .NET 版本。
  • 確認已勾選"設定 HTTPS"。
  • 點擊"建立"以開始建立新的 Razor Pages Web 應用程式。

！設定附加資訊

步驟 2：安裝 IronBarcode 庫

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

1.存取 NuGet 套件管理器：在解決方案資源管理器窗格中以滑鼠右鍵按一下專案名稱。 選擇"管理 NuGet 套件…"以開啟 NuGet 套件管理器標籤。 2.搜尋 IronBarcode：在"瀏覽"標籤中，鍵入"IronBarcode"以尋找該庫。 3.安裝 IronBarcode：選擇"IronBarCode"，然後點選"安裝"。 請先查看所有依賴項和授權協議，然後再接受繼續操作。

透過 NuGet 套件管理器安裝 IronBarcode

步驟三：設計使用者介面

透過編輯index.cshtml檔案來增強首頁。套用自訂樣式：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
<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>
<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>
<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>
<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>
<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>
}
@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

第四步：編寫功能性程式碼

定義顏色：

在index.cshtml文件頂部新增：

using Color = IronSoftware.Drawing.Color;
using Color = IronSoftware.Drawing.Color;
$vbLabelText   $csharpLabel

條碼顏色枚舉：

定義條碼的可用顏色：

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

條碼類型枚舉：

定義可用的條碼類型：

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

輔助函數：

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

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

OnPostUpload 函數：

處理用於產生條碼的表單提交：

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

版面編輯：

編輯\_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>
<!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 運行應用程式。請依照螢幕上的指示輸入資料、選擇條碼類型、設定尺寸並產生條碼。

！輸出的 Web 應用程式

結論

條碼產生器網路應用程式提供了一種建立自訂條碼的簡單方法。 在產生條碼之前，您可以輸入資料、選擇條碼類型、設定尺寸和選擇顏色。 IronBarcode 為該應用程式提供免費試用，許可證起價為$799 。

產生二維碼影像時，可以考慮使用IronQR 。

常見問題解答

如何將條碼產生功能整合到 ASP.NET Core Web 應用程式中？

您可以使用 IronBarcode 將條碼產生功能整合到 ASP.NET Core Web 應用程式中。透過 NuGet 套件管理器安裝 IronBarcode 庫，然後利用其方法在應用程式中產生和讀取條碼和二維碼。

設定用於產生條碼的 Razor Pages 專案需要哪些步驟？

要設定用於條碼產生的 Razor Pages 項目，首先在 Visual Studio 中建立一個新的 ASP.NET Core Web 應用程序，透過 NuGet 套件管理器安裝 IronBarcode，使用 HTML、CSS 和 jQuery 自訂使用者介面，並實現條碼功能所需的 C# 程式碼。

如何使用 NuGet 套件管理器安裝 IronBarcode？

要安裝 IronBarcode，請在 Visual Studio 的解決方案資源管理器中右鍵單擊您的項目，選擇“管理 NuGet 套件...”，搜尋“IronBarcode”，然後按一下“安裝”。這會將該庫添加到您的專案中，使您能夠使用其條碼生成功能。

使用 IronBarcode 產生條碼有哪些好處？

IronBarcode 提供了一個強大的解決方案，用於產生和讀取各種條碼格式。它透過提供易於使用的方法簡化了 .NET 開發人員的工作流程，並支援整合到各種專案類型中，例如 .NET MVC、Blazor WebAssembly 和 Blazor App 專案。

如何使用 IronBarcode 自訂條碼外觀？

您可以使用 IronBarcode 自訂條碼外觀，只需定義條碼顏色和類型的枚舉即可。這樣，您可以選擇不同的顏色和條碼格式，從而定制生成的條碼以滿足特定的設計要求。

條碼產生過程中 OnPostUpload 函數的作用是什麼？

OnPostUpload 函數處理使用者輸入的條碼產生資訊。它會捕獲條碼文字、類型、尺寸和顏色等詳細信息，並利用 IronBarcode 的方法根據這些參數建立條碼。

我可以在 Blazor 應用程式中使用 IronBarcode 嗎？

是的，IronBarcode 可以用於 Blazor 應用程式。它支援與 Blazor WebAssembly 和 Blazor Server 專案集成，為開發現代 Web 應用程式的開發人員提供了靈活性。

柯蒂斯·週
柯蒂斯·週
  現在就和工程團隊聊天吧
技術撰稿人

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

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

相關文章

30天試用期 → 完整產品。無限制。無需信用卡。 開始免費試用